对角条纹
4 / 15
练习基于 UV 构建重复图案。
把 x 和 y 坐标相加，就能让条纹倾斜 45 度：
下面拆解原理。
为什么相加就能倾斜
水平条纹只用 vUv.y，垂直条纹只用 vUv.x。
把两者相加 vUv.x + vUv.y 后，沿 45 度方向的像素（从左上到右下）的 x+y 值保持不变，而与这个方向垂直的方向上 x+y 值均匀变化。
结果：条纹沿 45 度斜线排列。
fract 制造重复
(vUv.x + vUv.y) * c 把 0–2 的范围（x+y 最大是 1+1=2）拉伸成 0–28（c=14）。
fract() 把这段范围折叠成 14 段重复的 0–1 锯齿波，每一段就是一对条纹（深+浅）。
step 切出硬边
step(0.5, v) 把每段分成前半（返回 0，深色）和后半（返回 1，浅色），形成硬边条纹。
试着改一改
| 改动 | 效果 |
|---|---|
把 c 从 14.0 改为 6.0 | 条纹变宽 |
把 vUv.x + vUv.y 改为 vUv.x - vUv.y | 条纹倾斜方向从左上→右下变为左下→右上 |
把 step(0.5, v) 改为 step(0.3, v) | 深色条变窄，浅色条变宽 |
把 vUv.x + vUv.y 改为 vUv.x * 2.0 + vUv.y | 条纹角度变化，偏向水平 |
练习
把 float v = 0.0; 改成正确的表达式，让画面出现 45 度倾斜的对角条纹。
答案解析
vUv.x + vUv.y 是沿对角线方向的线性坐标，范围 0–2。乘以 c = 14.0 扩展成 0–28，fract() 折叠成 14 段循环。
初始代码 v = 0.0 让所有像素的 v 恒为 0，step(0.5, 0.0) 永远返回 0，画面全是深色。改成 fract((vUv.x + vUv.y) * c) 后，v 沿对角线方向变化，条纹就出现了。
试着把 vUv.x + vUv.y 改为 vUv.x * 0.5 + vUv.y，条纹角度会向垂直方向倾斜。