效果
代码
#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);
- 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后
- step(1., mod(_st.y,2.0)) * 0.5;
- 分析图
- 从分析图中可以看出只有st.y在[1,2)和[3,4)中经过step操作后会返回1,从而st.x 向右偏移了0.5,也印证了效果图的偏移