建站实战干货

1.类型定义

点击查看代码

vec2 uv=vec2(0.3,0.4);  #UV、坐标
vec3 col=vec3(1.0,2.0,3.0);  #RGB、法线、方向
vec4 finalColor=vec4(col,1.0);  #RGBA、输出像素

2.练熟vec2,vec3

点击查看代码

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{vec2 uv = fragCoord / iResolution.xy;vec3 col = vec3(uv, 0.0);fragColor = vec4(col, 1.0);
}

3.掌握数学函数

点击查看代码

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{vec2 uv = fragCoord / iResolution.xy;float v = sin(uv.x * 10.0 + iTime);fragColor = vec4(vec3(v * 0.5 + 0.5), 1.0);
}

4.掌握纹理

点击查看代码

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{vec2 uv = fragCoord / iResolution.xy;fragColor = texture(iChannel0, uv);
}

5.for循环卷积 uv 拿到当前像素位置。 texel 告诉你往左右上下移动一个像素要加多少 uv。 texture() 根据 uv 从图片读取颜色。 for 循环读取 3×3 的像素颜色并平均 → 模糊。

点击查看代码

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{vec2 uv = fragCoord / iResolution.xy;vec2 texel = 1.0 / iResolution.xy;vec3 sum = vec3(0.0);for(int i=-1; i<=1; i++){for(int j=-1; j<=1; j++){sum += texture(iChannel0, uv + vec2(i,j) * texel).rgb;}}fragColor = vec4(sum / 9.0, 1.0);
}

6.时间控制

点击查看代码

void mainImage(out vec4 fragColor,in vec2 fragCoord){float t = iTime;vec3 col = vec3(0.5 + 0.5 * sin(t));fragColor=vec4(col,1.0);
}