同心圆环
3 / 15
练习基于 UV 构建重复图案。
用 fract 把到中心的距离变成重复的圆环：
下面拆解原理。
先算距离
vUv - 0.5 把坐标原点从左下角移到画面中心。
length(p) 计算每个像素到中心的距离：中心为 0，边缘约 0.5–0.7。
这是一个以中心为起点、向外均匀增大的数值场。
fract 把距离变成圆环
d * 12.0 把 0–0.7 的距离范围扩展成 0–8.4。
fract() 把这段范围折叠成多段 0–1 的锯齿波，每一段对应一个圆环。
折叠次数越多（d 越大，离中心越远），圆环越密。
step 切出硬边
step(0.5, rings) 把每个环分成内半（0–0.5，返回 0）和外半（0.5–1.0，返回 1），形成双色交替的同心圆环。
试着改一改
| 改动 | 效果 |
|---|---|
把 12.0 改为 6.0 | 圆环变宽，数量减少 |
把 12.0 改为 24.0 | 圆环变细，数量增多 |
把 step(0.5, rings) 改为 step(0.3, rings) | 深色环变窄，浅色环变宽 |
把 vUv - 0.5 改为 vUv - vec2(0.2, 0.7) | 圆环中心移到左上角 |
练习
把 float rings = 0.0; 改成正确的表达式，让画面出现以中心为圆心的同心圆环。
答案解析
d 是像素到中心的距离，d * 12.0 把距离范围放大 12 倍，fract() 把它折叠成重复的 0–1 波形，每折叠一次就产生一个圆环。
初始代码 rings = 0.0 让所有像素的 rings 恒为 0，step(0.5, 0.0) 恒为 0，画面全是深色。改成 fract(d * 12.0) 后，rings 随距离变化形成锯齿波，step 在每个周期内切出一对深/浅的圆环。
试着把 fract(d * 12.0) 改为 fract(d * d * 50.0)，圆环间距会随距离变化，产生向外收缩的效果。