水平条纹
6 / 15
使用 fract() 与 step() 创建水平条纹。
两行代码就能把整个画面切成均匀的水平条纹：
下面拆解每一步。
fract 怎么制造重复
vUv.y 从 0.0 到 1.0 覆盖整张画面（0% 是底部，100% 是顶部）。
vUv.y * count 把这个范围拉伸成 0 到 12。
fract() 只保留小数部分：1.3 变成 0.3，2.7 变成 0.7。于是整段 0–12 被分成 12 个 0–1 的循环。
结果：画面被均匀切成 12 段，每段内部的坐标都从 0.0 重新走到 1.0，就像把同一把尺子复印了 12 份。
step 怎么切出硬边
step(0.5, y) 的逻辑是：y 大于等于 50% 就返回 1.0，否则返回 0.0。
在每一段里，前半（0%–50%）得到 0.0，后半（50%–100%）得到 1.0。
这就是条纹的黑白遮罩，传给 mix() 之后就变成深色条和浅色条的交替。
试着改一改
| 改动 | 效果 |
|---|---|
把 count 从 12.0 改为 4.0 | 条纹变宽，只有 4 条 |
把 step(0.5, y) 改为 step(0.3, y) | 浅色条变宽，深色条变窄 |
把 vUv.y 换成 vUv.x | 条纹变成垂直方向 |
把 mix(...) 里的颜色换成暖色 | 橙/白条纹或任意配色 |
练习
把 float y = 0.0; 改成正确的表达式，让画面出现 12 条水平条纹。
答案解析
count 是 12.0，所以 vUv.y * 12.0 把 y 坐标范围扩展到 0–12。fract() 把这段范围每隔 1.0 折叠一次，得到 12 段重复的 0–1 波形。
初始代码 float y = 0.0 让所有像素的 y 都等于 0，step(0.5, 0.0) 永远返回 0，画面全是深色。改成 fract(vUv.y * count) 后，y 随高度变化，step 就能在每段里分出上下两半，形成条纹。
试着把 count 改成 20.0，看看条纹密度的变化。