Mask Component Not Working with Custom Shader

Unity Engine
, , , , ,
1

Hi everyone,

I’ve created a custom GLSL shader in Unity to have rounded corners on the Image component. The shader works perfectly, except when I add a Mask component to the GameObject. When the Mask component is added, all child objects become transparent.

I’ve read various suggestions online and from ChatGPT, indicating that I need to copy the Stencil settings from the original UI shader. However, implementing these suggestions hasn’t resolved the issue.

this is my code

Shader "Custom/UIRoundedCorners"
{
    Properties
    {
        _MainTex ("Texture", 2D) = "white" {}
        _Color ("Color", Color) = (0, 0.2, 1, 1) // Default color set to blue
        _Size ("Size", Vector) = (900, 300, 0, 0)  // Width and Height
        _EdgeSoftness ("Edge Softness", Float) = 1.0
        _Radius ("Radius", Float) = 30.0
        _UsePercentage ("Use Percentage", Float) = 0.0 // 0 for static, 1 for percentage
        _UseHeight ("Use Height for Percentage", Float) = 0.0 // 0 for width, 1 for height
    }
    SubShader
    {
        Tags{"Queue" = "Transparent"}

        LOD 200

        Blend SrcAlpha OneMinusSrcAlpha // Enable transparency
        ZWrite Off // Disable depth writing for UI elements

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

            struct appdata_t
            {
                float4 vertex : POSITION;
                float2 uv : TEXCOORD0;
            };

            struct v2f
            {
                float4 pos : SV_POSITION;
                float2 uv : TEXCOORD0;
            };

            sampler2D _MainTex;
            float4 _Color; // Color property
            float4 _Size;  // Width and Height
            float _EdgeSoftness;
            float _Radius;
            float _UsePercentage;
            float _UseHeight;

            // The vertex shader
            v2f vert (appdata_t v)
            {
                v2f o;
                o.pos = UnityObjectToClipPos(v.vertex);
                o.uv = v.uv;
                return o;
            }

            // SDF function
            float roundedBoxSDF(float2 CenterPosition, float2 Size, float Radius)
            {
                return length(max(abs(CenterPosition) - Size + Radius, 0.0)) - Radius;
            }

            // The fragment shader
            half4 frag (v2f i) : SV_Target
            {
                // The pixel space scale of the rectangle.
                float2 size = _Size.xy;

                // Assuming the center of the image is the origin (0, 0)
                float2 fragCoord = (i.uv - 0.5) * size;  // Scale UV to pixel coordinates, centering around (0,0)

                // How soft the edges should be (in pixels)
                float edgeSoftness = _EdgeSoftness;

                // The radius of the corners
                float radius = _Radius;

                // Calculate the radius based on percentage if needed
                if (_UsePercentage > 0.5)
                {
                    if (_UseHeight > 0.5)
                    {
                        radius = (_Radius / 100.0) * size.y;
                    }
                    else
                    {
                        radius = (_Radius / 100.0) * size.x;
                    }
                }

                // Calculate distance to edge
                float distance = roundedBoxSDF(fragCoord, size / 2.0f, radius);

                // Smooth the result (free antialiasing)
                float smoothedAlpha = 1.0f - smoothstep(0.0f, edgeSoftness * 2.0f, distance);

                // Return the resultant shape with the selected color
                half4 quadColor = lerp(half4(1.0f, 1.0f, 1.0f, 1.0f), _Color, smoothedAlpha);

                // Only make white areas transparent
                if (abs(_Color.r - 1.0f) < 0.01f && abs(_Color.g - 1.0f) < 0.01f && abs(_Color.b - 1.0f) < 0.01f)
                {
                    // Keep alpha as is if color is white
                    quadColor.a = smoothedAlpha;
                }
                else
                {
                    // Apply alpha blending based on smoothedAlpha
                    quadColor.a *= smoothedAlpha;
                }

                return quadColor;
            }
            ENDCG
        }
    }
}