效果

代码

#ifdef GL_ES
precision mediump float;
#endif

uniform vec2 u_resolution;
uniform float u_time;

vec2 brickTile(vec2 _st, float _zoom){
    _st *= 5.;

    _st.x += step(1., mod(_st.y,2.0)) * 0.5;

    return fract(_st);
}

float box(vec2 _st, vec2 _size){
    _size = vec2(0.5)-_size*0.5;
    vec2 uv = smoothstep(_size,_size+vec2(1e-4),_st);
    uv *= smoothstep(_size,_size+vec2(1e-4),vec2(1.0)-_st);
    return uv.x*uv.y;
}

void main(void){
    vec2 st = gl_FragCoord.xy/u_resolution.xy;
    vec3 color = vec3(0.0);

    st = brickTile(st,5.0);

    color = vec3(box(st,vec2(0.9)));

    gl_FragColor = vec4(color,1.0);
}

解析

• vec2 st = gl_FragCoord.xy/u_resolution.xy;
  • 坐标归一化
• vec3 color = vec3(0.0);
  • 声明一个三维向量，每个分量都是0
• st = brickTile(st,5.0);
  • 调用函数。传递归一化后的坐标系，和一个float值
    • vec2 brickTile(vec2 _st, float _zoom)
      • 声明一个函数名为brickTile，接受两个参数
      • _st *= 5.;
        • _st 自身乘以 5.0，相当于对 _st 的所有分量进行放大 5 倍
      • _st.x += step(1., mod(_st.y,2.0)) * 0.5;
        • mod(_st.y,2.0) 
          • mod(_st.y,2.0)返回[0,2)之间的值。
        • 经过step后
          • 返回[0,1]的值
        • step(1., mod(_st.y,2.0)) * 0.5;
          • 将上述step函数的结果乘以0.5
        • 分析图
          • 
          • 从分析图中可以看出只有st.y在[1,2)和[3,4)中经过step操作后会返回1，从而st.x 向右偏移了0.5，也印证了效果图的偏移