Blend混合模式 與 20余種顏色混合模式代碼實現

https://www.bilibili.com/read/cv1874791

 

【UnityShader】Blend混合模式 與 20余種顏色混合模式代碼實現（多圖預警）

 

混合模式

• 可簡單理解為 指上下層圖片相互有重疊時如何取色的一種稱呼
  

• 以下是百科給的解釋 但我們今天要說的是Unity中的顏色混合

混合模式是圖像處理技術中的一個技術名詞，不僅用於廣泛使用的Photoshop中，也應用於AfterEffect、llustrator 、 Dreamweaver、 Fireworks等軟件。主要功效是可以用不同的方法將對象顏色與底層對象的顏色混合。當您將一種混合模式應用於某一對象時，在此對象的圖層或組下方的任何對象上都可看到混合模式的效果。

Blend

• 在編寫shader時我們可以在SubShader或Pass中用Blend與BlendOp指明該對象與下一層色彩如何進行顏色混合
  

• 常用的混合模式通過Blend實現 如下所示

混合模式Blend實現

• 以下為測試圖片
  

測試底圖

測試混合圖

 

• 常用的濾色混合效果如下

濾色混合效果

代碼實現混合模式

• 可以看到Blend已經可以實現很多種混合效果 但這也只是混合模式的一部分
  

• 而接下來才是重點 我們要在Shader中代碼自己實現更多的混合模式

• 以方便實現更多的Shader效果

• 框架代碼如下 還是前幾篇文章一樣 只更改frag中代碼

混合模式shader框架代碼

• 其中MainTex為底圖 BlendTex為要混合的圖片

• 顏色取值為（0-1） A為底圖顏色 B為混合圖顏色 C為輸出圖顏色

frag函數代碼

• 使用step()函數來代替if判斷    

注意：非常多資料 點光效果 使用兩個min函數  實際效果還原應該是一個min一個max函數

所有混合模式代碼實現

 

 

Unity實現與Ps效果對比圖

• 創建材質球 給與材質球該shader 將材質球賦給 Image UI 或者 2D Sprite 
  

• 添加對應貼圖 如下

 

材質球設置

 

• 查看實驗效果（左 Unity實現 右 Ps對比）

 

正常模式

變暗

變亮

正片疊底

濾色

線性加深

線性減淡

疊加

強光

柔光

亮光

點光

線性光

實色混合

排除

差值

深色

淺色

減去

划分

核心代碼

        fixed4 C =A*(1-B.a)+B*(B.a);  //正常透明度混合

 

        fixed4 C =min(A,B); //變暗

 

        fixed4 C =max(A,B); //變亮

 

        fixed4 C =A*B ; //正片疊底

 

        fixed4 C=1-((1-A)*(1-B));//濾色 A+B-A*B

 

        fixed4 C =A-((1-A)*(1-B))/B; //顏色加深

 

        fixed4 C= A+(A*B)/(1-B); //顏色減淡

 

        fixed4 C=A+B-1;//線性加深

 

        fixed4 C=A+B; //線性減淡

        

        fixed4 ifFlag= step(A,fixed4(0.5,0.5,0.5,0.5));

        fixed4 C=ifFlag*A*B*2+(1-ifFlag)*(1-(1-A)*(1-B)*2);//疊加

        

        fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5));

        fixed4 C=ifFlag*A*B*2+(1-ifFlag)*(1-(1-A)*(1-B)*2); //強光

 

        fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5));

        fixed4 C=ifFlag*(A*B*2+A*A*(1-B*2))+(1-ifFlag)*(A*(1-B)*2+sqrt(A)*(2*B-1)); //柔光

        

        fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5));

        fixed4 C=ifFlag*(A-(1-A)*(1-2*B)/(2*B))+(1-ifFlag)*(A+A*(2*B-1)/(2*(1-B))); //亮光

 

        fixed4 ifFlag= step(B,fixed4(0.5,0.5,0.5,0.5)); 

        fixed4 C=ifFlag*(min(A,2*B))+(1-ifFlag)*(max(A,( B*2-1))); //點光  

        

        fixed4 C=A+2*B-1; //線性光

 

        fixed4 ifFlag= step(A+B,fixed4(1,1,1,1));

        fixed4 C=ifFlag*(fixed4(0,0,0,0))+(1-ifFlag)*(fixed4(1,1,1,1)); //實色混合

 

        fixed4 C=A+B-A*B*2; //排除

 

        fixed4 C=abs(A-B); //差值

 

        fixed4 ifFlag= step(B.r+B.g+B.b,A.r+A.g+A.b);

        fixed4 C=ifFlag*(B)+(1-ifFlag)*(A); //深色

 

        fixed4 ifFlag= step(B.r+B.g+B.b,A.r+A.g+A.b);

        fixed4 C=ifFlag*(A)+(1-ifFlag)*(B); //淺色

 

        fixed4 C=A-B; //減去

 

        fixed4 C=A/B; //划分

結語

• 這些公式不用記住 再用到的時候查找挑選合適的方法就好
  

• 項目源代碼：https://github.com/QinZhuo/ShaderLab