Shader shape function: draw a ring with alpha transparency

Questions & Answers
,
1

Gg Shader noob question!
I am drawing a simple ring shape, with shaderlab code. I have innner and outer parameters and I just use a step function to switch the alpha from 0 to 1 and back to 0. This works but it’s very abrupt, how can I soften the edges? I’m thinking smooth step but I’m not sure how that works in this context.

203331-sshot.jpg
203331-sshot.jpg749×321 11.4 KB

fixed4 frag(v2f i) : SV_Target  {
  //_Inner & _Outer are set in parameters

   float alpha = step(_Inner, length(i.position.xy)) - step( _Outer, length(i.position.xy));

   fixed3 finalColor = fixed3(_RingColor.rgb) ;
   return fixed4(finalColor, alpha);
}
2

To soften the edges of the ring, you can use the smoothstep function instead of the step function. The smoothstep function provides a smooth transition between two values, rather than a sudden switch as with the step function.

Here’s an example of how you could use the smoothstep function in your shader:

fixed4 frag(v2f i) : SV_Target  {
    // _Inner and _Outer are set in parameters

    // Calculate the alpha value using smoothstep
    float alpha = smoothstep(_Inner, _Outer, length(i.position.xy));

    fixed3 finalColor = fixed3(_RingColor.rgb) ;
    return fixed4(finalColor, alpha);
}

This will give you a smooth transition from full transparency to full opacity as the distance from the center of the ring increases.

3

omg prefect thank you! It doesn’t draw the ring inner & outer but I made some minor changes. Thanks !
203332-sshot1.jpg

Shader "Unlit/circleShader"
{
    Properties
    {  
        _Inner("inner diameter", Range(0, 0.5)) = 0.05
        _Outer("outer diameter", Range(0, 0.5)) = 0.5
        _Soften("soften edge", Range(0, 0.05)) = 0.1
        _RingColor("Ring color", COLOR) = (1, 1, 1, 1)
    }
    SubShader
    {
        Tags { "RenderType"="Transparent" }
        LOD 100
        Blend SrcAlpha OneMinusSrcAlpha
        Pass
        {
            CGPROGRAM
            #pragma vertex vert
            #pragma fragment frag
            #include "UnityCG.cginc"

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

            struct v2f
            {
                float2 uv : TEXCOORD0;
                float4 vertex : SV_POSITION;
                float4 position: TEXCOORD1;
            };
            
            half _Outer;
            half _Inner;
            half _Soften;
            float4 _RingColor;
            

            v2f vert (appdata v)
            {
                v2f o;
                o.vertex = UnityObjectToClipPos(v.vertex);
                o.position = v.vertex;
                return o;
            }

            fixed4 frag(v2f i) : SV_Target
            {
                // Calculate the alpha value using smoothstep
                float alpha = smoothstep(_Inner, _Inner + _Soften, length(i.position.xy)) - smoothstep(_Outer, _Outer + _Soften, length(i.position.xy));
                fixed3 finalColor = fixed3(_RingColor.rgb) ;
                return fixed4(finalColor, alpha);
            }
            ENDCG
        }
    }
}