Web复古渲染：抖动与Retro Shading艺术解析

当浏览器成为复古画布

在4K屏幕和高保真渲染唾手可得的时代，一群开发者却主动把画面"降级"——用有限的调色板、可见的像素点、刻意的抖动噪点来构建Web视觉体验。这不是技术退步，而是一种被称为 Dithering（抖动） 与 Retro Shading（复古着色） 的美学选择。

近期在 Hacker News 上引发讨论的《The Art of Dithering and Retro Shading for the Web》一文，系统梳理了这套技术如何在浏览器环境中落地。它触及的不只是"怀旧"，更是一个被长期低估的命题：在带宽、算力和色彩深度都受限的条件下，如何做出有表现力的画面。 而这些曾经的妥协手段，如今正被重新当作主动的创作语言。

抖动到底是什么

从技术底层看，抖动是一种用有限色彩近似出更多色彩层次的误差扩散技术。假设你只有黑白两色，却想表现灰色——传统做法是放弃，抖动的做法是用不同密度的黑白点混合，让眼睛在视觉上"合成"出灰色。

这套思路最早来自印刷业的半色调工艺，后来被早期计算机图形学大量采用，用来在低色深的显示设备上模拟渐变。核心机制是：计算目标颜色与当前可用颜色之间的误差，再把这个误差按一定规则扩散到邻近像素。经典的 Floyd–Steinberg 算法就是其中流传最广的一种。

在复古着色语境下，抖动往往和调色板限制、像素化缩放、扫描线效果叠加使用，共同营造出 CRT 显示器或早期游戏主机的视觉质感。

Floyd–Steinberg 算法由 Robert Floyd 和 Louis Steinberg 于1976年提出，是误差扩散抖动中最经典的实现。它的做法是：对每个像素先量化为当前调色板中最接近的颜色，计算出量化误差，再按固定权重把误差分摊给右、左下、下、右下四个尚未处理的邻居像素——权重分别为 7/16、3/16、5/16、1/16。这种"扫描线逐行推进、误差向未处理方向扩散"的串行结构，使它天然无法并行：后一个像素的结果依赖前一个像素的误差输入。它的优点是过渡自然、颗粒感细腻，缺点是容易产生"虫形"（worm）伪影，且在实时渲染中顺序依赖会拖慢管线。理解这一点，就能明白为何着色器场景更偏好有序抖动。

为什么它在Web上重新流行

如果把抖动仅仅理解为"模仿老游戏"，就低估了它的现实价值。它在Web端的复兴有几条清晰的动因：

一是性能与体积优势。 当调色板被压缩到几十甚至十几色，图像的压缩与传输成本显著下降。对于需要加载大量视觉素材的网页，这意味着更小的资源体积和更快的首屏。

二是风格辨识度。 在千篇一律的高清UI中，带有明确颗粒感和色阶断层的画面反而更具记忆点。独立游戏、创意作品集、实验性网站是主要应用场景。

三是可控的随机性。 抖动引入的噪点并非纯粹的缺陷，它能让渐变更自然、减少色带（banding），在视觉上带来一种手工质感。

四是Web技术本身的成熟。 WebGL、Canvas 2D 以及着色器（shader）在浏览器中的普及，让过去需要专用硬件完成的实时抖动后处理，如今几行着色器代码就能实现。

Web端实现的关键路径

后处理着色器方案

最主流的做法是把抖动作为渲染管线的最后一道后处理。场景正常渲染到一张纹理（framebuffer），再由一个全屏四边形配合片元着色器，对每个像素执行调色板量化与误差扩散。这种方式对原有渲染逻辑侵入最小，可以整体套用到绝大多数WebGL项目上。

后处理（post-processing） 指在场景几何与光照全部渲染完成后，对最终图像整体再施加的一轮处理，常见于抗锯齿、泛光、色调映射、景深等效果。其典型结构是：先把场景渲染到一张离屏纹理（framebuffer）或渲染目标，而非直接输出到屏幕；随后用一个覆盖全屏的四边形（full-screen quad），以片元着色器对纹理逐像素采样并变换，最后写入屏幕。抖动作为后处理的优势在于解耦——它不关心场景里有多少物体、用什么材质，只对最终像素统一作用，因此可以整体挂到任意 WebGL 项目上，改动量小、复用性强。

Canvas 2D 与 CPU 路径

对于不需要实时3D的场景，直接用 Canvas 2D 逐像素处理也完全可行。图像数据通过 getImageData 取回后在CPU侧做抖动运算，再写回画布。代价是性能受限于图像尺寸，但对于静态图或小尺寸动画足够用，且实现门槛更低。

有序抖动 vs 误差扩散

这里存在一个值得注意的取舍。误差扩散（如 Floyd–Steinberg）色彩过渡更细腻，但本质上是串行算法，难以高效并行化，在实时渲染中容易成为瓶颈。而有序抖动（Ordered Dithering） 使用预定义的 Bayer 矩阵阈值，可以完全并行、逐像素独立计算，因此更适合着色器实现。许多Web复古渲染项目最终选择有序抖动，正是出于性能与可预测性的平衡。

Bayer 矩阵（又称有序抖动矩阵）是 Ordered Dithering 的核心。它是一个 n×n 的阈值矩阵，元素值由递归构造规则生成，例如经典的 2×2 形式为 [[0,2],[3,1]]，4×4、8×8 则由它递归扩展而来。渲染时把矩阵元素归一化到 [0,1)，与目标像素的灰度或通道值比较，大于阈值取一亮色、否则取暗色。由于每个像素只依赖自己的坐标与固定矩阵，不含任何跨像素依赖，因此完全可并行、可矢量化，非常适合 GPU 逐片元计算。代价是它在平坦区域会形成可见的规则网格图案，颗粒呈规律性而非随机性——这也正是许多复古渲染刻意想要的那种"网点感"。

动画中的稳定性问题

抖动应用在动态画面上会遇到一个棘手问题：噪点会随帧闪动，产生明显的"沸腾"感。缓解手段包括固定抖动矩阵的相位、对时间做量化，或者只对静态层应用抖动。是否接受这种闪动，往往取决于作品想要呈现的风格。

色带（banding） 指的是低色深下本该平滑的渐变被切分成一条条可分辨的色阶断层。它的成因是色彩空间被量化：当只有 32 或 256 级亮度时，相邻两级之间的跨度足以被肉眼识别为硬边。抖动正是缓解色带的经典手段——通过在边界两侧混入不同密度的点，让眼睛在视觉上"插值"出中间色调。此外，屏幕空间环境光遮蔽（SSAO）、体积雾、大面积软阴影等低对比度渐变区域最容易暴露色带，因此这些地方往往是抖动后处理的优先作用区。在 8-bit 复古风格里，色带有时反而被保留甚至强化，作为风格符号而非缺陷。

不只是滤镜：一种设计方法论

把抖动当作"加个怀旧滤镜"是常见的误解。真正做得好的复古渲染，是把色深、分辨率、抖动模式、缩放方式当作一整套相互约束的设计变量来统筹。

调色板选得好不好，直接决定了抖动能否表现出生动的层次；分辨率定得越低，单个像素的表现力权重就越高；抖动矩阵的图案如果选得不合适，还会在某些灰阶区域形成可见的规则纹理。这些细节叠加在一起，构成了最终是否"像那么回事"的关键。

对Web创作者来说，这套方法论还有一个额外好处：约束反而降低了决策成本。 当你只有32种颜色和320×240的像素空间，构图和用色的取舍会变得更果断。

结语

抖动与复古着色在Web上的流行，表面是对旧时代显示技术的致敬。但更准确地说，它是开发者主动选择的一种表达方式——用受限的媒介换取独特的视觉张力。随着WebGL和着色器工具链的成熟，这套曾经受制于硬件的技术，正在浏览器里获得全新的生命。想要尝试的话，从有序抖动着色器入手，是最容易看到效果的起点。