移动渐变
4 / 14
通过随时间平移 vUv.x 让渐变动起来。
画面里从左到右的渐变在不停地向右滚动。让它动起来就靠这一行：
下面拆解每个部分。
fract 是什么
fract(x) 取一个数的小数部分，整数部分扔掉。比如：
fract(0.3)→ 0.3fract(1.7)→ 0.7fract(2.0)→ 0.0
它的效果是：无论输入值多大，输出永远在 0.0 到 1.0 之间，并且循环。就像时钟到 12 点重新从 0 开始。
加上 u_time 让渐变动起来
vUv.x 是像素的横坐标，范围 0.0 到 1.0（左到右）。
u_time * 0.2 随时间增长。把它加到 vUv.x 上，再取 fract，就相当于把整个渐变向右推移——当值超过 1.0 被 fract 截断后，右边的内容从左边重新出现，形成无缝滚动。
0.2 控制速度：数字越大，滚动越快。
渐变如何生成
mix(A, B, t) 在颜色 A 和颜色 B 之间线性插值：
t = 0.0→ 100% 是 A（深灰）t = 0.5→ 50% A + 50% B（中间色）t = 1.0→ 100% 是 B（近白色）
t 就是那个随时间滚动的值，所以渐变也跟着动。
试着改一改
| 改动 | 效果 |
|---|---|
u_time * 0.5 | 滚动速度变快 |
-u_time * 0.2 | 渐变向左滚动 |
vUv.y + u_time * 0.2 | 渐变从上往下滚动 |
vUv.x * 2.0 + u_time * 0.2 | 渐变重复两次，滚动更紧密 |
练习
练习区的渐变是静止的，把 float t = vUv.x 改成使用 fract 和 u_time，让渐变向右滚动起来。
答案解析
vUv.x是每个像素的横向位置+ u_time * 0.2随时间推移横向坐标fract(...)把超过 1.0 的部分折回到 0.0，实现无缝循环
起始代码里 t = vUv.x，渐变是静止的。加入 fract 和 u_time 后，每一帧的 t 值都在整体平移，渐变就开始滚动。
试着把 0.2 改成 1.0，速度会快很多，渐变会明显地扫过画面。