一、 Alpha合成/阿尔法合成/透明合成

在计算机图形学领域,Alpha合成(alpha compositing)是一种将图像与背景结合的过程,结合后可以产生部分透明或全透明的视觉效果。

二维图像里记录着每个像素的颜色信息,额外的信息以0和1之间的值表示,记录在Alpha通道里。0 表示该像素没有覆盖信息,是透明的,即图中的几何体没有覆盖到本像素;而1则表示像素不透明,几何体完全覆盖了此像素。

图像中使用的Alpha通道通常有两种表示形式:

  1. 平直Alpha/非预乘Alpha(straight alpha/non-premultiplied):图像中的RGB分量仅表示像素的颜色,与是否透明无关。

    用平直的RGBA元组表达像素颜色,像素值(0, 0.7, 0, 0.5)表示有70%绿色亮度,50%不透明度。同样透明度条件下的纯绿色是(0, 1, 0, 0.5)。

  2. 预乘Alpha(premultiplied alpha):图像中的RGB分量也表示像素的颜色,但事先已经和不透明度做了乘法。某些使用场景下,这样的做法可以在后续合成时节省一次乘法。不过预乘Alpha的最显著优势在于使用简单、准确而非性能。

    用预乘Alpha,此处的RGB值(0, 0.7, 0)需要都乘以 0.5,表达为(0, 0.35, 0, 0.5)。虽然此处G通道的值是0.35,但它表示的还是最大亮度的70%(其中包含了 50% 的不透明度)。此时的纯绿色表达为(0, 0.5, 0, 0.5)。

二、关于iOS下css渐变插值不正确的bug

具体表现如下图(iOS 12.1.2),当在css中使用渐变时,若是从透明过渡到一个颜色或者一个颜色过渡到透明,会明显的看到有多余的颜色出现,而该多余的颜色取决于你所使用的透明色,比如rgba(255,0,0,0),这个是红色透明,查阅相关资料得知,是 iOS的图形框架Core Graphics的渲染方式问题

Bug 150940


CodePen

产生这个问题的具体原因没有深入了解,但可以参考以下栗子。

三、举个栗子

以线性插值为例,一个宽2px高1px的图片,左边是50%透明蓝色rgba(0,0,255,0.5),右边是黑色rgba(0,0,0,1),把这个图片缩放到1×1的大小,那么缩放后1像素的颜色就是左右两个像素线性插值的结果,也就是把两个像素各个通道加起来除以2。

使用非预乘Alpha进行插值,结果是:
((0,0,255,0.5)+(0,0,0,1))⋅0.5=(0,0,127,0.75)

使用预乘Alpha进行插值,结果是:
((0,0,255*0.5,0.5)+(0,0,0,1))⋅0.5=(0,0,63,0.75)

对比上下两个插值结果,上面显得更蓝,下面显得更黑,因为上面蓝色通道没有乘以透明度,所以在线性插值的时候占了过大的权重。

所以预乘Alpha最重要的意义是使得带透明度图片纹理可以正常的进行线性插值。这样旋转、缩放或者非整数的纹理坐标才能正常显示,否则就会像上面的例子一样,在透明像素边缘附近产生奇怪的颜色。

同理计算从透明红色过渡到黑色的插值:

使用非预乘Alpha进行插值,结果是:
((255,0,0,0)+(0,0,0,1))⋅0.5=(127,0,0,0.5)

使用预乘Alpha进行插值,结果是:
((255*0,0,0,0)+(0,0,0,1))⋅0.5=(0,0,0,0.5)

四、修复iOS下css渐变插值不正确的bug

根据以上栗子,除了等待Apple修复它的图形框架外,我们可以用同一颜色的透明色来手动修复该bug.

例如:从透明过渡到红色,我们可以使用红色透明过渡到红色

使用非预乘Alpha进行插值,结果是:
((0,0,255,0)+(0,0,255,1))⋅0.5=(0,0,255,0.5)

使用预乘Alpha进行插值,结果是:
((0,0,255*0,0)+(0,0,255,1))⋅0.5=(0,0,255,0.5)

参考文档


发表评论

电子邮件地址不会被公开。 必填项已用*标注