颜色混合渐变
10 / 15
通过 mix() 函数在红蓝两色之间实现水平渐变，帮助理解线性插值。
用 vUv.x 作为 mix 的混合因子，让红色从左到右平滑过渡到蓝色：
下面拆解原理。
mix 函数的三个参数
mix(A, B, t) 在颜色 A 和颜色 B 之间做线性插值：
t = 0.0→ 100% 是 At = 0.5→ A 和 B 各 50%t = 1.0→ 100% 是 B
t 越大越偏向 B，t 越小越偏向 A，中间的值产生平滑过渡。
vUv.x 作为混合因子
vUv.x 从画面左边的 0.0 到右边的 1.0。
用它作为 mix 的第三个参数：
- 最左侧像素：t = 0 → 纯红色
(1.0, 0.0, 0.0) - 最右侧像素：t = 1 → 纯蓝色
(0.0, 0.0, 1.0) - 画面中间：t = 0.5 → 红蓝各半，变成紫色
试着改一改
| 改动 | 效果 |
|---|---|
把 colorA 改为 vec3(1.0, 1.0, 0.0) | 从黄色过渡到蓝色 |
把 vUv.x 换成 vUv.y | 改为垂直渐变（底红色到顶蓝色） |
把 vUv.x 换成 vUv.x * vUv.x | 渐变加速，蓝色在右侧快速出现 |
把 vUv.x 换成 1.0 - vUv.x | 渐变方向反转，左边变蓝右边变红 |
练习
从空白状态写出完整的着色器，实现从左边红色到右边蓝色的水平渐变。
答案解析
colorA 是纯红色（红 100%，绿 0%，蓝 0%），colorB 是纯蓝色（红 0%，绿 0%，蓝 100%）。mix 以 vUv.x 为权重，在最左侧取 100% 的 colorA，最右侧取 100% 的 colorB，中间线性混合。
初始代码什么都没有。关键步骤是定义两个端点颜色，再用 mix + 坐标分量把它们连起来。
试着在 mix 的第三个参数处用 smoothstep(0.3, 0.7, vUv.x) 替换 vUv.x，渐变会集中在画面中间的 30%–70% 区域，两端维持纯色。