Smoothstep 基础

核心是这两行——用 S 形曲线把一个距离值变成一个遮罩：

下面拆解它。

---

step 和 smoothstep 的区别

step(edge, x) 是硬切换：x 小于 edge 就返回 0，否则返回 1，边缘是一条锐利的线。

smoothstep(edge0, edge1, x) 是 S 形过渡：在 edge0 到 edge1 之间平滑地从 0 变到 1，边缘柔和自然。

类比：step 是电灯开关，一按瞬间亮灭；smoothstep 是调光器，从暗慢慢过渡到亮。

---

这段代码做了什么

abs(vUv.x - 0.5) 计算每个像素的 x 坐标到画面中线（0.5）的距离：

• 在中线处距离 = 0（最近）
• 在边缘处距离 = 0.5（最远）

smoothstep(0.0, 0.25, d) 把这个距离映射成 0–1：

• d = 0 → 输出 0（最亮）
• d = 0.25 → 输出 1（最暗）

最后 1.0 - … 翻转，让中间亮、两边暗，形成中间白色竖带的效果。

---

试着改一改

改动	效果
把 0.25 改成 0.1	白带变窄，边缘更硬
把 0.25 改成 0.5	白带铺满整个画面，中间最亮
把 vUv.x - 0.5 改成 vUv.y - 0.5	变成水平白带
去掉 1.0 -	中间变黑，两边变白

---

练习

计算 m = 1.0 - smoothstep(0.0, 0.25, d)，让画面出现中间白、两侧黑的竖带。

答案解析

abs(vUv.x - 0.5) 算出每个像素到中心的水平距离，范围是 0–0.5。smoothstep(0.0, 0.25, d) 把 0–0.25 的距离平滑映射成 0–1，超过 0.25 就维持在 1（全黑）。用 1.0 - 翻转后，中心最亮、边缘最暗。

练习起始状态 m = 0.0，画面全黑。替换成正确公式就能看到白色竖带。

试着把 smoothstep 的第一个参数从 0.0 改成 0.1，看看白带内侧边缘出现渐变过渡的变化。