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

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

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

  1. 下载安装 VSCode code.visualstudio.com/download；
  2. 安装 ShaderToy 插件；
    OpenGL & Metal Shader 编程：ShaderToy 内置全局变量
  3. 新建以 .frag 为后缀名的文件，复制粘贴本文的代码；
  4. 当时代码，点击鼠标右键，挑选 ShaderToy:Show GLSL Preview , 然后就能够愉快地调试特效了。

ShaderToy 常用的内置全局变量

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

在 ShaderToy 中，有一些内置的全局变量能够在着色器代码中运用。这些变量包括：

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

这些内置全局变量能够在 ShaderToy 的着色器代码中运用，以控制着色器的行为和作用。

你能够运用它们来创立根据时刻的动画、呼应屏幕分辨率的作用等等。请注意，纹路通道（iChannel0到iChannel3）需要经过输入纹路数据进行初始化。

一些内置全局变量的用法

iTime 当时时刻（以秒为单位），从着色器加载后开端计时。

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

运用 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 函数对纹路进行采样。

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

这儿我们直接给一个图片的链接。

#iChannel0 "https://www.6hu.cc/wp-content/uploads/2023/06/1687852869-05876c51b2200bd.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 结合运用制造一个简略的”手电筒”特效。

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

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

#iChannel0 "https://www.6hu.cc/wp-content/uploads/2023/06/1687852869-05876c51b2200bd.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);
}

后续组织

后边 OpenGL & Metal Shader 编程系列文章大致组织：

  1. ShaderToy 内置全局变量
  2. 重要的内置函数
  3. 根本图形
  4. 距离场
  5. 噪声函数
  6. 根底特效…
  7. 转场特效…
  8. 高阶特效…

联系交流

添加作者微信：Byte-Flow ，进技术交流群评论。