图案重复
15 / 15
学习如何创建重复的几何图案，包括网格系统、随机变化和动画效果
这个教程把画面分成 8×8 网格，在每个格子里随机旋转后画出圆形、方形或十字，并根据格子位置交替选择图案类型：
下面拆解核心流程。
网格坐标：floor 和 fract 的分工
floor(grid) 给出整数格子编号（哪一行、哪一列）。
fract(grid) 给出格子内的局部坐标（0–1 范围，从格子左下角到右上角）。
这是图案重复的标准结构：用 floor 识别"我在第几格"，用 fract 在格子内部画图。
hash 给每格一个随机值
这是一个常见的哈希函数——把格子编号 (x, y) 变成一个 0–1 之间的伪随机数，同一格子每次得到的值相同，相邻格子的值差异很大。
这个随机值用于控制每个格子的旋转起始角度，让每格的旋转不同步。
mod 选择图案类型
把列号和行号相加对 3 取余，得到 0、1 或 2，用于在圆形、方形、十字之间循环选择。
试着改一改
| 改动 | 效果 |
|---|---|
把 gridSize 从 8.0 改为 4.0 | 格子变大，图案更清晰 |
把 rotation = u_time * 0.5 + ... 中的 0.5 改为 2.0 | 旋转加速 |
把 mod(..., 3.0) 改为 mod(..., 2.0) | 只交替圆形和方形，不出现十字 |
| 把三种颜色改为同一种颜色 | 图案类型不同，颜色统一 |
练习
在练习区，把 fract(uv * repeatCount) 作为重复坐标，在每个单元格内画出十字图案，并用圆形和十字之间的动态切换完成最终效果。
答案解析
fract(uv * 5.0) 把画面分成 5×5 的格子，- vec2(0.5) 把每格的坐标中心移到 0。
十字图案：step(-w, v) * step(v, w) 在 -w 到 +w 范围内返回 1，用水平和垂直两段取 max 就得到十字。
圆形：smoothstep(0.25, 0.2, dist) 在距离小于 0.2 时为 1，大于 0.25 时为 0，形成平滑圆边。
mix(cross, circle, switchTime) 用时间驱动的因子在两者之间切换，switchTime 随 sin(u_time * 0.5) 来回摆动。
试着把 repeatCount 改为 8.0，让格子更密。