Shader 中的颜色混合模式（Blend Mode）

在以前的文章中说起了 Shader 中的颜色计算，介绍了一些基本的颜色混合计算，然而在实际的 Shader 滤镜中，简单到加减乘除并不能很好地还原出咱们想要的效果，mix()也只是其中一个选择。html

回顾一下，平时拿到设计师提供的设计稿，都能看到他们在 Photoshop 中应用了大量的图层混合模式，图层混合模式给设计师提供了丰富的图层混合效果，大大减小他们对颜色的操做，更天然地混合不一样图层。git

一样的，当咱们但愿经过 Shader 给图片增长不同的滤镜效果时，图层混合模式将很是适用。github

1、定义

首先咱们先定义下什么是混合模式：markdown

混合模式是图像处理技术中的一个技术名词，不只用于普遍使用的 Photoshop 中，也应用于 After Effect、illustrator、 Dreamweaver、Fireworks 等软件。主要功效是能够用不一样的方法将对象颜色与底层对象的颜色混合。当您将一种混合模式应用于某一对象时，在此对象的图层或组下方的任何对象上均可看到混合模式的效果。 —— 百度百科ide

Adobe 也专门介绍了混合模式的相关知识：helpx.adobe.com/cn/photosho…函数

咱们简单罗列下不一样的混合模式：工具

正常（Normal）：编辑或绘制每一个像素，使其成为结果色。这是默认模式。（在处理位图图像或索引颜色图像时，“正常”模式也称为阈值。）
溶解（Dissolve）：编辑或绘制每一个像素，使其成为结果色。可是，根据任何像素位置的不透明度，结果色由基色或混合色的像素随机替换。

变暗（Darken）：查看每一个通道中的颜色信息，并选择基色或混合色中较暗的颜色做为结果色。将替换比混合色亮的像素，而比混合色暗的像素保持不变。
正片叠底（Multiply）：查看每一个通道中的颜色信息，并将基色与混合色进行正片叠底。结果色老是较暗的颜色。任何颜色与黑色正片叠底产生黑色。任何颜色与白色正片叠底保持不变。当您用黑色或白色之外的颜色绘画时，绘画工具绘制的连续描边产生逐渐变暗的颜色。这与使用多个标记笔在图像上绘图的效果类似。
颜色加深（Color Burn）：查看每一个通道中的颜色信息，并经过增长两者之间的对比度使基色变暗以反映出混合色。与白色混合后不产生变化。
线性加深（Linear Burn）：查看每一个通道中的颜色信息，并经过减少亮度使基色变暗以反映混合色。与白色混合后不产生变化。
深色（Darker Color）：比较混合色和基色的全部通道值的总和并显示值较小的颜色。“深色”不会生成第三种颜色（能够经过“变暗”混合得到），由于它将从基色和混合色中选取最小的通道值来建立结果色。

变亮（Lighten）：查看每一个通道中的颜色信息，并选择基色或混合色中较亮的颜色做为结果色。比混合色暗的像素被替换，比混合色亮的像素保持不变。
滤色（Screen）：查看每一个通道的颜色信息，并将混合色的互补色与基色进行正片叠底。结果色老是较亮的颜色。用黑色过滤时颜色保持不变。用白色过滤将产生白色。此效果相似于多个摄影幻灯片在彼此之上投影。
颜色减淡（Color Dodge）：查看每一个通道中的颜色信息，并经过减少两者之间的对比度使基色变亮以反映出混合色。与黑色混合则不发生变化。
线性减淡/添加（Linear Dodge）：查看每一个通道中的颜色信息，并经过增长亮度使基色变亮以反映混合色。与黑色混合则不发生变化。
浅色（Lighter Color）：比较混合色和基色的全部通道值的总和并显示值较大的颜色。“浅色”不会生成第三种颜色（能够经过“变亮”混合得到），由于它将从基色和混合色中选取最大的通道值来建立结果色。

叠加（Overlay）：对颜色进行正片叠底或过滤，具体取决于基色。图案或颜色在现有像素上叠加，同时保留基色的明暗对比。不替换基色，但基色与混合色相混以反映原色的亮度或暗度。
柔光（Soft Light）：使颜色变暗或变亮，具体取决于混合色。此效果与发散的聚光灯照在图像上类似。若是混合色（光源）比 50% 灰色亮，则图像变亮，就像被减淡了同样。若是混合色（光源）比 50% 灰色暗，则图像变暗，就像被加深了同样。使用纯黑色或纯白色上色，能够产生明显变暗或变亮的区域，但不能生成纯黑色或纯白色。
强光（Hard Light）：对颜色进行正片叠底或过滤，具体取决于混合色。此效果与耀眼的聚光灯照在图像上类似。若是混合色（光源）比 50% 灰色亮，则图像变亮，就像过滤后的效果。这对于向图像添加高光很是有用。若是混合色（光源）比 50% 灰色暗，则图像变暗，就像正片叠底后的效果。这对于向图像添加阴影很是有用。用纯黑色或纯白色上色会产生纯黑色或纯白色。
亮光（Vivid Light）：经过增长或减少对比度来加深或减淡颜色，具体取决于混合色。若是混合色（光源）比 50% 灰色亮，则经过减少对比度使图像变亮。若是混合色比 50% 灰色暗，则经过增长对比度使图像变暗。
线性光（Linear Light）：经过减少或增长亮度来加深或减淡颜色，具体取决于混合色。若是混合色（光源）比 50% 灰色亮，则经过增长亮度使图像变亮。若是混合色比 50% 灰色暗，则经过减少亮度使图像变暗。
点光（Pin Light）：根据混合色替换颜色。若是混合色（光源）比 50% 灰色亮，则替换比混合色暗的像素，而不改变比混合色亮的像素。若是混合色比 50% 灰色暗，则替换比混合色亮的像素，而比混合色暗的像素保持不变。这对于向图像添加特殊效果很是有用。
实色混合（Hard Mix）：将混合颜色的红色、绿色和蓝色通道值添加到基色的 RGB 值。若是通道的结果总和大于或等于 255，则值为 255；若是小于 255，则值为 0。所以，全部混合像素的红色、绿色和蓝色通道值要么是 0，要么是 255。此模式会将全部像素更改成主要的加色（红色、绿色或蓝色）、白色或黑色。

差值（Difference）：查看每一个通道中的颜色信息，并从基色中减去混合色，或从混合色中减去基色，具体取决于哪个颜色的亮度值更大。与白色混合将反转基色值；与黑色混合则不产生变化。
排除（Exclusion）：建立一种与“差值”模式类似但对比度更低的效果。与白色混合将反转基色值。与黑色混合则不发生变化。
减去（Subtract）：查看每一个通道中的颜色信息，并从基色中减去混合色。在 8 位和 16 位图像中，任何生成的负片值都会剪切为零。
划分（Divide）：查看每一个通道中的颜色信息，并从基色中划分混合色。

色相（Hue）：用基色的明亮度和饱和度以及混合色的色相建立结果色。
饱和度（Saturation）：用基色的明亮度和色相以及混合色的饱和度建立结果色。在无 (0) 饱和度（灰度）区域上用此模式绘画不会产生任何变化。
颜色（Color）：用基色的明亮度以及混合色的色相和饱和度建立结果色。这样能够保留图像中的灰阶，而且对于给单色图像上色和给彩色图像着色都会很是有用。
明度（Luminosity）：用基色的色相和饱和度以及混合色的明亮度建立结果色。此模式建立与“颜色”模式相反的效果。

相关的计算公式，也能够直接经过这个在线地址查看混合效果：jamieowen.github.io/glsl-blend/ （图片用的很差，不太好看出效果）oop

2、使用

让人欣喜的是，咱们不用重复的去实现上面的逻辑了，这个 Github 库已经帮咱们实现了大部分的混合模式：github.com/jamieowen/g… Shader 均可以直接看到：post

什么状况下须要图层混合模式？下面举个抖音的例子，能够看到这个视频下面有一个叫作「霓虹」的特效：spa

实际应用到效果是这样的：

那咱们能够怎么来实现呢？首先实现出一个霓虹的效果来，简单来讲就是一个边缘羽化的圆形，以下所示：

// 封装了一个函数
vec3 drawLeaks(vec2 _uv, vec2 position, vec2 speed, vec2 size, vec3 resolution, vec3 color, float t, vec2 range) {
    vec2 leakst = _uv;
    vec2 newsize = normalize(size);
    newsize /= abs(newsize.x) + abs(newsize.y);

    leakst -= .5;                           // 坐标系居中
    leakst.x *= resolution.x/resolution.y;  // 等比例缩放

    leakst.x -= position.x;                 // 位置调整x
    leakst.y -= position.y;                 // 位置调整y

    leakst.x -= speed.x * t * 10.;          // 运动速率x
    leakst.y -= speed.y * t * 10.;          // 运动速率y

    if (newsize.x < newsize.y)              // 大小比例调整
        leakst.y *= newsize.x / newsize.y;  
    if (newsize.x > newsize.y)
        leakst.x *= newsize.y / newsize.x;

    float angle = atan(leakst.y, leakst.x); // 笛卡尔转极坐标
    float radius = length(leakst);

    vec3 finalColor = vec3(smoothstep(range.x, range.y, radius))*color*(1.-t);   // 预设size&上色
    return finalColor;
}

void main() {
    vec3 leakColor = drawLeaks(myst, vec2(.0, .0), vec2(.0, .0), 
                        vec2(.0, .0), iResolution,
                        vec3(166./255., 66./255., 65./255.)*1.5, 0., vec2(.3, 0.));

    gl_FragColor = vec4(leakColor, 1.);
}
复制代码

效果以下：

这个时候，这个效果能够理解为 PS 中的一个「图层」，咱们把它叫作混合层（Blend Layer），而后咱们须要增长一个基础层（Base Layer）用于混合，咱们先试试加法：

// 这里只展现主要代码
void main() {
    vec3 leakColor = drawLeaks(myst, vec2(.0, .0), vec2(.0, .0), 
                        vec2(.0, .0), iResolution,
                        vec3(166./255., 66./255., 65./255.)*1.5, 0., vec2(.3, 0.));
    
    vec3 texelColor = texture2D(texure, myst).rgb;
    
    gl_FragColor = vec4(leakColor + texelColor, 1.);
}
复制代码

看样子还行啊，可是若是 Base Layer 是白色背景，则会出现一些问题：

因为使用了加法，符合加色系的规则，颜色的混合最终会往最亮的颜色靠拢，当任何颜色跟一个趋近于白色底相加，都会愈来愈亮，失去了原来的滤镜颜色。那加法不能同时适用于暗色底和白色底。乘法呢？若是要用乘法，首先必须把 Blend Layer 改为白色底（不然任何颜色和黑色底相乘都是黑色）：

void main() {
    vec3 leakColor = drawLeaks(myst, vec2(.0, .0), vec2(.0, .0), 
                        vec2(.0, .0), iResolution,
                        vec3((255.-255.)/255., (255.-95.)/255., (255.-32.)/255.), 0., vec2(.3, 0.));

    gl_FragColor = vec4(leakColor, 1.);
}
复制代码

而后使用乘法（虽然不太好看，但好歹是上了色）：

再看看暗色底是什么表现：

简单来讲，经过乘法计算颜色其实是减色系的操做。颜色的混合只会愈来愈暗，滤镜并不能带来更鲜活的表现。因此不论是加法或是乘法，都没有办法将滤镜和底图很好的融合起来。因此这个时候，图层混合模式才这么重要。

当设计师拿到 Blend Layer 和 Base Layer，他们会坚决果断地给二者添加一个「滤色」的混合模式，为何他们会这么作，每每是源于对这个混合模式的了解和平常实践，做为工程师，达不到他们的第六感，咱们不妨看看「滤色」的定义：

查看每一个通道的颜色信息，并将混合色的互补色与基色进行正片叠底。结果色老是较亮的颜色。用黑色过滤时颜色保持不变。用白色过滤将产生白色。此效果相似于多个摄影幻灯片在彼此之上投影。

滤色的实现是这样的：

float blendScreen(float base, float blend) {
	return 1.0-((1.0-base)*(1.0-blend));
}
复制代码

简单来讲，滤色就是把两个图层中较暗的颜色去掉，取较亮的颜色。咱们不妨试试：

float blendScreen(float base, float blend) {
	return 1.0-((1.0-base)*(1.0-blend));
}

vec3 blendScreen(vec3 base, vec3 blend) {
	return vec3(blendScreen(base.r,blend.r),blendScreen(base.g,blend.g),blendScreen(base.b,blend.b));
}

void main() {
    vec3 leakColor = drawLeaks(myst, vec2(.0, .0), vec2(.0, .0), 
                        vec2(.0, .0), iResolution,
                        vec3((255.-255.)/255., (255.-95.)/255., (255.-32.)/255.), 0., vec2(.3, 0.));

    vec3 texelColor = texture2D(texture, myst).rgb;
    gl_FragColor = vec4(blendScreen(texelColor, leakColor), 1.);
}
复制代码

这个效果是符合预期的。实际上咱们在抖音上获得的「霓虹」效果也是这样：浅色底效果较不明显，而深色底较明显。因此能够简单到猜想：抖音的这个特效一样是经过滤色的方式来添加霓虹效果。

3、适用场景

上面经过一个简单的案例来讲明了混合模式的使用，实际上经过这些图层混合模式，咱们能够获得一批能直接上线的滤镜效果了。然而并不是全部状况都适合图层混合模式，好比在转场上，mix()会更适合于两个图层之间的过渡融合。

图层混合模式更适合于那种局部效果+背景纯色须要应用在具体图像上的状况。好比上面是一个案例，另一个案例就是漏光（Light Leak）：

或者镜头光晕（Lens flare）：