最近这段时间在搞openGL ES处理视频和图像，要进行纹理混合，重新温习了一下大学时候的课本，找了一些资料，把一些常用的颜色混合算法都列出来，对比PS和GPUImage中的算法，供大家参考。

预习：

色彩模型有很多种，包含RGB、YUV、HSL、HSV、HSB、Ycc、XYZ、LAB、CMYK等等，这些模型感兴趣你可以都了解一下，但你要知道这些模型建立的核心，那就是“以人为本”, 全部参照人类视网膜感光能力而设计，有的模型是国际照明委员会（CIE）进行过大量的人类视觉测量和统计得出的，毕竟可能存在我们混合出来的某些色彩，在一些动物眼里根本无法区分（据说蛇的眼里没有色彩），那这种混合就没有任何意义，色彩模型的创建也就形同虚设了，好在人类可以区分很多种色相，实践也有了意义。

        这里重点讲一下三原色，至于三原色是哪些就不再讲了，回去翻中学课本，想通过三原色来讲解一些光的本质。 

        我们都知道光线中存在一个色谱，这个色谱分为可见光波段和不可见光波段，我们的讨论范围只在可见光范围内，如果你对外端不可见光谱感兴趣，就移步到百科里去看看视网膜不可感知的电磁波，例如无线电波、微波、红外、紫外、射线、远红外等等，这些已经超出了人类视网膜接收的电磁波的波长，我们的视网膜只能接收波长为400~700纳米的电磁波，但科学界已经找到很多人，能够接收380~780之间的电磁波，这类人就比较牛逼了，再进化几代可能会出现写轮眼白眼轮回眼什么的，一眼看穿别人身体内血液流动产生的电信号。

        可见光谱中包含7种波长不同的光，就是毛爷爷说的“赤橙黄绿青蓝紫，谁持彩练当空舞”，波长从长到短，红色最长，紫色最短，你能看到这个世界上的很多东西，全都要感谢“反射”的存在，光线照射在物体上，反射后进入你的眼睛，所以你就看到了这个物体，如果这个世界没有了反射，基本来讲你除了能看到光源（太阳，灯）之外，就是个瞎子了，就像你在太空了，除了能看到一些发光的恒星，啥也看不到，一片漆黑，而光线照射在不同的物体上时，这个物体会把赤橙黄绿青蓝紫中的某些波段的光吸收了，例如一片树叶，把赤橙黄青蓝紫6种颜色吸收了，剩下“绿”光就反射出来进入你的视网膜，所以你觉得树叶是绿的。

        了解上面的反射原理后 ，我们进入正题，颜色混合。

        颜色混合分为色光混合还有颜料混合。

色光混合就是可见光的混合，例如图1：（图直接从网上扣的，感谢原作者，但不知道原作者是谁）

颜料混合就是水彩之类的物理物质混合，例如图2：（这个图直接从网上扣的，感谢原作者，但不知道原作者是谁）

为什么会这样呢？我们把耀眼的白色当成是耀眼的太阳光，非常热，能量非常高，暗淡的黑色当做是漆黑的深夜，非常寒冷，能量非常低 （实时确实如此）,  所以，色光的混合是一种能量聚集的形式，混合的光越多，能量越高，颜色越趋近于白色，所以色光混合又叫“能量叠加”，而颜料混合得数量越多，越趋近于黑色，又叫“能量衰减”，知道了这些概念了，你知道从中的原因吗？ 色光混合又叫能量叠加，这个很好理解，但颜料为什么越混合越暗呢？这就跟物理性质有关了，颜料的混合形式恰恰跟色光混合原理相反，色光是单纯的叠加混合，而颜料，是一种补色混合，这就跟反射有关了，颜料吸收掉其他颜色，只剩下不能吸收的颜色反射出去，这就是颜料的原理，比如红色的颜料，是因为它吸收了其他颜色，把无法吸收的红色反射出去，看上去就红了，被吸收的那些颜色就是补色，所以，颜料混合的颜色越多，就相当于每种颜色的补色都被逐渐集齐，然后几乎吸收了光谱中所有的颜色，不黑才怪。

既然本文叫RGB颜色混合，那就跟颜料混合没啥关系了，只是用颜料混合作对比，让你明白色光混合的本质。 在计算机中，用来描述颜色的模型有很多，本文我们探讨RGBA的混合模式，这里你必须知道一套混合模型" Porter-Duff ", Porter-Duff模型已经有三十多年的历史了，在1984年由Thomas Porter 和 Tom Duff 发表，（论文传送门）已经被计算机界广泛应用，如果你有多平台开发经验，你会发现很多领域都在使用这套模型，DirectX、OpenGL、Metal、Vulkan、Mantle中随处可见Porter-Duff的身影，这套模型中罗列出了12种混合模式，在计算机中极大推动了图形学和图像学的发展，贡献之大。

下面，我们来一个更直观的示意图，看看每种情况对应哪些形式：官方示意：传送门

下面会讲解这些混合模式的算法，在讲解之前，你有必要了解一些计算过程中的特殊因式，否则很多步骤将晦涩难懂。

（1-a）  。  接下来的很多公式里，你会看到大量的（1-a），为什么要用1减去透明度？得到的是什么呢？实际上在做这些算法的时候，研究人员尽量模拟光线的特性来设计，例如，光线穿透一些具有透明度的物体，一部分光会投射过去，剩下一部分反射回来，被我们看到。  

        假设有两块有颜色的玻璃，一块红色，一块绿色，红色的玻璃透明度alpha = 0.2 ，则这块玻璃的透光率为80%，因为有80%的光透过去了，只有20%能被我们的眼睛接收，所以透明度为0.2，若alpha = 0，则透光率为100%，所有光线都透过去了，我们就看不到了，另一块绿色玻璃的透明度是0.6，则透光率是40%。现在，将两块玻璃叠放到一起，用一束太阳光照射后，光线先穿过红色玻璃，有80%的光透过去了，再经过绿色玻璃，有 80 * 40% = 32%的光透过去了，也就是两块玻璃叠加后，总的透光率为32%，所以透明度为0.68.

所以，总透明度   = 1 - （a1透光率）*（a2透光率） 

                            =  1 - （ 1-a1 ）* (1 - a2) 

                            =  a1 + a2 - a1 * a2 

了解透光率的特性后，接下来很多混合模式，相信你都可以看懂了。

讨论Porter-Duff模型之前，我们按照论文中，先定义几个符号，以便你理解公式

C -表示像素的颜色，即(RGBA)的RGB部分，C是color的缩写 （特别注意，Porter-Duff模型中所有RGB均为左乘后的结果，具体原因请翻阅论文，所以此处的R是Xr * Xa 的结果，即原始色彩 * 透明度  ， 关于pre-multiplied和post-multiplied的知识点请移步到百科）

A -表示像素的透明度，A即alpha

s  -表示两个混合像素的源像素，s即source

d -表示两个混合像素的目标像素，d即destination

r -表示两个像素混合后的结果，r即result

F -表示作用于C或A上的因子，F即factor

于是，Porter-Duff中定义了核心公式：

即 ：

结果色 = 源色 * 原因子 +  目标色 * 目标因子。      结果alpha = 源透明度 * 源因子 + 目标透明度 * 目标因子。

对于论文中提到的12种不同的混合方式，仅仅是Fs与Fd的取值不同，

例如SRC_OVER  , Fs = 1 , Fd = ( 1-As )

1. CLEAR                                Fs = Fd = 0

2. SRC                                    Fs = 1 Fd = 0

3. DST                                    Fs = 0 Fd = 1

4. SRC OVER                         Fs = 1 Fd = (1-As)

5. DST OVER                         Fs = (1-Ad) Fd = 1

6. SRC IN                                Fs = Ad Fd = 0

7. DST IN                                Fs = 0 Fd = As

8. SRC OUT                            Fs = (1-Ad) Fd = 0

9. DST OUT                            Fs = 0 Fd = (1-As)

10.SRC ATOP                        Fs = Ad Fd = (1-As)

11.DST ATOP                        Fs = (1-Ad) Fd = As

12.XOR                                   Fs = (1-Ad) Fd = (1-As)

为什么系数会是这样呢？

这里准备了两幅图，我们来根据混合两幅图像，更具体的分析混合样式，请注意，Src的图和Dst的图，都有一半不透明，另一边半透明，这样在融合时能看清具体的模式。本文中示例的Demo已上传GitHub，有兴趣的同学可以下载看看。Demo传送门

图中，SrcOver是由Src叠加在了Dst上，是一种最普通的光学叠加，设光线全量为1，则照射在Src上的量度为1，穿透Src照射在Dst上的光量为 1 - As ，此刻，两个图层均享受到了光量，达到了混合效果，因此，光量比重系数  Fs = 1 , Fd = ( 1-As ) 。

计算公式： Cr = Cs + Cd * ( 1 - As ) ;            Ar = As + Ad * ( 1 -  As )

还原左乘：Cr = Cos * As + Cod * Ad * ( 1 - As ) ;   (其中Cs = Cos * As,  Cd = Cod * Ad)

得出的Cr都是在左乘的基础上算出的，还原真实色彩需要 / Ar 。

同样，DstOver，是由Dst叠加在了Src上，也是一种最普通的光学叠加，设光线全量为1，则照射在Dst上的量度为1，穿透Dst照射在Src上的光量为 1 - Ad ，因此，光量比重系数Fs = ( 1-Ad ) , Fd = 1 ，计算方式与SrcOver相同

计算公式： Cr = Cs * ( 1 - Ad ) + Cd  ;            Ar = As  * ( 1 -  Ad ) + Ad

还原左乘：Cr = Cos * As * ( 1 - Ad ) + Cod * Ad  ;   (其中Cs = Cos * As,  Cd = Cod * Ad)

SrcOut可以看成是Dst覆盖在Src上后进行了剪裁，即DstOver，Dst涵盖的部分完全消失，假设光线全量为1，透过Dst后到达Src的光量为1-Ad，此时让Dst消失，相当于讲Dst的全部光量抹除为0，故 Fs = 1-Ad，Fd = 0；

计算公式： Cr = Cs * ( 1 - Ad )   ;            Ar = As  * ( 1 -  Ad )

还原左乘：Cr = Cos * As * ( 1 - Ad ) ;   (其中Cs = Cos * As,  Cd = Cod * Ad)

DstOut可以看成是Src覆盖在Dst上后进行了剪裁，即SrcOver，Src涵盖的部分完全消失，假设光线全量为1，透过Src后到达Dst的光量为1-As，此时让Src消失，相当于讲Src的全部光量抹除为0，故 Fs = 0，Fd = 1 - As；

计算公式： Cr = Cd * ( 1 - As ) ;            Ar = Ad * ( 1 -  As )

还原左乘：Cr =  Cod * Ad * ( 1 - As ) ;   (其中Cs = Cos * As,  Cd = Cod * Ad)

SrcIn 不能通过简单的光学叠加而形成，要实现这种效果，可以通过其他渠道来生成，方法很多，其中有一种简单的方法，如下图所示

SrcIn = SrcOver - DstOut - SrcOut;

所以 SrcIn   = (Cs + Cd * ( 1 - As )) - (Cd * ( 1 - As )) - (Cs * ( 1 - Ad )) ;

= Cs + Cd - Cd*As - Cd + Cd*As - Cs +Cs*Ad ;

= Cs*Ad ;

= Cs * Ad + Cd * 0 ; (化标准式)

所以  Fs = Ad ;   Fd = 0;

DstIn 也不能通过简单的光学叠加而形成，跟SrcIn一样，要实现这种效果，可以通过其他渠道来生成，方法很多，其中有一种简单的方法，如下图所示

DstIn = DstOver - DstOut - SrcOut;

所以 DstIn  = (Cs * ( 1 - Ad ) + Cd) - (Cd * ( 1 - As )) - (Cs * ( 1 - Ad )) ;

= Cs - Cs*Ad + Cd - Cd + Cd*As - Cs +Cs*Ad ;

= Cd*As ;

= Cs *0+ Cd *As; (化标准式)

所以  Fs = 0 ;   Fd = As;

SrcAtop = SrcOver - SrcOut;

= (Cs + Cd * ( 1 - As )) - (Cs * ( 1 - Ad )) ;

= Cs + Cd - Cd*As - Cs +Cs*Ad ;

= Cs*Ad + Cd - Cd *As

= Cs*Ad + Cd * (1 - As)

所以  Fs = Ad ;   Fd = 1 - As;

DstATop = DstOver - DstOut;

= (Cs * ( 1 - Ad ) + Cd) - (Cd * ( 1 - As )) ;

= Cs - Cs*Ad + Cd - Cd + Cd*As ;

= Cs - Cs*Ad + Cd*As

= Cs * ( 1 - Ad ) + Cd * As

所以 Fs = (1-Ad)  Fd = As

Xor的组成形式就有很多方式了，如下面三幅图，我们分别来推出标准公式中的混合因子：

= (Cs * ( 1 - Ad ) + Cd) - (Cd*As)

= Cs - Cs*Ad + Cd - Cd*As

= Cs * (1-Ad) + Cd * (1-As)

所以Fs =(1-Ad)       Fd = (1-As)

= (Cs + Cd * ( 1 - As )) - (Cs*Ad)

= Cs + Cd - Cd * As - Cs*Ad

= Cs *(1-Ad)+ Cd *(1-As)

所以Fs =(1-Ad)Fd = (1-As)

= Cd * ( 1 - As ) +  Cs * ( 1 - Ad )

= Cs *(1-Ad)+ Cd *(1-As)

所以Fs =(1-Ad)Fd = (1-As)

以上三种形式均可得出  Fs =(1-Ad)Fd = (1-As) 。

以下混合模式大部分来自于流行图像处理软件中的模式，有关PhotoShop中模式的解读，请移步 PS混合模式传送门

这个模式比较前景层和背景层的象素（或比较前景层或背景层的色彩通道），并将较暗的象素点（ 即前景层和背景层相同位置处灰度值较小的 ）放入输出结果（ 指两个图层混合后得到的结果 ）中。Photoshop、Paint Shop Pro、PhotoLine 和 GIMP分别比较不同颜色通道中的象素，每个象素点相邻的象素点不参与比较（即前景层的红色通道和背景层的红色通道进行比较，其中灰度值较小的象素点将被保留到输出结果的红色通道中）。各个通道中，通过比较，灰度值较小的象素点将被保留下来，放入到输出结果中。因此，象素混合在一起是很普遍的（输出结果中，一个象素点的色阶值可以看成是由RGB三个通道中对应位置处象素点的灰度值确定的，而这RGB通道中的象素点有的来自前景层，有的来自背景层 ），例如，输出结果中，红色通道中的象素点来自于前景层，而其在绿色和蓝色通道中的象素点则来自背景层。相反，Photo-Paint 同时比较三个通道中象素的灰度值，将三个通道中至少一个通道的灰度值最小的象素点保留到结果中，最终，所有的通道被转换到输出结果中（同时分别比较背景层和前景层的RGB通道，如果前景层R通道中某个象素点的灰度值，是六个通道中相应位置处象素点灰度值最小的，则将前景层该位置处象素点的三个通道中对应的象素点放入输出结果的对应通道中，即由一个通道中最暗的那个象素点来决定将那个层对应位置处的象素点被保留到输出结果中 ）。当两个图层的最小值相等的时候，使用前景图层的数值。 还有第三种计算方式：Picture Publisher 和PhotoImpact 不是分开比较RGB值，而是比较它们的综合灰度值（例如常用的[305911]计算方式）, 和在Photo-Paint里一样，最后的结果取前景图层值或者背景图层中象素的灰度值。

任何颜色都有红、绿、蓝三原色组成，假如原来某点的颜色为RGB(R，G，B)，那么，我们可以通过下面几种方法，将其转换为灰度：

1.浮点算法：Gray=R*0.3+G*0.59+B*0.11

2.整数方法：Gray=(R*30+G*59+B*11)/100

3.移位方法：Gray =(R*28+G*151+B*77)>>8;

4.平均值法：Gray=（R+G+B）/3;

5.仅取绿色：Gray=G；

Darken常用的几种处理算法有

1）Cr = min(Cs,Cd);            Ar = 1  

2)  Cr = [ min(Cs-r,Cd-r), min(Cs-g,Cd-g),min(Cs-b,Cd-b)]          Ar = 1   

3)  Cr = Cs + Cd * ( 1 - As ) ,即SrcOver或DstOver ,其中，灰度值最小的像素作为Src在最上层，进行混合处理（注意：不是整个图层至于上方或下方，而是单个像素）。 

有关Lighten的算法，跟Darken是相反的，Lighten是获取灰度比较亮的那个像素，所以根据上述Darken算法可以直接得出Lighten的算法

1）Cr = max(Cs,Cd);

2)  Cr = [ max(Cs-r,Cd-r), max(Cs-g,Cd-g),max(Cs-b,Cd-b)]

3)  Cr = Cs + Cd * ( 1 - As ) ,即SrcOver或DstOver ,其中，灰度值最大的像素作为Src在最上层，进行混合处理（注意：不是整个图层至于上方或下方，而是单个像素）。

将上下两层图层像素颜色进行乘法计算，获得灰度级更低的颜色而成为合成后的颜色，图层合成后的效果简单地说是低灰阶的像素显现而高灰阶不显现(即深色出现，浅色不出现，黑色灰度级为0，白色灰度级为255)，该公式在pre-multiplied上讨论。

Cr = Cs * Cd ;        Ar = Ca * Da;  

首先把两层图像的像素值取互补数，然后将它们相乘，最后再取互补数。这和正片叠底得到的结果是相反的。它会得到一个更亮的图像，该公式在pre-multiplied上讨论。

Cr = 1 - (1-Cs)(1-Cd)                 Ar =  1 - (1-Ca)(1-Da)

本文中示例的Demo已上传GitHub，有兴趣的同学可以下载看看。 Demo传送门

以下是PhotoShop中的一些官方定义的效果：（PS官方效果传送门 ）

Normal（正常）

Edits or paints each pixel to make it the result color. This is the default mode. (Normal mode is calledThresholdwhen you’re working with a bitmapped or indexed-color image.)

Dissolve（溶解）

Edits or paints each pixel to make it the result color. However, the result color is a random replacement of the pixels with the base color or the blend color, depending on the opacity at any pixel location.

Behind（背后）

Edits or paints only on the transparent part of a layer. This mode works only in layers with Lock Transparency deselected and is analogous to painting on the back of transparent areas on a sheet of acetate.

Clear（消除）

Edits or paints each pixel and makes it transparent. This mode is available for the Shape tools (when fill region is selected), Paint Bucket tool, Brush tool, Pencil tool, Fill command, and Stroke command. You must be in a layer with Lock Transparency deselected to use this mode.

Darken（变暗）

(B > A) ? A : B

Looks at the color information in each channel and selects the base or blend color—whichever is darker—as the result color. Pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change.

Multiply（正片叠底）

(A * B) / 255

Looks at the color information in each channel and multiplies the base color by the blend color. The result color is always a darker color. Multiplying any color with black produces black. Multiplying any color with white leaves the color unchanged. When you’re painting with a color other than black or white, successive strokes with a painting tool produce progressively darker colors. The effect is similar to drawing on the image with multiple marking pens.

Color Burn（颜色加深）

B == 0 ? B : max(0, (255 - ((255 - A) A) ? B : A

Looks at the color information in each channel and selects the base or blend color—whichever is lighter—as the result color. Pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change.

Screen（滤色）

255 - (((255 - A) * (255 - B)) >> 8))

Looks at each channel’s color information and multiplies the inverse of the blend and base colors. The result color is always a lighter color. Screening with black leaves the color unchanged. Screening with white produces white. The effect is similar to projecting multiple photographic slides on top of each other.

Color Dodge（颜色减淡）

(B == 255) ? B : min(255, ((A > 1) + 64)) * (B / 255) : (255 - ( 2 * (255 - ( (A >> 1) + 64 ) ) * ( 255 - B ) / 255 ));

Darkens or lightens the colors, depending on the blend color. The effect is similar to shining a diffused spotlight on the image. If the blend color (light source) is lighter than 50% gray, the image is lightened as if it were dodged. If the blend color is darker than 50% gray, the image is darkened as if it were burned in. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.

Hard Light（强光）

Overlay(B,A) (A < 128) ? (2 * A * B / 255) : (255 - 2 * (255 - A) * (255 - B) / 255)

Multiplies or screens the colors, depending on the blend color. The effect is similar to shining a harsh spotlight on the image. If the blend color (light source) is lighter than 50% gray, the image is lightened, as if it were screened. This is useful for adding highlights to an image. If the blend color is darker than 50% gray, the image is darkened, as if it were multiplied. This is useful for adding shadows to an image. Painting with pure black or white results in pure black or white.

Vivid Light（亮光）

B < 128 ? ColorBurn(A,(2 * B)) : ColorDodge(A,(2 * (B - 128)))

Burns or dodges the colors by increasing or decreasing the contrast, depending on the blend color. If the blend color (light source) is lighter than 50% gray, the image is lightened by decreasing the contrast. If the blend color is darker than 50% gray, the image is darkened by increasing the contrast.

Linear Light（线性光）

min(255, max(0, ($B + 2 * $A) - 1))

Burns or dodges the colors by decreasing or increasing the brightness, depending on the blend color. If the blend color (light source) is lighter than 50% gray, the image is lightened by increasing the brightness. If the blend color is darker than 50% gray, the image is darkened by decreasing the brightness.

Pin Light（点光）

max(0, max(2 * B - 255, min(B, 2*A)))

Replaces the colors, depending on the blend color. If the blend color (light source) is lighter than 50% gray, pixels darker than the blend color are replaced, and pixels lighter than the blend color do not change. If the blend color is darker than 50% gray, pixels lighter than the blend color are replaced, and pixels darker than the blend color do not change. This is useful for adding special effects to an image.

Hard Mix（实色混合）

(VividLight(A,B) < 128) ? 0 : 255

Adds the red, green and blue channel values of the blend color to the RGB values of the base color. If the resulting sum for a channel is 255 or greater, it receives a value of 255; if less than 255, a value of 0. Therefore, all blended pixels have red, green, and blue channel values of either 0 or 255. This changes all pixels to primary additive colors (red, green, or blue), white, or black.

Difference（色差）

abs(A - B)

Looks at the color information in each channel and subtracts either the blend color from the base color or the base color from the blend color, depending on which has the greater brightness value. Blending with white inverts the base color values; blending with black produces no change.

Exclusion（排除）

A + B - 2 * A * B / 255

Creates an effect similar to but lower in contrast than the Difference mode. Blending with white inverts the base color values. Blending with black produces no change.

Subtract（减去）

(A + B < 255) ? 0 : (A + B - 255)

Looks at the color information in each channel and subtracts the blend color from the base color. In 8- and 16-bit images, any resulting negative values are clipped to zero.

Divide（划分）

Looks at the color information in each channel and divides the blend color from the base color.

Hue（色相）

Creates a result color with the luminance and saturation of the base color and the hue of the blend color.

Saturation（饱和度）

Creates a result color with the luminance and hue of the base color and the saturation of the blend color. Painting with this mode in an area with no (0) saturation (gray) causes no change.

Color（颜色）

Creates a result color with the luminance of the base color and the hue and saturation of the blend color. This preserves the gray levels in the image and is useful for coloring monochrome images and for tinting color images.

Luminosity（明度）

Creates a result color with the hue and saturation of the base color and the luminance of the blend color. This mode creates the inverse effect of Color mode.

Lighter Color（亮色）

Compares the total of all channel values for the blend and base color and displays the higher value color. Lighter Color does not produce a third color, which can result from the Lighten blend, because it chooses the highest channel values from both the base and blend color to create the result color.

Darker Color（暗色）

Compares the total of all channel values for the blend and base color and displays the lower value color. Darker Color does not produce a third color, which can result from the Darken blend, because it chooses the lowest channel values from both the base and the blend color to create the result color.