Shadertoy 入门

Shadertoy 是一个在线的 GLSL (OpenGL Shading Language) 着色器编辑器和分享平台。它让你可以直接在浏览器中编写、运行和分享片段着色器。链接直接 www.shadertoy.com/view/MddGWN

入口函数

每个 Shadertoy 着色器都有一个入口函数：

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // 你的着色器代码
}

• fragCoord: 当前像素坐标。原点(0,0) 在左下角。x 从 0 到 iResolution.x。y 从 0 到 iResolution.y
• fragColor: 输出颜色（RGBA）

内置变量

基础渲染参数:

uniform vec3 iResolution // 视口分辨率,以像素为单位 (窗口宽度, 窗口高度, 1.)

当前帧

uniform float iTimeDelta   // 每帧渲染时间(以秒为单位)
uniform float iFrameRate   // 当前帧率
uniform int iFrame        // 当前帧数

鼠标输入:

uniform vec4 iMouse       // 鼠标坐标
// xy: 当前鼠标位置(按下左键时)
// zw: 最后一次鼠标点击位置

输入通道相关:

uniform float iChannelTime[4]       // 每个输入通道的播放时间
uniform vec3 iChannelResolution[4]  // 每个输入通道的分辨率
uniform samplerXX iChannel0..3      // 输入通道纹理

日期时间:

uniform vec4 iDate  // 日期时间信息(年，月，日，当前描述)
uniform float iTime // shader运行的时间(以秒为单位)

基础例子

1. 绘制纯色背景

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    fragColor = vec4(1.0, 0.0, 0.0, 1.0); // 红色
}

2. 使用 UV 坐标

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // 归一化坐标
    vec2 uv = fragCoord/iResolution.xy;

    // 使用uv坐标作为颜色
    fragColor = vec4(uv.x, uv.y, 0.0, 1.0);
}

3. 画圆形

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord/iResolution.xy;
    const vec2 center = vec2(0.5);
    float d = distance(uv, center);

    if(d < 0.3) {
        fragColor = vec4(1.0); // 白色圆
    } else {
        fragColor = vec4(0.0, 0.0, 0.0, 1.0); // 黑色背景
    }
}

4. 画网格

if(mod(uv.x, 0.1) < 0.001 || mod(uv.y, 0.1) < 0.001) {
    fragColor = vec4(1.0);
}

5. 颜色混合

vec3 color1 = vec3(1.0, 0.0, 0.0); // 红色
vec3 color2 = vec3(0.0, 0.0, 1.0); // 蓝色
float t = (sin(iTime) + 1.0) * 0.5; // 0到1的变化
vec3 finalColor = mix(color1, color2, t);