基础渐变效果

示例代码用 uv.y 控制蓝色通道，让颜色从底部到顶部渐变，核心就是这一行：

下面拆解它是怎么工作的。

---

uv 坐标是什么

uv 是画布上的归一化坐标，每个分量的范围都是 0.0 到 1.0：

• uv.x：从左（0%）到右（100%）
• uv.y：从下（0%）到上（100%）

每个像素都有自己的 uv 值。左下角是 (0.0, 0.0)，右上角是 (1.0, 1.0)。

---

颜色随位置变化

把 uv.y 放进颜色通道，这个通道的值就会随像素位置变化：

红色和绿色通道固定在 1.0，蓝色通道随高度从 0 到 1 变化，所以画面从黄色渐变到白色。

---

试着改一改

改动	效果
把 uv.y 换成 uv.x	渐变方向变成从左到右
把红色 1. 换成 uv.x	红色横向渐变，和蓝色纵向渐变叠加
把绿色 1. 换成 0.	底部变黑，顶部变蓝
把 uv.y 换成 1.0 - uv.y	渐变方向翻转，顶部黄色，底部白色

---

练习

把练习区固定的黄色 vec4(1.0, 1.0, 0.0, 1.0) 改成从下到上的渐变，让蓝色通道随 uv.y 变化。

答案解析

起始代码是 vec4(1.0, 1.0, 0.0, 1.0)，蓝色通道固定为 0.0（0%），所以整张画面都是黄色。

把第三个参数从 0.0 改为 uv.y，蓝色通道就不再固定，而是跟随每个像素的纵向位置：底部 uv.y=0.0 蓝色为 0%，顶部 uv.y=1.0 蓝色为 100%。红绿两通道始终是 100%，所以底部是黄色（红+绿），顶部蓝色加满变成白色（红+绿+蓝）。

试着把红色通道也换成 uv.x，看看两个方向的渐变叠加会产生什么效果。