Shader特效 —— 动态网格 【GLSL】

效果预览

参考自 https://blog.csdn.net/Kennethdroid/article/details/103335598

我对代码进行了简化和解析。

首先让我们来看一下实际效果：

动态网格效果图

 代码和具体解析

上图中区间即 [maxSize, gridSize - maxSize]

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);
    }
}

查看专栏详情 立即解锁全部专栏