渐变效果
14 / 15
学习创建多种渐变效果，包括线性渐变、径向渐变、角度渐变和动态混合
这个教程把四种渐变组合在一起，并用 u_time 让它们动态混合。核心结构是：
下面逐一拆解四种渐变的原理。
线性渐变：对角方向
把 x 和 y 坐标相加再除以 2，得到一个从左下（暗）到右上（亮）的对角渐变。
径向渐变：从中心向外
distance 计算像素到中心的距离，距离越大越暗。1.0 - dist * 2.0 把中心（距离 0）映射为最亮，边缘映射为最暗。
角度渐变：围绕中心旋转
atan 算出像素相对中心的角度，范围是 -π 到 +π。加上 π 再除以 2π，把它归一化到 0–1，然后映射为颜色。
波浪渐变：随时间振荡
sin 在 -1 到 1 之间振荡，* 0.5 + 0.5 把它移到 0–1 范围。u_time * 2.0 让波浪随时间向右滚动。
试着改一改
| 改动 | 效果 |
|---|---|
把 u_time * 2.0 改为 u_time * 5.0 | 波浪滚动更快 |
把 uv.x * 10.0 改为 uv.x * 3.0 | 波浪变宽 |
把 u_time * 0.5 改为 0.0 | 停止动态混合，定格在一个状态 |
把 smoothstep(0.0, 1.0, finalColor) 注释掉 | 对比度降低，颜色更柔和 |
练习
在练习区，给线性渐变的蓝色分量填入 (uv.x + uv.y) * 0.5，让对角渐变显示出蓝色调。
答案解析
uv.x 作为红色通道，从左到右由暗变亮。uv.y 作为绿色通道，从下到上由暗变亮。(uv.x + uv.y) * 0.5 作为蓝色通道，是两者的均值，在中心区域产生蓝色调。
练习代码 TODO 注释处已经有完整的变量框架，只需把蓝色分量从占位符改为 (uv.x + uv.y) * 0.5 即可。
试着把蓝色分量改为 sin(uv.x * 6.28) * 0.5 + 0.5，让蓝色在横向上产生周期性变化。