取模循环
3 / 18
练习着色器中常用的数学基础积木。
用 fract 把一段坐标无限重复：
下面拆解它。
fract 是什么
fract(x) 只返回小数部分，整数部分直接丢掉：
fract(0.3)= 0.3fract(1.7)= 0.7fract(2.9)= 0.9
效果就像一个锯齿波：从 0 涨到 1，一到 1 就立刻跳回 0，不断循环。
乘以倍数改变频率
vUv.x * 5.0 把原本 0–1 的坐标放大成 0–5。fract 把这段 0–5 切成 5 段，每段都是 0–1 的渐变，于是画面里出现 5 条重复的渐变带。
规律：乘以几就重复几次。
fract(vUv.x * 1.0)= 不重复，就是原来的渐变fract(vUv.x * 3.0)= 重复 3 次fract(vUv.x * 10.0)= 重复 10 次
试着改一改
| 改动 | 效果 |
|---|---|
把 5.0 改成 10.0 | 渐变带翻倍，变得更细密 |
把 vUv.x 改成 vUv.y | 改为垂直方向重复 |
在 fract 结果上加 step(0.5, t) | 渐变变成硬边条纹 |
把 t 改成 1.0 - fract(vUv.x * 5.0) | 渐变方向翻转 |
练习
用 fract(vUv.x * 5.0) 替换 t = vUv.x，让画面出现 5 条重复的渐变带。
答案解析
vUv.x * 5.0 把 0–1 的范围拉伸到 0–5。fract 取每个位置的小数部分，在 0–5 上每隔 1 单位就重置一次，产生 5 段各自从 0 到 1 的循环渐变。
练习起始是 float t = vUv.x，只有一段从左到右的普通渐变。把它换成 fract(vUv.x * 5.0) 就出现 5 条重复带。
试着把 5.0 换成 5.5，看看渐变带在边缘处截断的效果。