shader 案例学习笔记之绘制矩形

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

    varying vec2 vUV;
    varying vec3 vPosition;


    float rect(vec2 pt,vec2 size,vec2 center){
      vec2 p = pt - center;
      vec2 halfSize = size * 0.5;
      float horz = step(-halfSize.x,p.x)  - step(halfSize.x,p.x);
      float vert = step(-halfSize.y,p.y)  - step(halfSize.y,p.y);
      return vert * horz;
    }

    void main(){
      float inRect = rect(vPosition.xy,vec2(1.0),vec2(0.0));
      vec3 color = vec3(1.0,1.0,0.0) * inRect;
      gl_FragColor = vec4(color,1.0);
    }
    `;

1. vec2 p = pt - center;

   • 计算输入点 pt 相对于矩形中心 center 的偏移向量 p。这一步是为了将矩形的中心移到坐标原点，以便后续的判断。

2. vec2 halfSize = size * 0.5;

   • 计算矩形大小 size 的一半，得到 halfSize。

3. float horz = step(-halfSize.x,p.x) - step(halfSize.x,p.x);

   • step(-halfSize.x,p.x)：如果 p.x（点相对于矩形中心的横坐标）大于等于 -halfSize.x（矩形左边界的横坐标），则返回 1.0，否则返回 0.0。
   • step(halfSize.x,p.x)：如果 p.x 小于 halfSize.x（矩形右边界的横坐标），则返回 1.0，否则返回 0.0。
   • 两者相减，当点在矩形的横坐标范围内时，结果为 1.0，否则为 0.0。

4. float vert = step(-halfSize.y,p.y) - step(halfSize.y,p.y);

   • 与横坐标的判断类似，这里是对纵坐标进行判断。如果 p.y（点相对于矩形中心的纵坐标）在矩形的纵坐标范围内，结果为 1.0，否则为 0.0。

5. return vert * horz;

   • 最后将横坐标和纵坐标的判断结果相乘。只有当点同时在矩形的横坐标和纵坐标范围内时，乘积才为 1.0，表示点在矩形内；否则为 0.0，表示点在矩形外。