Unity：UI 图像 Alpha 重叠

Question

问题：当 CanvasGroup 修改其透明度时，画布中的两个对象会相互混合。

图中示例：场景有深色背景，画布有绿色和红色图像。如果两个对象的不透明度均小于 100%，它们将混合。

左：不透明度为 100%；

中：不透明度为50%，图像混合（实际结果）；

右：不透明度为 50%，图像不混合（所需结果）

如何防止图像根据顺序混合？我知道基于纹理的解决方案（第二个相机渲染到放置在画布中的纹理），但这似乎太过分了。还有其他方法吗？着色器、通过代码进行更改还是其他？

统一2019.3.0f1

Answer 1

解决方案：一个新的着色器及其材质，加上一种附加材质。在某些情况下可以避免创建着色器！

Unity 中的 Shaders 有一个名为 Stencil 的工具。该工具维护可用于丢弃像素的像素缓冲区。

CanvasImageMask 着色器：它是默认 UI 图像着色器的克隆，除了模板调整和用于舒适工作的微小添加之外。当遮罩渲染发生时，Stencil 会在实际绘制内容的地方将像素缓冲区的值设置为 1。第二个着色器对此更改做出反应并丢弃该位置中的新像素。请记住，具有此类材质的对象（包含 CanvasImageMask 着色器）应首先出现在 Canvas 中，因为在渲染过程中它们将修改像素缓冲区，以便稍后使用。

所有应被遮罩的对象都必须使用另一种材质，该材质基于带有模板调整的默认 UI 图像着色器。该材质将丢弃缓冲区值等于或高于 1 的所有像素。

请注意，这项工作是可以避免的。开发人员可以创建 2 种材质（默认图像材质的克隆），并在编辑器中修改 Stencil 设置。但这个解决方案有一个问题：如何创建这样一个不应该绘制的蒙版？最好的解决方案是将 Alpha 通道设置为 1（共 255 个）。但如果 Canvas 使用 CanvasGroup，像素可能会被提前丢弃，并且遮罩将不起作用。

CanvasImageMask 着色器隐藏模板设置（方便）并添加一个标志，该标志将隐藏蒙版中的所有像素，但仍然可以完成工作。

画布图像蒙版：

Shader "Custom/CanvasImageMask"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)
        [MaterialToggle(DO_NOT_DRAW)]
        _DoNotDraw ("Do not draw", Float) = 0
    }

    SubShader
    {
        Tags
        { 
            "Queue"="Transparent" 
            "IgnoreProjector"="True" 
            "RenderType"="Transparent" 
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref 1
            Comp Greater
            Pass Replace
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask RGBA

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #pragma shader_feature DO_NOT_DRAW
            #include "UnityCG.cginc"

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                half2 texcoord  : TEXCOORD0;
            };

            fixed4 _Color;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
                OUT.texcoord = IN.texcoord;
#ifdef UNITY_HALF_TEXEL_OFFSET
                OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
                OUT.color = IN.color * _Color;
                return OUT;
            }

            sampler2D _MainTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
                clip (color.a - 0.01);
                #ifdef DO_NOT_DRAW
                    color.a = 0;
                #endif
                return color;
            }
        ENDCG
        }
    }
}

如果你想比较，这里是默认的 UI 图像着色器：

Shader "UI/Default"
{
    Properties
    {
        [PerRendererData] _MainTex ("Sprite Texture", 2D) = "white" {}
        _Color ("Tint", Color) = (1,1,1,1)

        _StencilComp ("Stencil Comparison", Float) = 8
        _Stencil ("Stencil ID", Float) = 0
        _StencilOp ("Stencil Operation", Float) = 0
        _StencilWriteMask ("Stencil Write Mask", Float) = 255
        _StencilReadMask ("Stencil Read Mask", Float) = 255

        _ColorMask ("Color Mask", Float) = 15
    }

    SubShader
    {
        Tags
        { 
            "Queue"="Transparent" 
            "IgnoreProjector"="True" 
            "RenderType"="Transparent" 
            "PreviewType"="Plane"
            "CanUseSpriteAtlas"="True"
        }

        Stencil
        {
            Ref [_Stencil]
            Comp [_StencilComp]
            Pass [_StencilOp] 
            ReadMask [_StencilReadMask]
            WriteMask [_StencilWriteMask]
        }

        Cull Off
        Lighting Off
        ZWrite Off
        ZTest [unity_GUIZTestMode]
        Blend SrcAlpha OneMinusSrcAlpha
        ColorMask [_ColorMask]

        Pass
        {
        CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

            struct appdata_t
            {
                float4 vertex   : POSITION;
                float4 color    : COLOR;
                float2 texcoord : TEXCOORD0;
            };

            struct v2f
            {
                float4 vertex   : SV_POSITION;
                fixed4 color    : COLOR;
                half2 texcoord  : TEXCOORD0;
            };

            fixed4 _Color;

            v2f vert(appdata_t IN)
            {
                v2f OUT;
                OUT.vertex = UnityObjectToClipPos(IN.vertex);
                OUT.texcoord = IN.texcoord;
#ifdef UNITY_HALF_TEXEL_OFFSET
                OUT.vertex.xy += (_ScreenParams.zw-1.0)*float2(-1,1);
#endif
                OUT.color = IN.color * _Color;
                return OUT;
            }

            sampler2D _MainTex;

            fixed4 frag(v2f IN) : SV_Target
            {
                half4 color = tex2D(_MainTex, IN.texcoord) * IN.color;
                clip (color.a - 0.01);
                return color;
            }
        ENDCG
        }
    }
}

总结一下：创建 CanvasImageMask，基于此着色器创建材质，并将图像放置在画布上。创建另一种材质，基于默认着色器，将模板 ID 设置为 1，将模板比较设置为 5（又名“更大”）。将此材质分配给画布上遮罩对象之后的任何其他图像。

参考：

• Unity 中的模板工具
• 默认 UI 图像着色器的来源（阅读说明）
• UI 中的软蒙版。没有解决我的问题，但这是一个相当不错的参考。