波点

把画面分成 8×8 网格，在每个格子中心画一个圆点，关键是这两行：

下面拆解原理。

---

fract 分格，减 0.5 居中

vUv * count 把 UV 坐标拉伸 8 倍，fract() 把 0–8 折叠成 8 个 0–1 的局部坐标。

- 0.5 把每个格子的原点从左下角移到中心：局部坐标从原来的 (0, 0)–(1, 1) 变成 (-0.5, -0.5)–(0.5, 0.5)。

这样格子中心就是 (0, 0)，在这里画圆最自然。

---

length 和 smoothstep 画圆

length(gv) 是当前像素到格子中心的距离：中心为 0，边缘约为 0.5 到 0.7。

smoothstep(0.18, 0.19, d) 在距离 18%–19% 之间从 0 过渡到 1：距离小于 0.18 的像素返回 0（圆内），大于 0.19 的返回 1（圆外）。

1.0 - smoothstep(...) 把它反转：圆内为 1（前景色），圆外为 0（背景色）。

mix(bg, fg, dot) 用这个 0/1 遮罩在背景色和圆点颜色之间切换。

---

试着改一改

改动	效果
把 count 从 8.0 改为 4.0	圆点变大变少
把 0.18 改为 0.3	圆点变大，接近填满格子
把 0.18 改为 0.05	圆点变成小点
把 smoothstep(0.18, 0.19, ...) 改为 step(0.2, ...)	圆边变硬，完全没有羽化

---

练习

把 vec2 gv = vec2(0.0); 和 float dot = 0.0; 改成正确的表达式，让画面出现 8×8 排列的圆点。

答案解析

fract(vUv * 8.0) 把坐标折叠成 8×8 的格子局部坐标。- 0.5 把每格的原点移到中心，这样 length(gv) 就是到格子中心的距离。smoothstep(0.18, 0.19, d) 在半径 0.18–0.19 处画出平滑圆边，1.0 - ... 把遮罩反转成"圆内为 1"。

初始代码 gv = vec2(0.0) 让所有像素的局部坐标为 0，length(gv) 恒为 0，dot 恒为 1，画面全是前景色，看不出圆点图案。

试着把 0.18, 0.19 改为 0.1, 0.4，看看圆边羽化范围的变化。