噪声动画
2 / 15
学习程序化噪声的基础构件与常见风格化手法。
让噪声动起来只需要在坐标里加上时间偏移，核心就是：
下面拆解它。
为什么加时间就能动
valueNoise 的输入是一个二维坐标。每一帧 u_time 都会增大，把它加到坐标上，相当于把采样点在噪声空间里向前推进——画面上的图案就会流动。
0.2 是流速。速度越大，噪声流动越快；速度越小，几乎感觉不到移动。
如果改成 vec2(u_time * 0.2, 0.0) 只沿 X 轴偏移，图案就是水平流动的。
偏移 vs 滚动
加法偏移 + u_time * 0.2 让噪声像在一张无限大的纸上滑动——旧图案不会消失，只是移出画面，新图案从另一边进入。
如果你直接改变传入坐标的缩放系数，那是改变频率，不会产生动画效果。动画靠的是坐标的平移，不是缩放。
试着改一改
| 改动 | 效果 |
|---|---|
0.2 改成 1.0 | 流速变快，有急流感 |
0.2 改成 0.02 | 流速极慢，像漂浮的薄雾 |
u_time * 0.2 改成 vec2(u_time * 0.2, u_time * 0.1) | 斜向流动 |
valueNoise 换成 fbm（已有函数） | 流动的分形噪声，效果更丰富 |
练习
修改 main 函数，在 valueNoise 的坐标参数里加上 u_time * 0.2，让噪声动起来。
答案解析
把 valueNoise(vUv * 8.0) 改成 valueNoise(vUv * 8.0 + u_time * 0.2)，在坐标上加时间偏移。
vUv * 8.0：噪声频率，不变+ u_time * 0.2：每帧把采样点向 (1,1) 方向推进一小步，产生流动感0.2：速度系数，决定流动快慢
初始代码 valueNoise(vUv * 8.0) 是静止的。加上时间偏移之后，采样坐标每帧都在变，噪声图案随之流动。
试着把流动方向改成只沿 X 轴：valueNoise(vUv * 8.0 + vec2(u_time * 0.2, 0.0))，看看图案变成水平流动。