Shader 中的顏色混合模式（Blend Mode）
在之前的文章中提及了Shader 中的顏色計算，介紹了一些基本的顏色混合計算，然而在實際的 Shader 濾鏡中，簡單到加減乘除並不能很好地還原出我們想要的效果， mix() 也只是其中一個選擇。
回顧一下，平時拿到設計師提供的設計稿，都能看到他們在 Photoshop 中應用了大量的圖層混合模式，圖層混合模式給設計師提供了豐富的圖層混合效果，大大減少他們對顏色的操作，更自然地混合不同圖層。
同樣的，當我們希望通過 Shader 給圖片增加不一樣的濾鏡效果時，圖層混合模式將非常適用。
一、定義
首先我們先定義下什麼是混合模式：
混合模式是影象處理技術中的一個技術名詞，不僅用於廣泛使用的 Photoshop 中，也應用於 After Effect、illustrator、 Dreamweaver、Fireworks 等軟體。主要功效是可以用不同的方法將物件顏色與底層物件的顏色混合。當您將一種混合模式應用於某一物件時，在此物件的圖層或組下方的任何物件上都可看到混合模式的效果。 —— 百度百科
Adobe 也專門介紹了混合模式的相關知識： ofollow,noindex">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/ （圖片用的不好，不太好看出效果）
二、使用
讓人欣喜的是，我們不用重複的去實現上面的邏輯了，這個 Github 庫已經幫我們實現了大部分的混合模式： github.com/jamieowen/g… Shader 都可以直接看到：
什麼情況下需要圖層混合模式？下面舉個抖音的例子，可以看到這個視訊下面有一個叫做「霓虹」的特效：
實際應用到效果是這樣的：
那我們可以怎麼來實現呢？首先實現出一個霓虹的效果來，簡單來說就是一個邊緣羽化的圓形，如下所示：
// 封裝了一個函式
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.);
}
複製程式碼
這個效果是符合預期的。實際上我們在抖音上得到的「霓虹」效果也是這樣：淺色底效果較不明顯，而深色底較明顯。所以可以簡單到猜測：抖音的這個特效同樣是通過濾色的方式來新增霓虹效果。
三、適用場景
上面通過一個簡單的案例來說明了混合模式的使用，實際上通過這些圖層混合模式，我們可以得到一批能直接上線的濾鏡效果了。然而並非所有情況都適合圖層混合模式，比如在轉場上， mix() 會更適合於兩個圖層之間的過渡融合。
圖層混合模式更適合於那種 區域性效果+背景純色 需要應用在具體影象上的情況。比如上面是一個案例，另外一個案例就是漏光（Light Leak）：
或者鏡頭光暈（Lens flare）：
