效果预览
参考自 https://blog.csdn.net/Kennethdroid/article/details/103335598
我对代码进行了简化和解析。
首先让我们来看一下实际效果:
代码和具体解析
coord:由于是取模运算 mod,什么 coord 表示任意网格的内部坐标 ;
maxSize:表示白线的最大尺寸,我设定的取值范围是 [0, gridSize/2] ,因为如果达到网格的一半大小,白线就可以完全覆盖网格了;
相关 GLSL 内置函数
bvec lessThan(vec x, vec y) bvec lessThan(ivec x, ivec y) |
判断 x<y |
bvec lessThanEqual(vec x, vec y) bvec lessThanEqual(ivec x, ivec y) |
判断 x<=y |
bvec greaterThan(vec x, vec y) bvec greaterThan(ivec x, ivec y) |
判断 x>y |
bvec greaterThanEqual(vec x, vec y) bvec greaterThanEqual(ivec x, ivec y) |
判断 x>=y |
bvec equal(vec x, vec y) bvec equal(ivec x, ivec y) bvec equal(bvec x, bvec y) |
判断 x==y |
bvec notEqual(vec x, vec y) bvec notEqual(ivec x, ivec y) bvec notEqual(bvec x, bvec y) |
判断 x!=y |
bool any(bvec x) |
判断 x 的元素是否有 true |
bool all(bvec x) |
判断 x 的元素是否全部为 true |
bool not(bvec x) |
对 x 进行取反 |
// 原代码来自 https://blog.csdn.net/Kennethdroid/article/details/103335598
// 我进行简化
#iChannel0 "file://./beard.jpg"
void main()
{
vec2 uv = gl_FragCoord.xy / iResolution.xy;
vec2 gridSize = iResolution.xy / vec2(16., 16.); // 格子的尺寸,本例为 16x16 的网格
vec2 maxSize = gridSize * .5 * abs(sin(.5*iTime)); // 网格线宽度的最大值
// 格子内部的坐标 (x, y)
vec2 coord = mod(gl_FragCoord.xy, vec2(gridSize));
// 对于每个格子内的坐标,如果在白线所夹的范围内
// 相当于 (maxSize <= coord.x && coord.x <= gridSize.x - maxSize &&
// maxSize <= coord.y && coord.y <= gridSize.y - maxSize)
if ( all( greaterThan(coord, maxSize) ) &&
all( lessThan(coord, gridSize - maxSize) ))
{
gl_FragColor = texture(iChannel0, uv);
}
else
{
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
}