波动扭曲

渐变的水平线被弯曲成波浪，而且这个波浪随时间向右传播。实现它只需要一行：

下面拆解每个部分。

---

修改 uv 坐标来扭曲画面

正常情况下 uv.y 就是像素的纵坐标，从 0.0（底部）到 1.0（顶部）。

给 uv.y 加一个偏移量，相当于把每一列像素往上或往下推。不同列的推移量不同，整体效果就是扭曲变形。

---

sin(uv.x * 10.0 + u_time) 做了什么

• uv.x * 10.0：让波浪在横向上重复 10 次（频率）
• + u_time：让这个正弦波随时间向左移动（相位推进）
• * 0.04：振幅，控制波浪有多高，0.04 意味着最大偏移是画面高度的 4%

频率越高，波纹越密；振幅越大，弯曲越明显；u_time 让它持续流动。

---

扭曲后如何生成渐变

渐变是基于 uv.y 从深色到浅色。因为 uv.y 已经被波浪扭曲过，渐变的分界线也就随之弯曲，看起来就像水面的波纹。

---

试着改一改

改动	效果
uv.x * 5.0	波浪变长，弯曲更舒展
uv.x * 20.0	波浪变密，像细小涟漪
* 0.1	振幅变大，扭曲幅度更明显
uv.x += sin(uv.y * 8.0 + u_time) * 0.04	横向扭曲，效果完全不同

---

练习

练习区的渐变是平直的，加入 uv.y += sin(uv.x * 10.0 + u_time) * 0.04 让它弯曲成流动的波浪。

答案解析

• sin(uv.x * 10.0 + u_time) 根据横坐标和时间计算出当前列的偏移量
• * 0.04 把偏移量缩小到合适范围
• uv.y += 把这个偏移加到纵坐标上，产生扭曲

起始代码里 uv 没有被修改，渐变是水平直线。加入这一行后，每一列的纵坐标被轻轻推高或压低，渐变边界变弯，波浪出现。

试着把 10.0 改成 3.0，波浪会变成大幅度、舒缓的起伏。