滚动条纹
5 / 14
在 fract() 前加时间，让条纹滚动。
画面里十二条竖条纹在不停地向右移动。让它们动起来只需要在 fract 里加入时间：
下面拆解每个部分。
如何生成条纹
vUv.x * count 把 0.0–1.0 的横坐标放大 12 倍，变成 0.0–12.0。
fract(...) 取小数部分，把这段范围折叠成 12 个 0.0–1.0 的重复区间，每个区间对应一条条纹。
step(0.5, x) 把每个区间劈成两半：
x < 0.5→ 输出 0.0（深色）x >= 0.5→ 输出 1.0（浅色）
这样就有了 12 条交替深浅的竖条纹。
加入 u_time 让条纹滚动
vUv.x * count + u_time * 0.6 随时间增大。fract 每次折叠后，条纹的起点相对于画面左移，视觉上条纹向右滚动。
0.6 控制速度。
step 和 smoothstep 的区别
step(0.5, x) 产生硬边：条纹边缘是一刀切的锯齿状。
如果想要柔和的边缘，可以用 smoothstep(0.45, 0.55, x)，让边界渐变一点点。
试着改一改
| 改动 | 效果 |
|---|---|
count = 6.0 | 条纹变宽，只有 6 条 |
count = 24.0 | 条纹变细，有 24 条 |
u_time * 1.5 | 滚动速度加快 |
-u_time * 0.6 | 条纹向左滚动 |
练习
练习区的条纹是静止的，在 fract 里加入 u_time * 0.6 让条纹向右滚动。
答案解析
vUv.x * count把横坐标分成 12 段fract(...)让每段循环在 0.0–1.0 之间+ u_time * 0.6让整体随时间偏移，条纹开始滚动
起始代码是 fract(vUv.x * count)，没有时间项，条纹静止。加入 u_time * 0.6 后，每帧的折叠起点都在向右推，条纹就动了。
试着把 step(0.5, x) 改成 smoothstep(0.45, 0.55, x)，条纹边缘会变得略微柔和。