OpenGL & Metal Shader 编程：ShaderToy 内置全局变量

字节流动

发布于 2023-09-04 17:54:46

6990

发布于 2023-09-04 17:54:46

文章被收录于专栏：字节流动

前面发了一些关于 Shader 编程的文章，有读者反馈太碎片化了，希望这里能整理出来一个系列，方便系统的学习一下 Shader 编程。

由于主流的 Shader 编程网站，如 ShaderToy, gl-transitions 都是基于 GLSL 开发 Shader ，加上 MSL 和 GLSL 语法上差别不大，后面系列文章将以 GLSL 为主来介绍 Shader 编程。

后面 Shader 编程将使用 VSCode + ShaderToy 插件作为编程环境，步骤如下：

下载安装 VSCode https://code.visualstudio.com/download；
安装 ShaderToy 插件；

新建以 .frag 为后缀名的文件，复制粘贴本文的代码；
当前代码，点击鼠标右键，选择 ShaderToy:Show GLSL Preview , 然后就可以愉快地调试特效了。

ShaderToy 常用的内置全局变量

在 ShaderToy 中，有一些内置的全局变量可以在着色器代码中使用。

这些变量包括：

vec2 iResolution：屏幕分辨率（宽度和高度）的像素值，与视口尺寸相关。
float iTime：当前时间（以秒为单位），从着色器加载后开始计时，比较常用。
float iTimeDelta：自上一帧到当前帧的时间间隔（以秒为单位）。
int iFrame：当前帧的帧数，比较常用。
float iChannelTime[4]：各个纹理通道的时间（以秒为单位）。通道0对应sampler2D iChannel0，通道1对应sampler2D iChannel1，以此类推。
vec3 iChannelResolution[4]：各个纹理通道的分辨率（宽度、高度和深度）。通道0对应sampler2D iChannel0，通道1对应sampler2D iChannel1，以此类推。
samplerXX iChannel0、samplerXX iChannel1、samplerXX iChannel2、samplerXX iChannel3：纹理通道，其中XX表示纹理的类型（如sampler2D表示二维纹理）。
iMouse：用于获取鼠标的位置和状态信息。它是一个包含四个分量的vec4类型变量，分别表示鼠标的坐标（x 和 y 分量）以及左右键的按下状态（z 和 w 分量）。

这些内置全局变量可以在 ShaderToy 的着色器代码中使用，以控制着色器的行为和效果。

你可以使用它们来创建基于时间的动画、响应屏幕分辨率的效果等等。请注意，纹理通道（iChannel0到iChannel3）需要通过输入纹理数据进行初始化。

一些内置全局变量的用法

iTime

当前时间（以秒为单位），从着色器加载后开始计时。使用 iTime 变量实现一个移动的正弦曲线（plot 函数原理后面文章会讲，目前暂不展开）。

float plot(vec2 st, float pct) {
    return smoothstep(pct-0.01, pct, st.y) - smoothstep(pct, pct + 0.01, st.y);
}


void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    float y = sin((uv.x + iTime)*5.0) * 0.5 + 0.5;
    float val = plot(uv, y);

    vec4 color = vec4(val, 0.0, 0.0, 1.0);

    // Output to screen
    fragColor = color;
}

iChannelX

纹理通道，texture2D 函数对纹理进行采样，这里我们直接给一个图片的链接。

#iChannel0 "https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/2ddf8479959f1f3d9f52d0d561d281fe.jpg"

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // Normalized pixel coordinates (from 0 to 1)
    vec2 uv = fragCoord/iResolution.xy;

    fragColor = texture2D(iChannel0, uv);
}

iMouse

在 ShaderToy 中，iMouse是一个内置的全局变量，它提供了鼠标的当前位置信息。

iMouse是一个vec4类型的变量，包含了以下四个分量：

iMouse.x：鼠标当前位置的x坐标（以像素为单位）。 iMouse.y：鼠标当前位置的y坐标（以像素为单位）。 iMouse.z：鼠标按下的按钮（左键：1.0，右键：2.0，中键：3.0）。 iMouse.w：鼠标的点击状态（按下：1.0，释放：0.0）。

你可以在 ShaderToy 的片段着色器中使用 iMouse 来根据鼠标位置或点击状态进行交互操作。以下是一个简单的示例：

//使用鼠标位置来改变颜色
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    // 获取鼠标在屏幕上的归一化坐标
    vec2 mousePos = iMouse.xy / iResolution.xy;

    // 使用鼠标位置来改变颜色
    vec3 color = vec3(mousePos.x, mousePos.y, 0.5);

    // 将颜色输出到片元
    fragColor = vec4(color, 1.0);
}

//鼠标点击变换颜色 
void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 mousePos = iMouse.xy;
    float mouseClick = iMouse.w;

    // 在鼠标位置附近绘制一个圆形
    float dist = length(fragCoord - mousePos);
    float radius = 50.0;
    vec3 color = vec3(0.0);

    if (dist < radius)
    {
        // 如果鼠标按下，则绘制红色圆形
        if (mouseClick > 0.0)
            color = vec3(1.0, 0.0, 0.0);
        else
            color = vec3(0.0, 1.0, 0.0); // 否则绘制绿色圆形
    }

    fragColor = vec4(color, 1.0);
}

iMouse 和 iChannel0 结合使用制作一个简单的"手电筒"特效。

（length 为内置函数用于计算向量的长度或标量的绝对值，后面会细讲）。

#iChannel0 "https://img-baofun.zhhainiao.com/pcwallpaper_ugc_mobile/static/2ddf8479959f1f3d9f52d0d561d281fe.jpg"

void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
    vec2 uv = fragCoord / iResolution.xy;
    vec2 mousePos = iMouse.xy;
    float mouseClick = iMouse.w;

    // 在鼠标位置附近绘制一个圆形
    float dist = length(fragCoord - mousePos);
    float radius = iResolution.x / 2.0;
    vec3 color = vec3(0.0);

    if (dist < radius)
    {
        // 如果鼠标按下，则绘制黄色圆形
        if (mouseClick > 0.0)
            color = vec3(1.0, 1.0, 0.0);
        else
        // 否则绘制白色圆形
            color = vec3(1.0, 1.0, 1.0); 
    }

    //只显示圆形区域内的纹理
    fragColor = texture2D(iChannel0, uv) * vec4(color, 1.0);
}