从像素网格到字符与材质

一幅 Three.js 场景完成渲染后，会先得到一张平面的输入纹理。后处理 Shader 读取这张二维结果，再决定屏幕上的每个像素最终显示什么。它当然可以调色或加模糊，也可以把整幅画面重新组织成收据条纹、半调圆点、ASCII 字符、LED 面板，甚至编织和磨砂玻璃。

这些效果看上去互不相干，实际反复使用的是同一组动作：改变从哪里取样、把画面切成网格、进入每个格子内部画形状，再让明度、时间或指针决定形状怎样变化。本课沿着这条路径逐步拆解。你不需要先会写复杂 Shader，只需要跟住“坐标 → 数值 → 形状”这条线。

正常情况下，UV 坐标从 0 到 1 连续变化，每个屏幕像素都从输入纹理的不同位置取色。像素化会先把坐标吸附到固定网格：落在同一个格子里的像素，共用同一个采样位置，于是它们显示相同颜色，方块才出现。

假设画布是 800 × 600，期望方块宽度是 8px。先用 8 / resolution 把屏幕像素换成 UV 尺寸，再用 floor 把连续坐标向下取整。这样即使画布尺寸改变，网格仍然按照屏幕像素计算，不会无缘无故被拉长。

像素化只会得到整齐的色块。想让色块变成线、圆点或字符，还需要知道当前像素位于格子内部的哪里。fract 会丢掉整数部分，只保留小数，因此每个格子的左下角都会重新从 0 开始，右上角接近 1。

可以把 uvPixel 理解为“这个格子去原图哪里取色”，把 cellUV 理解为“画笔现在位于这张小画布的哪里”。前者重排整张画面，后者塑造每一个格子。后面的效果几乎都在重复组合这两层坐标。