shader 案例学习笔记之绘制圆

环境搭建：参考glsl vscode环境搭建

先上代码

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main(){

  vec2 st = gl_FragCoord.xy/u_resolution.xy;

  st -= 0.5;

  st.x *= u_resolution.x/u_resolution.y;

  float r = length(st);

  float d = step(0.2, r);

  //  float  d = smoothstep(1.0, 0.1, r);

  gl_FragColor = vec4(d, d, d, 1.0); 
}

逐行解释：

• #ifdef GL_ES
  • 预处理指令，用于检查是否为OpenGL ES 环境；
• precision mediump float；
  • 如果是OpenGL ES 环境，声明浮点数精度为"mediump"（中等精度）单词为medium  precision缩写。
    • 还有高精度  highp
• uniform vec2 u_resolution;
  • 定义一个二维向量类型的统一变量"u_resolution"，这个变量通常是用来存储屏幕或者渲染区域的分辨率；
• void mian
  • 片元着色器的入口函数，每个片元都要执行这个函数且所有的着色器代码都要在这个函数中去执行
• vec2 st gl_FragCoord.xy / u_resolution.xy;
  • gl_FragCoord是片元着色器的内置变量，存储了当前片元的屏幕坐标(以像素为单位)。将其除以u_resolution 得到一个范围在[0,1]之间的二维向量，代表当前片元在屏幕上的相对位置。可以称之为坐标归一化
  • 
  • 将main函数代码改成如下，颜色分布和上面分析结果一样

  • void mian(){
    
        vec2 st = gl_FragCoord.xy/u_resolution.xy;
        gl_FragColor = vec4(st.x, st.y, 0, 1.0);
    
    }

  • 

• st -= 0.5
  • 将二维向量每个分量都减去0.5，将坐标中心移动到屏幕中心。
  • 黑色为执行st -= 0.5之前的坐标系，橙色为执行之后的坐标系，从新的坐标系看，原点（0，0）就移动到了渲染区域的中点
  • 
• st.x *= u_resolution.x/u_resolution.y; 
  • 将调整后的横坐标 st.x 乘以屏幕的宽高比（u_resolution.x/u_resolution.y），以确保在不同宽高比的屏幕上图形显示效果一致。
• float r = length(st);
  • length函数是glsl内置函数。计算向量st的长度并赋值给r。这个向量的长度通常用来表示片元(某个像素点)到中心点的距离。
•  float c = step(0.2, r);
  • step函数glsl内置函数。如果r的值大于0.2，返回1.0，否则返回0.0。这里的0.2，其实就是我们圆的半径。当改变0.2这位置的参数的大小，就很容易理解，当数值越大时，绘制的圆就越大。
  • 所有的片元（像素）都要执行这个函数，当st到原点（0，0）的距离大于0.2时，就是白色，当小于0.2的时候，就返回黑色，所以最终如下图所示。
  • 
• gl_FragColor = vec4(c, c, c, 1.0);
  • 设置当前片元的颜色
• 注释掉的方法： float  c = smoothstep(0.3, 0.2, r);
  • glsl内置函数，float smoothstep(float edge0, float edge1, float x);
    •  当edge1 < edge0时，当x < edg1时，返回1，当x > edg0时，返回0，当edg0<=xedg1时，返回x。
    •  当edge0 = edge1 ,smoothstep退化成step
    •  但当edge0=edge1=0,smoothstep(edge0,edge1,x);无论x是什么都返回0
    • 
    • 
    • 

补充：

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;

void main(){

  vec2 st = gl_FragCoord.xy/u_resolution.xy;

  st -= 0.5;
  st.x *= u_resolution.x/u_resolution.y;

  float r = length(st);

  float color = 0.0;

  if(r>0.2){
    color = 1.0;
  }else{
    color = 0.0;
  }
  gl_FragColor = vec4(color, color, color, 1.0); 
}

方法二：

  Effect.ShadersStore['planeMatVertexShader'] = `
  
    precision highp float;

    attribute vec3 position;
    attribute vec2 uv;
    attribute vec3 normal;

    uniform mat4 worldViewProjection;

    varying vec2 vUV;
    varying vec3 vPosition;

    void main(){
      vPosition = position;
      gl_Position = worldViewProjection * vec4(position, 1.0);
      vUV = uv;      
    }
    `;
  Effect.ShadersStore['planeMatFragmentShader'] = `
    precision highp float;

    varying vec2 vUV;
    varying vec3 vPosition;

    void main(){
      float inCircle = 1.0 - step(0.5, length(vPosition.xy));
      vec3 color = vec3(1.0,1.0,0.0) * inCircle;
      gl_FragColor = vec4(color,1.0);
    }
    `;