A 附录

内置函数速查表

点一个函数，左边画出它的样子。代码里的数字可以拖动或修改，看曲线怎样跟着变。

函数

塑形

重复与取整

周期

指数

向量

采样与导数

smoothstep 柔和开关：在两个边界之间 S 形过渡注意：第一个边界必须小于第二个

看到什么 → 用什么

每个像素运行一次拖动数字，或直接改代码

void main() {
  float x = mix(-0.5, 1.5, vUv.x);   // 横轴
  float y = smoothstep(0.2, 0.8, x);
  
  // 下面只负责画出 y 的曲线
  float gy = mix(-0.25, 1.25, vUv.y);
  float grid = min(abs(fract(x + 0.5) - 0.5) / fwidth(x), abs(fract(gy + 0.5) - 0.5) / fwidth(gy));
  float axes = min(abs(x) / fwidth(x), abs(gy) / fwidth(gy));
  float curve = abs(gy - y) / min(fwidth(gy - y), fwidth(gy) * 8.0);   // 跳变处不画竖线
  vec3 color = vec3(0.07, 0.10, 0.13);
  color = mix(color, vec3(0.17, 0.22, 0.25), 1.0 - smoothstep(0.0, 1.0, grid));
  color = mix(color, vec3(0.42, 0.47, 0.49), 1.0 - smoothstep(0.0, 1.5, axes));
  color = mix(color, vec3(0.96, 0.43, 0.30), 1.0 - smoothstep(1.0, 2.5, curve));
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  float x = mix(-0.5, 1.5, vUv.x);   // 横轴
  float y = smoothstep(0.2, 0.8, x);
  
  // 下面只负责画出 y 的曲线
  float gy = mix(-0.25, 1.25, vUv.y);
  float grid = min(abs(fract(x + 0.5) - 0.5) / fwidth(x), abs(fract(gy + 0.5) - 0.5) / fwidth(gy));
  float axes = min(abs(x) / fwidth(x), abs(gy) / fwidth(gy));
  float curve = abs(gy - y) / min(fwidth(gy - y), fwidth(gy) * 8.0);   // 跳变处不画竖线
  vec3 color = vec3(0.07, 0.10, 0.13);
  color = mix(color, vec3(0.17, 0.22, 0.25), 1.0 - smoothstep(0.0, 1.0, grid));
  color = mix(color, vec3(0.42, 0.47, 0.49), 1.0 - smoothstep(0.0, 1.5, axes));
  color = mix(color, vec3(0.96, 0.43, 0.30), 1.0 - smoothstep(1.0, 2.5, curve));
  gl_FragColor = vec4(color, 1.0);
}

JS 这一侧

记函数先记形状：塑形、重复、周期、向量四组就覆盖了大部分 shader。真正要额外记的只有几个陷阱：mod 的负数、atan 的参数顺序、smoothstep 的边界顺序、pow 的负底数。

试一试

在 smoothstep 里把两个边界交换，曲线变成什么？
把 fract(x) 改成 fract(x * 3.0)，数一数锯齿
对比 mod 和 fract 在负数一侧的样子
打开像素调试，把指针放到曲线上，读出 x 和 y