毛玻璃特效：RGBA、高斯模糊与 Acrylic 材质

Matrix 首页推荐

Matrix 是少数派的写作社区，我们主张分享真实的产品体验，有实用价值的经验与思考。我们会不定期挑选 Matrix 最优质的文章，展示来自用户的最真实的体验和观点。

文章代表作者个人观点，少数派仅对标题和排版略作修改。

毛玻璃特效被广泛应用于现代操作系统中，不管是 Windows 的 Aero Glass、Acrylic，还是 iOS 的模糊特效，都绕不开「毛玻璃」这个名字。本文试图探究毛玻璃背后的原理，并具体分析 Fluent Design 中的 Acrylic 材质。

RGBA

众所周知，LCD 显示器之所以能显示出五彩斑斓的颜色，是因为在每个像素点的背后，有三种颜色的子像素点——红（Red），绿（Green），蓝（Blue）。这些子像素点通过发出不同强度的光，组合出不同颜色。

但是，如果做过设计，或者写过 GUI（图形界面）的人，可能会知道一个东西叫 RGBA。这个 A 代表的是 Alpha，在设计领域指的是不透明度的高低。在多种元素叠加摆放的情况下，如果上层颜色存在一定的透明度，那就会叠加显现出下层颜色，就像透过一块有色玻璃看世界一样。

然而问题是，在物理层面上只有三种颜色的子像素点，是怎么得到这 RGBA 四种元素的？显然，一种东西不会凭空产生，RGBA 也无法突破 RGB 的物理限制。既然 RGB 已经足以表示所有颜色，那么剩下的这个 Alpha 就只能是 RGB 的某种组合。

问题就是，它们是以怎样的方式进行组合的呢？

与其瞎猜，不如动手试一试。先画一个纯红的方块 RGB = (255,0,0)，再在上面叠加一个 50% 不透明度（即 Alpha = 0.5），纯白的方块 RGB = (255,255,255)。最后，用取色器看看重叠的部分到底是什么颜色，发现就是两种颜色简单地进行了平均 RGB = (255,128,128) = Alpha * (255,0,0) + (1-Alpha) * (255,255,255)。

可能有人会说了，这好像和我们平常见到的半透明效果不一样，这个虽然半透明了，但是看得还是很清楚，但苹果的半透明好像有一种磨砂玻璃的质感。这又是如何达到的呢？

这就是我们接下来要介绍的，模糊效果。

模糊效果

模糊，如果用通俗的语言来讲的话，就是看不清。就比如摄像头的对焦不准，整个画面呈现出一种不清晰的状态。而这种不清晰，源于边界的缺失，或者说，相邻色块之间的混合。

比如下面这两张图片，都是由 29 x 29 个小方块组成的图像。如果我们将每个方块和它周围的方块的颜色进行平均，则会得到第二张图中的样子。

这种平均操作，可以抽象为一种数学模型：

例如，你想对图中的左上角九宫格的中心方块进行平均操作（图中颜色仅起强调作用，和数值无关），将它的颜色和周围方块的颜色进行一个平均，那么你可以使用一个预先定义的模块，这个模块在计算机领域被叫做滤波器（或者卷积核，此处不做过多区分）。你可以想象它是冒险小虎队的解密卡。我们通过将滤波器放置在原图片上，将每个原图片中的对应像素，与滤波器里对应小方块的数值进行乘法运算，最后加起来，成为新图片里，中心像素的值。例如在下面的图片中，我们展示了其中的一步操作，把左上角的方块和滤波器的对应方块进行乘法运算，然后再加起来，最后，得到中心像素的值是 8*0*(1/9) +1*(1/9) = 1/9。

就这样，使用不同的滤波器，我们就能达到不同的图片效果。滤波器的大小通常被称作半径，一般来说，滤波器方块的长宽都是奇数，那么半径就等于 (边长-1)/2。

高斯模糊

当然，在众多滤波器里，有一类较为常用的被称为「高斯滤波」，也就是我们熟知的「高斯模糊」。它的名字里之所以有「高斯」这两个字，主要是来自于概率论中的高斯分布。

简单的讲，高斯分布的形状就像一个山丘，一个点落在中间的可能性大，两边的可能性小。如果我们借用高斯分布从中间到四周的函数值，就可以制造一个滤波器，使得中间像素对于处理后的图像影响更大，四周像素对于处理后的影响效果更小。

高斯分布有两个关键的值，一个是均值，另外一个是方差。均值决定了高斯分布的位置，均值的加减等同于对高斯分布进行了平移。方差决定了高斯分布的形状，方差越小，说明高斯分布越集中于中心部分。与此同时，如果计算一维正态分布曲线下方的面积，会发现，超过 95%的面积位于中心向左两个方差，向右两个方差的范围之内。这说明超过了这个范围，进行滤波对于中心像素的影响微乎其微。所以可以只用一个九宫格（中心点相邻点），就可以极大程度上近似一个完整的高斯分布所带来的的效果。这也就是常用的 3x3 高斯滤波器。

Acrylic 材质

当然，现实 UI 中的毛玻璃特效会在此基础上添加更多的层次，使其更加真实或者增加界面的可读性。

就拿微软 Fluent Design 中的 Acrylic 材质构成图作为例子，其包含了五层，分别是：背景层，高斯模糊层，明度混合层，颜色混合层，以及噪点层。

明度混合，和我们最开始讲的 RGBA 有着一定的联系。明度顾名思义就是图片的明亮程度。两个极端是纯白 (255,255,255) 和纯黑（0,0,0）。通过将纯白或者纯黑的色块放置在原图上方，调整透明度，就等价于明度的调整。（当然可以也直接调明度啦！）另外，通过调整明度，也可以弱化背景，增加毛玻璃特效上文字的可读性。

颜色混合，则与 Windows 的主题色相关。会在前几层的基础上，再叠加一个半透明的 Windows 主题色块，以实现色彩风格的统一。

噪声，顾名思义就是给毛玻璃增加一点不规则性，让毛玻璃特效不那么呆板，这一块就不具体讲了。一种最简单的方法就是生成二维随机数组，然后把这些坐标上的点人为改为黑白灰。

最后，展示一下微软给出的 Acrylic 材质的窗口：

结尾碎碎念

这文章拖了三四个月，从构思到查资料到写稿到摸鱼，再加上读研第一学期课好多，愣是拖到了二月份。不过总算还是写完了，也解答了自己心中的一点疑问。

文章里的图只要没有标引用的都是我自己画的。ARGB 的那个是 Affinity Designer 截图，小方块是 HTML + CSS + JavaScript ，卷积核是 PPT。

引用

[1] 封面：Photo by the blowup on Unsplash

[2] Photo by Umberto on Unsplash

[3] Photo by Jessi Pena on Unsplash

[4] 百度图片——高斯分布 

[5] [6] Acrylic Material 

> 下载少数派 客户端、关注 少数派公众号，让你的数字生活更精彩 🎉

> 特惠、好用的硬件产品，尽在 少数派 sspai 官方店铺 🛒

© 本文著作权归作者所有，并授权少数派独家使用，未经少数派许可，不得转载使用。