分享 Shadertoy：探索 GPU 着色器编程的无限可能

什么是 Shadertoy？

Shadertoy 是一个基于 WebGL 的在线着色器编程平台，允许开发者使用 GLSL 直接在浏览器中编写和运行 GPU 着色器。它由 Inigo Quilez 创建，广泛用于学习、实验和分享实时渲染技术。

Shadertoy 适用于：

实时渲染：动画、特效、视觉艺术。
计算着色器：图像处理、光线追踪、模拟等。
着色器学习：练习 GLSL 语法，理解 GPU 并行计算。

Shadertoy 着色器结构

在 Shadertoy 中，典型的片段着色器（Fragment Shader）代码如下：

void mainImage( out vec4 fragColor, in vec2 fragCoord ) {
    vec2 uv = fragCoord / iResolution.xy;
    fragColor = vec4(uv, 0.5 + 0.5 * sin(iGlobalTime), 1.0);
}

关键变量解析：

iResolution：画布的分辨率（像素）。
iGlobalTime：从着色器启动以来的时间（秒）。
fragCoord：当前像素的坐标。
fragColor：最终输出颜色。

经典 Shadertoy 示例

1. 颜色渐变

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

这个着色器根据屏幕坐标生成颜色渐变，从左下角到右上角过渡。

2. 动态水波效果

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

此代码生成基于正弦波的水波效果，随着时间变化而动态流动。

如何使用 Shadertoy？

访问网站：Shadertoy 官网
注册账户，登录后可创建、编辑和保存着色器。
探索社区，浏览其他开发者的 Shader 作品，学习高级技巧。
编写代码，在 mainImage 函数中实现你的着色器。
分享作品，提交你的 Shader，并与社区互动。

进阶技巧

1. 使用纹理（Texture）

Shadertoy 提供了 iChannel0 ~ iChannel3 纹理输入，可用于加载图片或帧缓冲。

vec4 texColor = texture(iChannel0, uv);

2. 添加交互（鼠标控制）

vec2 mouse = iMouse.xy / iResolution.xy;

iMouse 存储鼠标位置，可用于创建交互动画。

3. 光线追踪（Ray Marching）

float distanceEstimator(vec3 p) {
    return length(p) - 1.0;
}

光线步进（Ray Marching）技术可用于渲染 3D 体积场景，如地形、雾效、体积光等。

结语

Shadertoy 是一个强大的 WebGL 着色器实验平台，适合学习 GPU 编程、创作视觉艺术和研究渲染算法。如果你对 GLSL 着色器编程感兴趣，不妨尝试在 Shadertoy 上编写自己的 Shader，并分享给社区！

你最喜欢的 Shadertoy 作品是什么？欢迎在评论区交流！