什么是 Shader

Shader 是一种在计算机图形学中使用的，运行在显卡上的程序，用于控制图形渲染的过程，负责计算画布上每个像素的颜色。通过接受输入进行工作，使用 GLSL 等进行着色。

它们可以被用于创建各种视觉效果，包括光照、纹理映射、阴影和其他图形效果。

编程人员可以只使用代码进行 2D 和 3D 渲染。Shader 艺术编码使用数学函数和算法来操纵函数，创造出瞠目的视觉效果。创造力是唯一的桎梏。

网站导航：shadertoy

基础的 shader 编程

每个 shader 都在 mainImage 函数中定义（主函数）。mainImage 有两个参数：out vec4 fragColor 和 in vec2 fragCoord，分别代表颜色和位置。

fragColor 是一个拥有四个向量的输出参数，四个参数分别代表三个颜色维度上的值，以及一个不透明度。

fragCoord 是一个拥有两个向量的输入参数，两个参数分别代表横纵坐标。

fragCoord 参数的范围取决于分辨率大小。比如，若在 1600 x 900 的画布上进行编程，则其横纵坐标的取值范围分别是 1600 和 900。可以通过等比缩放操作来免除这一点，使他们不依赖于当前画布分辨率。

对向量的运算，比如一个 vec2 类型的 uv 变量，可以使用 uv / 2.0 这样的操作来对 uv 的两个向量都执行除 2 操作。

1
2
3
4
5
6
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{   // iResolution 是一个全局常量，由三个分量组成的矢量，分别代表宽度、高度和深度（深度仅在渲染 3D 纹理时使用）
    vec2 uv = fragCoord / iResolution.xy * 2.0 - 1.0;   // 使坐标原点位于画布中心
    uv.x *= iResolution.x / iResolution.y;              // 避免图像拉伸

}

一些实用函数：

  • length：计算向量的长度。
  • step：阶跃函数。接受两个参数，一个阈值和一个值。当值小于阈值时，返回 0，否则返回 1。
  • smoothstep：平滑阶跃函数。和 step 不同的是它接受两个阈值。当值小于第一个阈值时，返回 0，当值大于第二个阈值时，返回 1。当值处于两个阈值之间时，平滑的返回 0 到 1 之间的值。

小孩子不懂事，随便学着玩的…