10x10 棋盘格
2 / 15
练习基于 UV 构建重复图案。
棋盘格的核心就两行：
下面拆解每一步。
floor 怎么识别格子编号
vUv * 10.0 把 0–1 的坐标拉伸成 0–10，整张画面被划分成 10×10 的网格。
floor() 向下取整：坐标 3.7 变成 3，坐标 0.2 变成 0。
这样每个格子都得到一对整数编号，比如第 3 列第 7 行的格子编号就是 (3, 7)。
mod 怎么区分黑白
g.x + g.y 把列号和行号加在一起。
mod(..., 2.0) 对 2 取余：和为偶数（0, 2, 4…）得 0.0，和为奇数（1, 3, 5…）得 1.0。
这就形成了棋盘格的交替规律：左下角 (0,0) 是 0，向右或向上移动一格，余数就在 0 和 1 之间来回切换。
mix(深色, 浅色, m) 根据 0/1 输出对应颜色，棋盘格就出来了。
试着改一改
| 改动 | 效果 |
|---|---|
把 10.0 改为 4.0 | 格子变大，变成 4×4 棋盘 |
把 10.0 改为 20.0 | 格子变小，变成 20×20 棋盘 |
把 mix(vec3(0.1), vec3(0.9), m) 换成其他颜色 | 红黑棋盘、蓝白棋盘等 |
把 mod(g.x + g.y, 2.0) 改为 mod(g.x, 2.0) | 变成垂直条纹 |
练习
把 vec2 g = vec2(0.0); 和 float m = 0.0; 改成正确的表达式，让画面出现 10×10 棋盘格。
答案解析
floor(vUv * 10.0) 把 UV 坐标离散化成 10×10 的整数格子编号。mod(g.x + g.y, 2.0) 把两个方向的编号相加后对 2 取余，相邻格子的余数一定相差 1，所以颜色必然交替。
初始代码 g = vec2(0.0), m = 0.0 让所有格子都是同一编号，mix 只能输出一种颜色。加上 floor 和 mod 之后，每个格子有了独立编号，交替规律就自然出现了。
试着把 mod(g.x + g.y, 2.0) 改为 mod(g.x * g.y, 2.0)，看看会出现什么图案。