渐变网格
5 / 15
练习基于 UV 构建重复图案。
用一行代码把连续渐变变成格子状的阶梯渐变：
下面拆解原理。
floor 怎么把渐变"量化"
vUv * 6.0 把 0–1 的 UV 坐标扩展成 0–6，画面分成 6×6 的格子。
floor() 向下取整，把每个格子内所有连续的坐标值压缩成同一个整数：
- 坐标 0.1, 0.3, 0.5, 0.9 → 都变成 0
- 坐标 1.2, 1.7 → 都变成 1
- 以此类推
/ 6.0 把整数再缩回 0–1 范围（0→0.0, 1→0.167, 2→0.333…）。
结果：同一格子里所有像素的 cell 值完全相同，颜色统一，格与格之间有明显的跳跃。
vec3(cell, 0.0) 怎么上色
vec3(cell, 0.0) 把 cell.x 作为红色通道，cell.y 作为绿色通道，蓝色固定为 0：
- 左下格
(0, 0)→ 黑色 - 右下格
(5/6, 0)→ 红色 - 左上格
(0, 5/6)→ 绿色 - 右上格
(5/6, 5/6)→ 黄色（红+绿）
试着改一改
| 改动 | 效果 |
|---|---|
把 6.0 改为 3.0 | 格子变大，只有 3×3 |
把 6.0 改为 12.0 | 格子变小，变成 12×12 |
把 vec3(cell, 0.0) 改为 vec3(0.0, cell.x, cell.y) | 颜色通道换到绿色和蓝色 |
把 floor(...) 去掉，只保留 vUv * 6.0 / 6.0 | 格子消失，变回平滑渐变 |
练习
把 vec2 cell = vUv; 改成正确的表达式，让渐变呈现阶梯状的 6×6 网格效果。
答案解析
floor(vUv * 6.0) 把连续坐标离散成 0–5 的整数。/ 6.0 把它缩回 0–1 范围，让颜色幅度保持和原来一致。
初始代码 cell = vUv 直接把 UV 坐标当颜色，是平滑渐变，没有格子边界。加上 floor(...) / 6.0 之后，同一格子内所有像素共享同一个坐标值，阶梯感就出现了。
试着把 /6.0 改为 /3.0，看看颜色分布会发生什么变化。