://argon.red

仿色即通过若干种颜色交替出现以表现出其中间色;或者从其英文 dither 直译叫「抖动」。较早的时代因为技术限制,颜色位数十分低,难以表现出细腻的色彩,便会于是使用仿色的技术。当前可能很少听到这一概念。

最近再一次意识到仿色的概念是发现低亮度背景上,物体的阴影会出现严重的色彩断层:

图 1 低亮度背景上的物体阴影。图右侧经提亮

注意到底部阴影十分不均匀。最常用的 RGB 颜色表示,每个分量只有 8 bit,对于颜色较为接近的过渡仍捉襟见肘。

应用一定的仿色处理,可以看见虽然增加了噪点,但断层现象缓解了许多。对于 DPI 越较高的设备,因其单个像素越不明显,其效果越好。

图 2 低亮度背景上的物体阴影,作仿色处理。图右侧经提亮

「仿色」较常见出现于 Photoshop 渐变工具的选项里。但我没有装 Photoshop,图 3 下半部分是 Safari 画出来的。

图 3 低亮度背景上的物体阴影,作仿色处理。图中部经提亮

杂记

原本的阴影贴图是用 Sketch 做的,测试下了便注意到了这种断层现象。但是找了一圈,并没有发现(本机安装了的)程序会对阴影/模糊效果做仿色处理。最后用 “某种卷积”——以该像素和其周边某一随机像素的颜色的加权平均作为新的颜色——实现了仿色(确实是字面意义的「抖动」了)。

用 HTML Canvas (createLinearGradient) 绘制的时候还有一些特别其他的发现。图 4 是一些 2D 绘图渐变的对比:

图 4 2D 渐变的对比

可以发现,Cocoa (NSGradient) 和 CoreAnimation (CAGradientLayer) 的效果一致,并且 Sketch 跟他们差不多,都是单色噪点;Safari 使用了彩色噪点;Chrome 为单色噪点,且分布规整;Firefox 没有使用任何仿色处理,跟纵向逐条绘制的效果一致。

绘制由 #7F7F7F 到 #808080 的渐变,RGB 三个分量相加以 382.5 为界做二值化:

图 5 二值化处理后的渐变

参见 Wikipedia