渲染颜色透明度异常分析 Unity RenderTexture

解决 Unity Canvas 相机 RenderTarget 渲染颜色透明度异常的问题

问题

重现场景

1. 新建一个 Canvas-RT , Canvas Render Mode 改为 Screen Space - Camera 。

1. 为 Canvas-RT 添加一个 RawImage-Origin 对象，修改颜色透明度为 120 。

1. 修改 Camera-RT 中的 Target Texture , 改为 RT 纹理。

1. 再新建一个 Canvas ，并添加一个 RawImage-RT , Texture 使用 RT 。

1. 为 Canvas 添加一个 RawImage-Compare 对象，修改颜色透明度为 120 。

1. 在 Game View 中对比，发现颜色不同。

分析

UI-Default.shader

先在 https://unity.cn/releases 中下载内置 shader

找到 UI-Default.shader , 这里对需要的关键代码做出截取。

      
      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
• 输出颜色结果为 (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 为默认白色(1,1,1,1) ，颜色 color 的值为 (1,1,1,0.5)
2. 经 UI-Default.shader 中的 frag 输出为 (0.5,0.5,0.5,0.5)
3. 相机 Camera-RT 的 clearcolor 为 (0,0,0,0) ， shader 的混合因子为 Blend One OneMinusSrcAlpha
4. 第2步得到的颜色与第三步混合的结果为 (0.5,0.5,0.5,0.5) ， 此结果为 RT 的纹理
5. 展示图 RawImage-RT 中的纹理 texture 为第4步的中 RT 的纹理，颜色 color 的值为 (1,1,1,1)
6. 经 UI-Default.shader 中的 frag 输出为 (0.25,0.25,0.25,0.5)
7. 相机 Main Camera 的 clearcolor 为 (0,0,0,0) ， shader 的混合因子为 Blend One OneMinusSrcAlpha ，混合输出为  (0.25,0.25,0.25,0.5)

解决

预期为第二步的结果。究其原因，是在第6步的时候，RT 的纹理 RGB 已经乘上了透明度，在此步骤计算颜色值时，又再乘了纹理的透明度，导致最终输出颜色异常。

针对此方案，只需对 RawImage-RT 的 shader 进行修改，去掉乘以纹理的透明度，关键代码改成如下所示

      
      color.rgb *= IN.color.a;

    

特别要注意混合模式，若混合因子为 Blend SrcAlpha OneMinusSrcAlpha 时，与相机混合时，结果会多乘以Alpha。

小结

当颜色显示出现异常时，可以从以下两个方式着手分析。

• 混合模式
• frag 颜色计算

希望对大家所帮助，欢迎关注白玉无冰。欢迎留言讨论。

点击 “阅读原文”查看精选导航

“点赞“ ”在看” 鼓励一下▼