片元着色器中绘制 点(圆)

• 文章主要讲的是写片元着色器的一些算法(套路),实例代码使用的是shadertoy.所以在unity,webgl1之类的地方代码不一定能直接使用,但思路基本相同.稍作修改即可.

uv

• 片元着色器中绘制图形,不像在html里的canvas 2d中有很多现成的api.比如你想画个方块,直接使用fillRect然后给予坐标和宽高即可.

   ctx.fillRect(20,20,10,10); //ctx.fillRect(x坐标,y坐标,宽,高);
  

• 另一个区别在于片元着色器是并行运算的,是异步的.如果说canvas 2d的绘图是画师画画.那么片元着色器绘图就是集体表演,集体舞蹈,每个参演者都有自己的任务,扮演着屏幕中的一个点.而片元着色器中的一个参演者就是一个像素.而我们写的shader程序,就是给每个像素(参演者)指定的统一规则(任务).

  
  
  国庆70周年
  • 那么问题来了,所有像素(参演者)都使用同一套规则(任务,程序),最后输出不就都一样了吗.第一个像素经过对规则的分析,认为自己应该输出黑色.那么第二,三,四...个像素使用同样的规则,那不也得输出黑色吗.这样整个屏幕不就都黑了吗.怎么才能同时显示多种颜色呢.
  • 其实解决方案也很简单,就是给每个像素一个编号.然后在规则(程序)中,让不同编号的像素做不同的事情,问题不就解决了吗.换种说法就是,规则等同于函数,编号等同于输入函数的参数.不同的输入,会产生不同的输出.
• uv就是对像素的编号,它由x,y两个值组成,x代表横坐标,y代表纵坐标.uv有些是从顶点着色器直接穿过来的,有些是通过其他参数算出来的.

  • shadertoy新建页默认是用的 像素点坐标(横坐标第几个像素,纵坐标第几个像素)/像素总数(横坐标像素数量,纵坐标像素数量) 方式来获取uv.所以最后的显示到屏幕上

    • 最左下角的坐标为(0,0)
    • 右下角x为1,y还是0(1,0)
    • 左上角(0,1)
    • 右上角(1,1)
      
      shadertoy 新建页

  • 不过我个人不太喜欢这样的设置, 我习惯把uv的(0,0)点设在屏幕中央,并让x的取值随屏幕宽高比自由伸缩.

    • 修改代码

        vec2 uv = fragCoord/iResolution.xy-.5; //把`(0,0)`改为屏幕中央
        uv.x *= iResolution.x/iResolution.y; //让x轴自由伸缩,不变形
      

    • 简化一下

        vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
      

修改后的uv

点

• 说完uv,我们开始来画点(圆).

  • 中学数学,我们学过圆的公式是 y²+x²=r². x,y代表坐标, r代表半径. (这边给大家推荐个网址,可以通过公式,快速画出函数曲线. https://www.desmos.com/calculator)
    
    圆公式
  • 这是一个圆的边框线,我需要的是实心圆. 所以修改一下 y²+x²<=r²
    
    实心圆公式

• 接着我们要运用公式,将它转换为代码,在shader中画圆

  
  
  第一个圆

  void mainImage( out vec4 fragColor, in vec2 fragCoord )
  {
      vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
      
      // 这边我们画一个白色的圆,背景为黑色
      // 如果像素在圆内,就显示白色,不在圆内就显示黑色
      
      float isInCircle = 0.; // 如果在圆内为1, 如果在圆外则为0
      float r = 0.5; // 设置圆的半径为0.5
      if(uv.x*uv.x + uv.y*uv.y <= r*r){ // 判断是否在圆内
          isInCircle = 1.;
      }else{
          isInCircle = 0.;
      }
      
      // 将isIncircle赋给rgb三颜色,输出到屏幕
      fragColor = vec4(isInCircle,isInCircle,isInCircle,1.0); 
  }
  

  • 我们使用shader自带的函数,简化下代码,并将它封装成一个函数

  float circle(float r, vec2 uv){ // 封装函数
      // length是计算长度 相当于 return (x*x+y*y)开平方
      // step会比较两个参数大小 相当于 return 参数1<=参数2 ? 1. : 0.
      return step( length(uv), r);
  }
  
  void mainImage( out vec4 fragColor, in vec2 fragCoord )
  {
      vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
      
      float isInCircle = 0.; 
      float r = 0.5;
  
      isInCircle = circle(r,uv); // 调用函数
      
      fragColor = vec4(isInCircle,isInCircle,isInCircle,1.0); 
  }
  

  • 需要注意的是,函数必须在调用他之前定义.(比如上面代码中,circle在mainImage中被调用.那么circle必须在mainImage之前定义.如果写在mainImage后面,会报错.)同时也不支持递归.

• 移动点(圆)

  • 这样我们就学会了最基础的圆的画法,但这个圆是固定在屏幕中央的,我们现在要自定义圆的位置.

    • 不废话了...直接贴图吧

      
      
      圆移动公式
    • 修改代码

      float circle(vec2 pos,float r, vec2 uv){ // 增加位置参数pos
          return step( length(uv-pos), r); // 依照公式,调整代码为 uv-pos
      }
      void mainImage( out vec4 fragColor, in vec2 fragCoord )
      {
          vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
          
          float isInCircle = 0.; 
          float r = 0.1; // 半径调小点
          vec2 pos = vec2(0.3,0.2); // 设置圆的位置
      
          isInCircle = circle(pos,r,uv); // 传入位置参数pos
          
          fragColor = vec4(isInCircle,isInCircle,isInCircle,1.0); 
      }
      

    • 运行结果

      
      
      圆移动结果

• 抗锯齿

  • 仔细看的话,你会发现上面图中的圆都有锯齿.一方面是因为屏幕分辨率不够高,没有达到肉眼不可分别的程度.另一方面是因为我们的输出的只有黑和白两个颜色,没有灰色作为过渡色.两者相加就会出现锯齿.分辨率的问题,不是我们写代码能解决的.所以只能在过渡色方面想办法.
  • smoothstep就是一个能代替step,提供过渡色的函数.解释起来比较麻烦,感兴趣的同学,自己百度搜一下具体的使用方法吧.
  • 修改circle函数

    float circle(vec2 pos,float r, vec2 uv){
        float l = length(uv-pos);
        float w = 1./iResolution.y; // 渐变范围
        return smoothstep( r+w, r-w, l);
    }
    

抗锯齿

• 多点(圆)
  • 我们已经有了一个圆润的圆,那怎么才能有多个圆呢?
  • 一个圆变多个圆并同时显示在屏幕上,其实就是个求并集的过程.那么一个圆集合中的元素什么呢?就是在这个圆内的像素,也就是白色的像素.
  • 之前说过,片元着色器是写给像素的.那我们的像素应该怎么行动呢.像素可能会想,我要知道我是不是在圆内,现在有3个圆,只要我在3个圆中的任何一个圆内,我就是在圆内,否则就是圆外.很明显,这就是一个或运算.
  • 修改mainImage函数

    void mainImage( out vec4 fragColor, in vec2 fragCoord )
    {
        vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
        
        float isInCircle = 0.; 
        float r = 0.1; 
        vec2 pos1 = vec2(0.3,0.2); 
        vec2 pos2 = vec2(0.0,0.0); 
        vec2 pos3 = vec2(-0.3,0.2); 
    
        // 或运算 合并多个圆
        isInCircle = circle(pos1,r,uv) == 1. || 
                     circle(pos2,r,uv) == 1. ||
                     circle(pos3,r,uv) == 1. ?
                     1. : 0.;
        
        fragColor = vec4(isInCircle,isInCircle,isInCircle,1.0); 
    }
    

多圆

• 由于我过于简单粗暴的把像素分为了圆内的,圆外的两种.忽略了边缘过渡的情况.所以又出现了锯齿.其实我们可以使用max函数代替或运算.甚至更偷懒一点,使用加法也是可行的.
• 最后上个完成版的代码

  float circle(vec2 pos,float r, vec2 uv){
      float l = length(uv-pos);
      float w = 1./iResolution.y; 
      return smoothstep( r+w, r-w, l);
  }
  void mainImage( out vec4 fragColor, in vec2 fragCoord )
  {
      vec2 uv = (fragCoord-.5*iResolution.xy)/iResolution.y;
      
      float isInCircle = 0.; 
      float r = 0.1; 
      vec2 pos1 = vec2(0.3,0.2); 
      vec2 pos2 = vec2(0.0,0.0); 
      vec2 pos3 = vec2(-0.3,0.2); 
  
      // max 代替或运算
      //isInCircle = max(max(circle(pos1,r,uv),
      //    circle(pos2,r,uv)), 
      //    circle(pos3,r,uv));
      
      // 加法 代替或运算
      isInCircle = circle(pos1,r,uv)+
          circle(pos2,r,uv)+ 
          circle(pos3,r,uv);
      
      fragColor = vec4(isInCircle,isInCircle,isInCircle,1.0); 
  }
  

最后效果