棋盘格图案
13 / 15
结合 mod() 函数与 floor()，生成黑白相间的棋盘格纹理。
把画面分成 8×8 网格，再用一个公式判断每格该填黑还是白：
下面拆解原理。
floor 怎么把坐标变成格子编号
vUv.x 是 0–1 的横坐标，乘以 8 变成 0–8。floor() 向下取整，把连续坐标变成整数编号：
- 左边一列的坐标是 0.0–1.0 →
floor后等于 0 - 第二列的坐标是 1.0–2.0 →
floor后等于 1 - 以此类推……
y 同理，把纵向坐标离散成 0–7 的行编号。
mod 怎么决定黑白
把列号和行号加起来，对 2 取余：
- 偶数格（余数 = 0）→
pattern = 0.0→mix(白, 黑, 0.0)→ 白色 - 奇数格（余数 = 1）→
pattern = 1.0→mix(白, 黑, 1.0)→ 黑色
因为相邻格子的编号之和必然奇偶交替，所以颜色也自然交替，棋盘格就出来了。
试着改一改
| 改动 | 效果 |
|---|---|
把 8.0 改为 4.0 | 格子变大，4×4 棋盘 |
把 8.0 改为 16.0 | 格子变小，16×16 棋盘 |
把 mix(vec3(1.0), vec3(0.0), pattern) 换成彩色 | 红白、蓝黄等任意配色 |
只用 mod(x, 2.0) 而不加 y | 变成垂直条纹 |
练习
从空白状态写出完整的 8×8 棋盘格着色器，输出黑白交替的格子。
答案解析
floor(vUv.x * 8.0) 把横坐标离散成 0–7 的列号，floor(vUv.y * 8.0) 把纵坐标离散成 0–7 的行号。把两个编号相加后对 2 取余，相邻格子的余数必然不同，形成 0/1 交替的棋盘遮罩。mix(vec3(1.0), vec3(0.0), pattern) 把 0 映射到白色、1 映射到黑色。
初始代码没有任何变量，画面什么都不输出。关键是先用 floor 建立网格坐标，再用 mod 生成奇偶判断，最后 mix 决定颜色。
试着把 mix(vec3(1.0), vec3(0.0), pattern) 改成 mix(vec3(0.2, 0.4, 0.8), vec3(0.9, 0.3, 0.1), pattern)，用蓝色和橙色替代黑白。