对角线渐变
17 / 30
📝 练习目标
使用 vUv.x 和 vUv.y 组合出对角线方向的渐变,并用 mix 完成颜色插值。
💡 💡 教程内容
使用 vUv.x 和 vUv.y 组合出对角线方向的渐变,并用 mix 完成颜色插值。
概览
- 使用 UV 作为因子实现水平渐变。
学习目标
- 理解如何用 UV 坐标构造渐变因子。
- 掌握 clamp 限制数值范围。
- 使用 mix 在两种颜色之间插值。
前置知识
- uv-visualizer
- color-mixing
关键概念
- 水平渐变使用 0-1 因子(通常来自 UV)来混合颜色。
float t = vUv.x;
vec3 color = vec3(t);
- 把因子限制在
[0,1]。
t = clamp(t, 0.0, 1.0);
如何实现(步骤)
- 构造对角线渐变因子 t(提示: (vUv.x + vUv.y) * 0.5)
- 使用 clamp 将 t 限制在 0.0 - 1.0
- 使用 mix(colorA, colorB, t) 得到 color
自检
- 是否能无错误编译?
- 输出是否符合目标?
- 关键数值是否在
[0,1]?
常见坑
- 必要时把
t用 clamp 限制到[0,1]。