中心径向渐变
12 / 15
以画布中心为起点，通过 distance() 创建向外扩散的径向渐变。
从中心往外渐变，关键是先算出像素到中心的距离：
下面拆解原理。
distance 怎么量测距离
vec2(0.5) 是画面正中心（UV 坐标的 (50%, 50%)）。
distance(vUv, vec2(0.5)) 计算当前像素和中心点之间的直线距离：
- 中心像素 → 距离 = 0.0
- 画面边缘 → 距离约为 0.5（水平或垂直方向）
- 画面角落 → 距离约为 0.7
距离越大，像素离中心越远。
mix 怎么把距离变成颜色
mix(innerColor, outerColor, dist * 1.5) 用距离作为混合因子：
- 中心（dist ≈ 0）→ 100% 是
innerColor（蓝白色） - 边缘（dist ≈ 0.5，乘以 1.5 后约为 0.75）→ 靠近
outerColor（黑色）
dist * 1.5 是一个缩放因子，让渐变过渡更快、边缘变得更暗。把 1.5 改小，光晕会更大更柔和；改大，光晕收缩变小。
试着改一改
| 改动 | 效果 |
|---|---|
把 1.5 改为 3.0 | 渐变更快，光晕更小 |
把 1.5 改为 0.8 | 渐变更慢，光晕扩散到边缘 |
把 vec2(0.5) 改为 vec2(0.2, 0.8) | 光晕中心移到左上角 |
把 outerColor 改为 vec3(0.5, 0.0, 0.8) | 外圈变成紫色 |
练习
从空白状态写出完整的着色器，实现中心蓝白色向外渐变到黑色的效果。
答案解析
distance(vUv, vec2(0.5)) 计算每个像素到中心点的欧氏距离。innerColor 是偏蓝白的亮色，outerColor 是黑色（vec3(0.0) 等于 vec3(0.0, 0.0, 0.0)）。mix 以 dist * 1.5 为权重，距离越大越偏向 outerColor。
初始代码什么都没有，关键步骤是先用 distance 建立一个从中心向外增大的数值场，再把它传给 mix 做颜色过渡。
试着把 distance(vUv, vec2(0.5)) 改为 length(vUv - vec2(0.5))，两者是等价的写法。