CSS 抖动算法实战：Bayer 矩阵与 SVG Filter 的工程化实现路径

在现代 Web 图形开发中，抖动（Dithering）技术正从传统的图像处理领域向 CSS 渲染层面渗透。无论是消除渐变色带、构建复古像素风格，还是在有限色彩深度下提升视觉质量，CSS 层面的抖动实现都提供了轻量且高效的解决方案。本文将从工程视角剖析三种主流实现路径，并给出可直接落地的参数配置。

有序抖动的核心原理与 Bayer 矩阵

抖动算法的本质是用离散采样点模拟连续色调变化。在 Web 场景中，有序抖动（Ordered Dithering）因其计算可预测、模式固定而成为首选方案。其核心是 Bayer 矩阵 —— 一个预先定义的阈值查找表，按照像素坐标决定当前像素是否 “点亮”。

以经典的 4×4 Bayer 矩阵为例，标准数值如下：

 0  8  2 10
12  4 14  6
 3 11  1  9
15  7 13  5

使用时需将矩阵值归一化至 0–1 区间（除以 16），然后与目标像素的亮度值比较：若像素亮度大于矩阵对应位置的值，则输出 1（纯色），否则输出 0（透明或底色）。这种确定性模式天然适合 CSS/ SVG 环境的复现。

路径一：SVG Filter + feComponentTransfer

这是目前工程化程度最高的方案。SVG Filter 提供了一套原生的图像处理原语，配合 feComponentTransfer 可对 R、G、B 通道分别执行离散化传输，从而模拟 Bayer 抖动效果。具体实现上，需要在 SVG 中定义一个 4×4 的阈值图纹理（通常编码为 data URI），通过 feImage 引用后与原图混合，再利用 feComponentTransfer 的 tableValues 属性将连续色彩值映射为离散的 0/1 步进。

关键参数配置如下：阈值图尺寸固定为 4×4 像素，使用 nearest-neighbor 采样以保证矩阵模式不被线性插值模糊；feComponentTransfer 的 tableValues 需要根据目标色彩深度设置，例如 2 级色阶时填 "0 0.5 1"，表示在 0%、50%、100% 三个临界点进行离散化。此方案的性能表现取决于渲染面积 —— 在桌面端对单个 Banner 尺寸的背景进行过滤时，GPU 加速通常能维持 60fps，但若对全屏视频或复杂动画层应用则可能出现掉帧。

一个最小可运行的 SVG Filter 定义示例（概念参考 tomren1/dither-with-css 项目）：滤镜 ID 为 "dither"，内部串联 feImage（引用 4×4 Bayer 纹理）与三个 feComponentTransfer（分别处理 R、G、B 通道），最后通过 feComposite 与原图合成。CSS 端只需对目标元素应用 filter: url(#dither) 即可生效。

路径二：CSS Gradients + Mask 叠加

对于纯 CSS 而不依赖 SVG Filter 的场景，可通过多层渐变叠加配合 CSS Mask 实现伪抖动效果。具体做法是：底层放置平滑渐变，上层覆盖一个半透明的噪声纹理或重复图案，再通过 mask 剪裁出符合 Bayer 分布的离散区域。

此路径的优点是无需引用外部滤镜，兼容性好；缺点是精度受限 —— 由于 CSS 缺乏逐像素的阈值比较能力，所谓的 “抖动” 实质上是预制的图案遮罩，视觉真实性低于算法实现。工程实践中常见配置为：使用 repeating-linear-gradient 或 repeating-radial-gradient 创建 4×4 重复单元，配合 mask-image: linear-gradient(...) 设置透明度阈值。适用于对色带消除要求不高、但追求快速实现的项目。

路径三：Canvas/WebGL 着色器

当需要动态调整抖动参数（如实时修改色彩量化级数、切换不同矩阵模式）时，前两种方案的灵活性显得不足。此时推荐使用 Canvas 2D 或 WebGL 在客户端完成抖动计算，结果以 ImageBitmap 或纹理形式输出到页面。

WebGL 实现尤为高效 —— 在片元着色器中直接传入 Bayer 矩阵作为 uniform，按坐标取样比较后输出离散颜色，一次绘制即可完成全屏抖动。参数方面，建议将矩阵数据以浮点数组形式传入，矩阵阶数可配置为 4、8 或 16（阶数越高抖动颗粒越细，但计算量同步增长）。着色器内部的核心判断逻辑可简化为：float threshold = u_bayerMatrix[mod(gl_FragCoord.x, 4.0) + mod(gl_FragCoord.y, 4.0) * 4.0] / 16.0; if (color.r > threshold) outputColor = vec4(1.0);。

工程落地的关键参数清单

无论选择哪条路径，以下参数均需在项目中明确配置并纳入代码审查清单：

首先是矩阵阶数，推荐默认使用 4×4 Bayer 矩阵，兼顾效果自然度与计算开销；8×8 仅在高端设备、对画质要求极高的少数场景下启用。其次是色彩量化级数，即离散化后的色阶数量，2 级适用于二值化黑 / 白效果，4–8 级适合复古游戏风格渐变，16 级以上人眼通常无法感知抖动效果，可视为无意义开销。第三是采样模式，SVG Filter 中必须使用 preserveAspectRatio="xMidYMid slice" 与 image-rendering: pixelated 组合，确保阈值图不被平滑插值。第四是性能监控指标，对包含抖动滤镜的元素应监控每秒帧率与 GPU 内存占用，设定阈值：帧率低于 30fps 或内存增长超过 50ms 时触发降级策略（例如关闭抖动或降低矩阵阶数）。最后是降级策略，强烈建议在 CSS 中使用 @supports (filter: url(#dither)) 做特性检测，不支持时回退为普通渐变或预渲染图片。

小结

CSS 层面的抖动实现已具备完整的工程化路径：从 SVG Filter 的精细控制，到纯 CSS 的快速原型，再到 Canvas/WebGL 的动态交互，开发者可根据项目对画质、性能、兼容性的权衡做出选择。4×4 Bayer 矩阵配合 SVG Filter 是当前最推荐的工程默认配置，其参数明确、性能可预估，且在主流浏览器中拥有良好的兼容性支撑。掌握这套参数配置与实现模板，能在视觉增强与性能开销之间找到精确的平衡点。

资料来源：CSS Dithering CodePen 示例（https://codepen.io/410gone/pen/dVVBmq）、tomren1/dither-with-css 项目（https://github.com/tomren1/dither-with-css）。

web