2.2马赛克工坊

这一章做四种马赛克,从五行代码的基础像素化,一路做到带立体光影的乐高积木墙。它们共享同一个核心机关,又各自演示一种「格子内再创作」的手法——学完你不但会做这四种,还能自己发明第五种。

1万法归一:量子化

所有马赛克的本质是同一件事:让一片区域的像素共享同一个颜色来源。翻译成 Shader 语言:把连续的 UV 坐标「四舍五入」到格子中心,再拿这个统一坐标去采样——1.3 章的 floor/fract 兄弟又来了:

float n = 40.0;                              // 横向格子数
vec2 cellUV = (floor(uv * n) + 0.5) / n;     // 本格中心的 UV
vec3 color  = texture(uTex, cellUV).rgb;     // 全格共用中心色 → 马赛克!

拆解:floor(uv * n) 是格子编号(0, 1, 2…),加 0.5 挪到格子正中,再除以 n 变回 UV 空间。整个格子里的像素算出的 cellUV 完全相同,于是取到同一个颜色。连续坐标被「量子化」成了离散台阶——这个机关贯穿全章。

2基础像素化

加上宽高比修正(保证格子是正方形),就是完整的像素化效果。拖动滑块感受颗粒度:

3圆点马赛克

手法升级:格子颜色不再涂满,而是画成一个圆点,而且圆点大小跟随亮度变化——亮处大点、暗处小点,远看是照片、近看是波点艺术(印刷网点、LED 大屏都是这个思路):

注意这里的新思想:格子编号管「取什么颜色」,格内坐标管「画什么形状」,两条流水线在最后的 mix 汇合。想换成方块、菱形、五角星?只改「画什么形状」那一半。

4六边形马赛克

蜂窝格比方格「高级感」强得多,但六边形没法用一次 floor 切出来。经典技巧:叠两张错位的矩形网格,每个像素归属于离它较近的那张网格的格心——两套候选格心一比,蜂窝就出现了:

不必一次读懂 hexGrid 的每行——先把它当「六边形版的 floor/fract」用起来,它同样返回「格内坐标 + 格子标识」这对老搭档。想深挖推导,搜 The Art of Code 的 Hexagonal Tiling 视频(4.2 章工具箱有链接)。

5压轴:乐高积木

把本章所有手法堆在一起,再加一味新调料——假光照,马赛克就变成了乐高墙。配方:

1. 量子化取色(第 1 节)→ 每块积木的颜色;
2. 格内坐标画圆(第 3 节)→ 积木顶面的圆凸点(stud);
3. 光照三件套:凸点上半亮、下半暗(假装光从左上来),边缘一圈高光,凸点右下投个影;
4. 格子四边压暗一圈 → 积木之间的接缝。

值得咀嚼的是第④步:dot(normalize(cell), lightDir)。这其实是 3D 渲染的兰伯特光照(N·L)公式,只是「法线」被我们用格内坐标的方向偷懒近似了——顶点朝上的曲面,边缘的法线确实大致指向外侧。4.1 章游戏 Shader 里的光照,就是这一行的严肃版本。一个平面纹理,靠「亮一边、暗一边、加高光、投个影」四步就骗过了人眼,这套「假光照四件套」值得单独记住,做任何拟物效果都用得上。