mod函数返回x % 3的结果

先看一个挑战问题题目：

Create a pattern of alternating black and red columns, with 9 columns of each color. Then, hide every third column that is colored red.The shader should avoid using branching or conditional statements in its code, and instead rely on the mod and step functions to determine the color of each pixel.

先看一下解决之前的代码和对应的图形：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{// Normalized pixel coordinates (from 0 to 1)vec2 uv = fragCoord.xy / iResolution.xy;uv *= 9.0;// uv.x = mod(uv.x,3.);float x = fract(uv.x);x = step(0.5, x);// Output to screenfragColor = vec4(x,0.,0.,1.0);
}

再来看下问题：

创建黑色和红色柱交替的图案，每种颜色有 9 列。然后，隐藏每第三列红色的列。

着色器应避免在其代码中使用分支或条件语句，而是依赖mod和step函数来确定每个像素的颜色。

 答案：

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{// Normalized pixel coordinates (from 0 to 1)vec2 uv = fragCoord.xy / iResolution.xy;uv *= 9.0;// uv.x = mod(uv.x,3.);float x = fract(uv.x);x = step(0.5, x);float modX = mod(uv.x,3.);x -= step(2.5,modX) * (1. - step(3.,modX));// Output to screenfragColor = vec4(x,0.,0.,1.0);
}

代码将画布空间分成了9等分，每一份的范围都是0~1（fract(uv.x)函数的作用),

然后在每一份的 [0,0.5] 填充黑色，[0.5,1]填充红色，以此重复。

然后再来一个mod约束，提取出 对3取余的所有x，也就是modX,

然后再每一个[2.5,3]范围内做step运算,具体的运算见下图：

那么拿下面的减去上面的就会得出图形结果：

希望能够帮到喜欢shadertoy但是又不是很懂怎么运作的小伙伴