砖墙
1 / 15
练习基于 UV 构建重复图案。
砖墙图案的关键是每隔一行把砖块向右偏移半格，只需一行代码：
下面拆解原理。
建立网格
把 UV 坐标放大 8 倍，画面被分成 8×8 的格子区域。
识别奇偶行
floor(uv.y) 把当前行号取整（0、1、2、3…）。
mod(floor(uv.y), 2.0) 对 2 取余：偶数行得 0，奇数行得 1。
step(1.0, ...) 把余数转成 0/1：奇数行返回 1，偶数行返回 0。
偏移奇数行
uv.x += ... * 0.5 把奇数行的 x 坐标向右移动半个格子（0.5 格）。
偶数行不偏移，奇数行向右偏移，形成砖块的错缝排列。
画砖缝
fract(uv) 得到每个砖块内的局部坐标。step(0.95, f.x) 在格子右侧 5% 处（95%–100%）返回 1，step(0.95, f.y) 在顶部 5% 处返回 1，两者叠加后 min(..., 1.0) 保证不超过 1。
这就是砖缝的遮罩：砖缝处为 1（深色），砖块面为 0（砖红色）。
试着改一改
| 改动 | 效果 |
|---|---|
把 8.0 改为 4.0 | 砖块变大 |
把 0.95 改为 0.9 | 砖缝变宽 |
把 0.5 改为 0.3 | 奇数行偏移量减少，砖块更接近对齐 |
把 vec3(0.75, 0.25, 0.2) 换成其他颜色 | 改变砖块颜色 |
练习
把练习区中 // TODO: 每隔一行偏移 0.5 处的代码补全，让砖墙出现正确的错缝效果。
答案解析
floor(uv.y) 得到当前行的整数编号。mod(..., 2.0) 判断奇偶。step(1.0, ...) 把奇数行映射为 1，偶数行映射为 0。* 0.5 让奇数行的 x 坐标向右移动半格。
练习初始代码有完整的砖缝逻辑，只缺少这一行偏移。没有偏移时，所有行的砖块垂直对齐，不像真正的砖墙。加上偏移后，奇偶行的砖块交错，砖墙的错缝排列就自然出现了。
试着把 * 0.5 改为 * 0.25，看看偏移量减小时砖墙的视觉效果。