柔边渐隐
8 / 18
使用 smoothstep() 实现图形边缘的渐隐过渡，对比 step()。
核心是用 smoothstep 把到中心的距离变成一个从亮到暗的遮罩：
下面拆解它。
distance 函数
distance(a, b) 计算两点之间的直线距离，等同于 length(a - b)。
distance(vUv, vec2(0.5)) 算出当前像素到画面中心的距离：
- 中心像素：distance = 0
- 角落像素：distance ≈ 0.707
smoothstep 做软边
smoothstep(0.3, 0.5, dist) 把距离映射成遮罩值：
- dist < 0.3（中心区域）→ 遮罩 = 0（100% 显示前景色）
- dist 在 0.3 到 0.5 之间 → 遮罩从 0 平滑过渡到 1
- dist > 0.5（外围）→ 遮罩 = 1（100% 显示背景色黑色）
这两个参数 0.3 和 0.5 就是柔化过渡带的内边缘和外边缘。
mix 混色
mix(colorA, colorB, t) 按照 t 的比例在两个颜色之间混合：
- t = 0 → 100% 取 colorA（黄色中心）
- t = 1 → 100% 取 colorB（黑色外围）
- t = 0.5 → 各取一半
这里 colorA 是 vec3(1.0, 0.8, 0.2)（暖黄色），colorB 是 vec3(0.0)（黑色），遮罩 mask 就是 t。
试着改一改
| 改动 | 效果 |
|---|---|
把 0.3 改成 0.1 | 柔化过渡带移向中心，亮区更小 |
把 0.5 改成 0.35 | 过渡带变窄，边缘更锐利 |
把 vec3(0.0) 改成 vec3(0.1, 0.0, 0.2) | 外围变成深紫色背景 |
把两个参数对调变成 smoothstep(0.5, 0.3, dist) | 遮罩翻转，中心变暗 |
练习
计算到中心的距离 dist，用 smoothstep(0.3, 0.5, dist) 生成遮罩，再用 mix 混合黄色和黑色输出。
答案解析
distance(vUv, vec2(0.5)) 算出每个像素到中心的距离。smoothstep(0.3, 0.5, dist) 在半径 0.3 到 0.5 之间制造柔和过渡，内部为 0（透明遮罩），外部为 1（不透明遮罩）。mix 把遮罩作为 t 值混合黄色和黑色，中心显示黄色、边缘渐渐变黑。
练习起始状态是空的 main()，无任何输出。按上述步骤补全后就能看到带柔边的圆形光晕。
试着把 vec3(1.0, 0.8, 0.2) 换成 vec3(0.3, 0.8, 1.0)（青蓝色），看看颜色变化。