渲染顏色透明度異常分析 Unity RenderTexture

解決 Unity Canvas 相機(jī) RenderTarget 渲染顏色透明度異常的問題

問題

重現(xiàn)場(chǎng)景

1. 新建一個(gè) Canvas-RT , Canvas Render Mode 改為 Screen Space - Camera 。

1. 為 Canvas-RT 添加一個(gè) RawImage-Origin 對(duì)象，修改顏色透明度為 120 。

1. 修改 Camera-RT 中的 Target Texture , 改為 RT 紋理。

1. 再新建一個(gè) Canvas ，并添加一個(gè) RawImage-RT , Texture 使用 RT 。

1. 為 Canvas 添加一個(gè) RawImage-Compare 對(duì)象，修改顏色透明度為 120 。

1. 在 Game View 中對(duì)比，發(fā)現(xiàn)顏色不同。

分析

UI-Default.shader

先在 https://unity.cn/releases 中下載內(nèi)置 shader

找到 UI-Default.shader , 這里對(duì)需要的關(guān)鍵代碼做出截取。

      
      Blend One OneMinusSrcAlpha

fixed4 frag(v2f IN) : SV_Target
{
    half4 color = IN.color * (tex2D(_MainTex, IN.texcoord) + _TextureSampleAdd);
    color.rgb *= color.a;
    return color;
}


    

• 混合因子為 One OneMinusSrcAlpha
• 輸出顏色結(jié)果為 (c.r*t.r*c.a*t.a, c.g*t.g*c.a*t.a, c.b*t.b*c.a*t.a, c.a*t.a)

渲染過程

1. 原圖 RawImage-Origin 的紋理 texture 為默認(rèn)白色(1,1,1,1) ，顏色 color 的值為 (1,1,1,0.5)
2. 經(jīng) UI-Default.shader 中的 frag 輸出為 (0.5,0.5,0.5,0.5)
3. 相機(jī) Camera-RT 的 clearcolor 為 (0,0,0,0) ， shader 的混合因子為 Blend One OneMinusSrcAlpha
4. 第2步得到的顏色與第三步混合的結(jié)果為 (0.5,0.5,0.5,0.5) ， 此結(jié)果為 RT 的紋理
5. 展示圖 RawImage-RT 中的紋理 texture 為第4步的中 RT 的紋理，顏色 color 的值為 (1,1,1,1)
6. 經(jīng) UI-Default.shader 中的 frag 輸出為 (0.25,0.25,0.25,0.5)
7. 相機(jī) Main Camera 的 clearcolor 為 (0,0,0,0) ， shader 的混合因子為 Blend One OneMinusSrcAlpha ，混合輸出為 ?(0.25,0.25,0.25,0.5)

解決

預(yù)期為第二步的結(jié)果。究其原因，是在第6步的時(shí)候，RT 的紋理 RGB 已經(jīng)乘上了透明度，在此步驟計(jì)算顏色值時(shí)，又再乘了紋理的透明度，導(dǎo)致最終輸出顏色異常。

針對(duì)此方案，只需對(duì) RawImage-RT 的 shader 進(jìn)行修改，去掉乘以紋理的透明度，關(guān)鍵代碼改成如下所示

      
      color.rgb *= IN.color.a;

    

特別要注意混合模式，若混合因子為 Blend SrcAlpha OneMinusSrcAlpha 時(shí)，與相機(jī)混合時(shí)，結(jié)果會(huì)多乘以Alpha。

小結(jié)

當(dāng)顏色顯示出現(xiàn)異常時(shí)，可以從以下兩個(gè)方式著手分析。

• 混合模式
• frag 顏色計(jì)算

希望對(duì)大家所幫助，歡迎關(guān)注白玉無冰。歡迎留言討論。

點(diǎn)擊 “閱讀原文”查看精選導(dǎo)航

“點(diǎn)贊“ ”在看”?鼓勵(lì)一下▼