垂直条纹

把水平条纹的方向转 90 度，只需把 vUv.y 换成 vUv.x：

下面拆解原理。

---

用 x 坐标做重复

vUv.x 从 0.0 到 1.0 覆盖画面的左到右（0% 是左边，100% 是右边）。

vUv.x * c 把这段范围拉伸 12 倍，变成 0–12。

fract() 把 0–12 折叠成 12 个 0–1 的循环，画面被切成 12 列，每列内部坐标独立从 0.0 走到 1.0。

---

step 切出竖向硬边

step(0.5, x) 让每列左半（0%–50%）等于 0.0，右半（50%–100%）等于 1.0。

mix(深色, 浅色, m) 根据这个 0/1 遮罩交替输出两种颜色，形成垂直条纹。

---

试着改一改

改动	效果
把 c 从 12.0 改为 6.0	条纹变宽，只有 6 列
把 step(0.5, x) 改为 step(0.8, x)	深色条很宽，浅色条变成细线
把 vUv.x 换成 vUv.y	变回水平条纹
把 mix(...) 里换成红/黄配色	暖色系垂直条纹

---

练习

把 float x = 0.0; 改成正确的表达式，让画面出现 12 条垂直条纹。

答案解析

c 是 12.0，vUv.x * 12.0 把 x 坐标扩展成 0–12 的范围，fract() 把它折叠成 12 段重复的锯齿波。

初始代码 float x = 0.0 让所有像素的 x 永远等于 0，step(0.5, 0.0) 恒为 0，画面全是深色。改成 fract(vUv.x * c) 之后，x 随水平位置变化，step 就能在每段里分出左右两半，形成垂直条纹。

试着把 c 改成 24.0，条纹密度会变为原来的两倍。