塑形函数：在 0 到 1 之间掰弯一条线

为什么先练一维（「篱笆课」）

《着色器之书》把本章比作宫城先生的篱笆课：之前把归一化的 $x$、$y$ 映到红绿通道，本质是 $\mathbb{R}^2\to\mathbb{R}^4$。在继续升维变换前，必须先精通 一维函数——在 $[0,1]$ 区间里塑造一条线。

典型练习结构（「篱笆」）：

• 用亮度显示 st.x（黑到白的梯度）；
• 再在上方用绿线画出 $y=f(x)$（plot 用双 smoothstep 做竖切凸起）。

vec3(v) 会把三个颜色通道都设为 $v$；vec4(vec3, a) 用三维颜色加 alpha。一维上 $x$ 与 $y$（或亮度）的一一对应就是线性插值；从此用数学函数把线掰弯。

幂、指数与其它原生函数

例如把 $x$ 升到 5 次方得到曲线。换指数（20、2、1、0、0.2、0.02）能体会「值—指数」关系——书中称为对数据流的「针灸式」控制。

pow 是 GLSL 原生且常硬件加速；还可换 exp、log、sqrt。与 $\pi$ 组合时常更有趣（可用宏 #define PI 3.14159265359）。

step 与 smoothstep

二者是 GLSL 特有的硬件加速插值：

• step(edge, x)：小于阈值返回 0.0，否则 1.0——硬开关。
• smoothstep(edge0, edge1, x)：在 [edge0, edge1] 上对 $x$ 做平滑插值（Hermite）。

画线的 plot 把两个 smoothstep 相减，在某一 $y$ 处形成凸起：
smoothstep(0.2,0.5,st.x) - smoothstep(0.5,0.8,st.x) 看起来像竖直切片上的亮带。

正弦、余弦与组合拳

给定弧度角，单位圆上 $x=\cos$、$y=\sin$，返回值在 $[-1,1]$ 且光滑，极适合动画与塑形。练习包括：

• 在 sin 前给 $x$ 加 u_time（波形沿 $x$ 运动）；
• 乘 $\pi$ 使每 2 个整数一个周期；
• 用 u_time * x 压缩相位频率；
• sin(x)+1 抬到 $[0,2]$；sin(x)*2 加倍振幅；
• abs(sin(x)) 像弹跳轨迹；fract(sin(x)) 取小数；ceil+floor 得到 $\pm 1$ 数字波。

再与 mod、clamp、min/max、sign 等组合，就是生成艺术里常见的一维「调料架」。

进阶资源（书中指向）

• Golan Levin：多项式 / 指数 / 圆与椭圆 / 贝塞尔等塑形函数文档，宜移植到 GLSL。
• Íñigo Quilez：常用函数文集；移植时注意浮点小数点与 C 名差异（如 pow 而非 powf）。
• Kynd 的方程表：练习在 $[0,1]$ 内组合函数性质。
• 工具箱：LYGIA 的 math 分区；Quilez 的 GraphToy。

在游戏开发中的意义

• UI 与镜头：缓动 (easing) 本质是塑形函数（Robert Penner 族可作参考，但自制过渡往往更好）。
• 材质与 VFX：边缘柔化、光带、呼吸动画几乎都是 smoothstep/sin 组合。
• 性能：优先用原生硬件函数，避免在片元里写昂贵级数除非必要。

原书问题

• ch.05「Advance shaping functions」将 Íñigo Quilez 写作「Iñigo Quiles」（缺 z、重音不一致）；正文链接指向 iquilezles.org，本页按正确拼写引用。