unity3d - 统一 : UI Image alpha overlap

Question

问题:当 CanvasGroup 修改它们的透明度时， Canvas 中的两个对象彼此混合。
图中示例:场景背景为深色， Canvas 上有绿色和红色图像。如果两个对象的不透明度小于 100%，它们将混合。
左:不透明度为 100%；
中心:不透明度为 50%，图像混合(实际结果)；
右:不透明度为 50%，图像不混合(预期结果)



如何防止根据图像的顺序混合图像？我知道基于纹理的解决方案(第二个相机渲染到放置在 Canvas 中的纹理)，但这似乎有点矫枉过正。还有其他方法吗？着色器，通过代码更改，还是其他什么？

统一 2019.3.0f1

Answer 1

分辨率:一个新的着色器及其 Material ，以及一种额外的 Material 。在某些情况下可以避免创建着色器!
Unity 中的着色器有一个名为 Stencil 的工具。此工具维护可用于丢弃像素的像素缓冲区。
CanvasImageMask 着色器:它是默认 UI 图像着色器的克隆，除了模板调整和为舒适工作所做的微小添加。当蒙版渲染发生时，Stencil 会将像素缓冲区的值设置为 1 在它实际绘制的地方。第二个着色器对此变化使用react并丢弃该位置的新像素。请记住，具有此类 Material (包含 CanvasImageMask 着色器)的对象应首先出现在 Canvas 中，因为在渲染期间它们将修改像素缓冲区，以便稍后使用。
所有应该被 mask 的对象都必须使用另一种基于带有模板调整的默认 UI 图像着色器的 Material 。此 Material 将丢弃缓冲区值等于或高于 1 的任何像素。
请注意，这项工作是可以避免的。开发人员可以创建 2 个 Material (默认图像 Material 的克隆)，并在编辑器中修改 Stencil 设置。但是这个解决方案有一个问题:如何创建这样一个不应该绘制的蒙版？最好的解决方案是将 alpha channel 设置为 1(共 255 个)。但是如果 Canvas 使用的是 CanvasGroup，像素可以提前丢弃， mask 将不起作用。
CanvasImageMask 着色器隐藏 Stencil 设置(方便)并添加一个标志，它将隐藏蒙版中的所有像素，但仍然可以完成工作。
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，基于这个着色器创建 Material ，然后在 Canvas 上放置一个图像。创建另一种 Material ，基于默认着色器，将 Stencil ID 设置为 1，并将 Stencil compare 设置为 5(又名“Greater”)。将此 Material 分配给 Canvas 上蒙版对象之后的任何其他图像。

引用文献:

Stencil tool in Unity

Source of Default UI image shader (read the desc)

Soft mask in UI.没有解决我的问题，但它是一个不错的引用。