旋转 UV
11 / 14
让 UV 围绕中心随时间旋转。
画面里的颜色图案在不停地旋转，像一个转动的风车。实现它用了一个旋转矩阵：
下面拆解每个部分。
围绕中心旋转的技巧
直接旋转 vUv 会绕左下角旋转，画面会跑偏。
正确的方式是：
p = vUv - 0.5：把坐标原点从左下角移到画面中心p = rot(u_time) * p：绕中心旋转uv = p + 0.5：把原点移回去
这样旋转就围绕画面中心进行。
旋转矩阵是什么
旋转矩阵是一个 2x2 的数学工具，把一个二维坐标旋转角度 a：
把矩阵乘以坐标向量，就得到旋转后的新坐标。u_time 作为角度传入，随时间增大，旋转就持续进行。
旋转后的颜色从哪来
把旋转后的 uv.x 和 uv.y 直接用作红色和绿色通道。坐标本身就是颜色，旋转坐标就等于旋转颜色图案。
试着改一改
| 改动 | 效果 |
|---|---|
rot(u_time * 2.0) | 旋转速度加倍 |
rot(-u_time) | 反向旋转 |
rot(u_time * 0.2) | 非常缓慢的旋转 |
vec3(uv.x, uv.y, sin(u_time) * 0.5 + 0.5) | 蓝色通道随时间闪烁 |
练习
练习区的颜色图案是静止的，在 p = rot(u_time) * p 这行代码的 TODO 处加上旋转，让图案随时间转动起来。
答案解析
rot(u_time)生成一个角度为u_time的旋转矩阵rot(u_time) * p把坐标p旋转该角度- 随着
u_time增大，旋转角度持续增大，图案持续旋转
起始代码缺少 p = rot(u_time) * p 这一行，坐标 p 从未被旋转。加上这行后，每帧的坐标都被旋转了更多角度，图案就转起来了。
试着把 rot(u_time) 改成 rot(sin(u_time))，旋转角度会在正负方向来回摆动，图案会左右摇摆而不是持续转圈。