垂直颜色渐变
9 / 15
基于 vUv.y 实现从下至上的颜色渐变，适合练习 UV 坐标使用。
用 vUv.y 作为混合因子，让颜色从底部到顶部平滑过渡：
下面拆解每一步。
vUv.y 是什么
vUv.y 是当前像素的纵向位置，范围是 0.0 到 1.0：
- 画面最底部 →
vUv.y = 0.0（0%） - 画面最顶部 →
vUv.y = 1.0（100%） - 画面中间 →
vUv.y = 0.5（50%）
mix 怎么做颜色过渡
mix(A, B, t) 在颜色 A 和颜色 B 之间插值：
t = 0.0→ 完全是 At = 0.5→ A 和 B 各一半t = 1.0→ 完全是 B
把 vUv.y 当做 t，画面底部（t=0）显示 bottomColor，顶部（t=1）显示 topColor，中间是平滑过渡。
本教程的底部颜色是绿色 (0.0, 1.0, 0.0)，顶部是黄色 (1.0, 1.0, 0.0)，所以从下到上是绿色渐变到黄色。
试着改一改
| 改动 | 效果 |
|---|---|
把 bottomColor 改为 vec3(0.0, 0.0, 1.0) | 底部变蓝色 |
把 vUv.y 换成 vUv.x | 改为水平渐变（左右过渡） |
把 vUv.y 换成 1.0 - vUv.y | 渐变方向反转（顶变底） |
把 vUv.y 换成 vUv.y * vUv.y | 渐变加速，颜色在顶部突然出现 |
练习
从空白状态写出完整的着色器，实现从底部绿色到顶部黄色的垂直渐变。
答案解析
bottomColor 是纯绿色（红 0%，绿 100%，蓝 0%），topColor 是黄色（红 100%，绿 100%，蓝 0%）。mix 用 vUv.y 作为权重，在底部完全取 bottomColor，顶部完全取 topColor，中间根据高度线性混合。
初始代码没有任何输出，关键步骤是先定义两个颜色变量，再用 mix + vUv.y 连接它们。
试着把 vUv.y 换成 smoothstep(0.3, 0.7, vUv.y)，让渐变集中在画面中间发生，两端维持纯色。