首页 > 其他分享 >shadertoy学习 第一课

shadertoy学习 第一课

时间:2023-03-03 11:15:19浏览次数:49  
标签:shadertoy iResolution uv 学习 第一课 vec4 xy vec2 fragCoord

一、坐标归一化



image

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
     vec2 uv = fragCoord/iResolution.xy;

    // Output to screen
     fragColor = vec4(uv,0.,1.0);
}

从左往右红色增加

从下往上绿色增加



二、坐标归一化,画矢量距离





image


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (fragCoord/iResolution.xy-vec2(0.5))*2.0;
     float c = length(uv);//计算矢量长度

    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}

坐标变换为-1到1,算出矢量长度,就可以画出矢量距离,越黑越接近0



三、画圆


image

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (fragCoord/iResolution.xy-vec2(0.5))*2.0;
     float c=0.;//默认黑色
     float r=0.3;//圆的半径
     if( length(uv) < r )//矢量长度小于半径,就为白色
         c=1.;

    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}


四、画正圆

为啥前面不圆呢?思考一下


虽然都是0到1,但是长的一边增长慢,短的增长快


可以这样修改,长短边都除以同一个比例

   vec2 uv = (fragCoord-0.5*iResolution.xy)/iResolution.xx*2.0;

或者这样    

vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xx;

或者这样

vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);//取x和y的最小值作为比例


效果是一样的

完整源码如下:

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
     // Normalized pixel coordinates (from -1 to 1)
     vec2 uv = (2.0*fragCoord-iResolution.xy)/iResolution.xx;

//    vec2 uv = (2.0*fragCoord-iResolution.xy)/min(iResolution.x,iResolution.y);//取x和y的最小值作为比例
     float c=0.;//默认黑色
     float r=0.3;//圆的半径
     if( length(uv) < r )//矢量长度小于半径,就为白色
         c=1.;

    // Output to screen
     fragColor = vec4(vec3(c),1.0);
}


image

标签:shadertoy,iResolution,uv,学习,第一课,vec4,xy,vec2,fragCoord
From: https://www.cnblogs.com/cute/p/17174813.html

相关文章

  • 几种类型神经网络学习笔记
    跟随【导师不教?我来教!】同济计算机博士半小时就教会了我五大深度神经网络,CNN/RNN/GAN/transformer/LSTM一次学会,简直不要太强!_哔哩哔哩_bilibili了解的五大神经网络,整理笔......
  • 180204 Keras学习笔记(更新ing)
    ​常规操作​​​将整数标签label进行one-hot转换​​​​保存与加载模型权重​​​​加载mnist数据​​​​加载cifar-100数据​​​​Kerasasasimplifiedinterfaceto......
  • ABP微服务系列学习-对接前端界面
    前面我们把后端的微服务架子基本搭建完成并成功启动了,现在我们可以对接前端界面了。这里我们直接用ABP模板里面的Angular的前端界面。创建应用程序模板使用ABPCli创建一......
  • python+playwright 学习-20.文件下载expect_download()
    前言文件下载操作expect_download()当浏览器上下文关闭时,所有属于浏览器上下文的下载文件都会被删除。下载开始后会发出下载事件。下载完成后,下载路径可用:withpage.e......
  • kafak学习总结
    高可用多副本机制: 主副本和从副本,从副本只负责同步主副本数据,只有主副本进行读写。高并发网络结构设计多路复用多selector->多线程->多队列高性能写把数据先......
  • 剖析flutter_download_manager学习如何做下载管理,暂停和取消
    前言内容类应用中图片或文件下载,一般应用中应用更新和升级,这些都是经典的下载场景。下载是项目中基础且重要的模块。从代码逻辑复用性和人力成本考虑,一直想实现一个纯Dar......
  • [20230303]学习UNIFIED audit--定期清理AUDSYS.AUD$UNIFIED.txt
    [20230303]学习UNIFIEDaudit--定期清理AUDSYS.AUD$UNIFIED.txt--//前面的学习包括手工操作整理AUDSYS.AUD$UNIFIED以及移动AUDSYS.AUD$UNIFIED到别的表空间.--//下面学习......
  • Shell脚本学习指南
      https://github.com/feiquan123/shell-script-learn ......
  • python+playwright 学习-19.监听dialog事件-优雅处理对话框
    前言网页上的alert弹出框你不知道什么时候弹出来,selenium处理alert弹出框的方式是先判断有没alert再处理,并且只能处理这一次。playwright框架可以监听dialog事件,不管......
  • 深度学习导论知识——最小二乘法(Ordinary Least Squares, OLS)
    1.知识点简介最小二乘法(OrdinaryLeastSquares,OLS)是常见的估计模型参数的方法。早在19世纪,勒让德就认为按照“误差的平方和最小”这个规则估计出来的模型是最接近......