shader 案例学习笔记之偏移

效果

代码

#ifdef GL_ES
precision mediump float;
#endifuniform 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，也印证了效果图的偏移