How to render semi-transparent rings for outline of circle wipe

Question

A goal for this question is that outline of my circle wipe improves like left exmple in the image below. So far outline of my circle wipe does not have two clear semi-transparent rings. If you know how to render them like the left image, would you give me some advice?

Here's the shader I use.

 Shader "Unlit/CircleWipe"
 {
     Properties
     {
         _MainTex ("Texture", 2D) = "white" {}
         _FadeTex("Fade Texture", 2D) = "white" {}
         _Radius("Wipe Radius", Float) = 0
         _Horizontal("Horizontal ratio", Float) = 1
         _Vertical("Vertical ratio", Float) = 1
         _RadiusSpeed("Radius Speed", Float) = 1
         _CenterX("Center X",  Range(0.0, 1.0)) = 0.5
         _CenterY("Center Y",  Range(0.0, 1.0)) = 0.5
         [HDR]_FadeColour("Fade Colour", Color) = (1,1,1,0)
         _Offset("Offset", Vector) = (0,0,0,0)
     }
     SubShader
     {
         Tags { "RenderType" = "Transparent" "Queue" = "Transparent" }
         Blend SrcAlpha OneMinusSrcAlpha
 
         Pass
         {
             CGPROGRAM
             #pragma vertex vert
             #pragma fragment frag
             #pragma multi_compile_fog
 
             #include "UnityCG.cginc"
 
             struct appdata
             {
                 float4 vertex : POSITION;
                 float2 uv : TEXCOORD0;
             };
 
             struct v2f
             {
                 float2 uv : TEXCOORD0;
                 UNITY_FOG_COORDS(1)
                 float4 vertex : SV_POSITION;
             };
 
             sampler2D _MainTex;
             sampler2D _FadeTex;
             float4 _MainTex_ST;
             float _Radius;
             float _Horizontal;
             float _Vertical;
             float _RadiusSpeed;
             float _CenterX;
             float _CenterY;
             fixed4 _FadeColour : COLOR;
             float4 _Offset;
 
             v2f vert (appdata v)
             {
                 v2f o;
                 o.vertex = UnityObjectToClipPos(v.vertex);
                 o.uv = TRANSFORM_TEX(v.uv, _MainTex);
                 UNITY_TRANSFER_FOG(o,o.vertex);
                 return o;
             }
 
             fixed4 frag(v2f i) : SV_Target
             {
                 fixed4 topCol = tex2D(_MainTex , i.uv);
                 fixed4 fadeCol = _FadeColour * tex2D(_FadeTex , i.uv);
                 float2 center = float2(_CenterX , _CenterY);
                 float2 pos = i.uv.xy;
                 float dist = length((pos - center) * float2(_Vertical , _Horizontal));
                 return lerp(fadeCol , topCol , smoothstep(_Radius , _Radius + 1.1 , dist));
             }
             ENDCG
         }
     }
 }

Answer 1

Here is a shader with decent degree of control over how it's drawn.

note: decal texture's Wrap Mode should be set to Clamp to avoid tilling ( example )

alt text

 Shader "Unlit/CircleWipe" {
 Properties
 {
     [Header(TOP)]
     [NoScaleOffset]_MainTex ("Texture", 2D) = "white" {}
     [HDR] _TopTint("Tint", Color) = (1,1,1,1)
 
     [Space][Header(BOTTOM)]
     [NoScaleOffset]_BottomTex("Texture", 2D) = "white" {}
     [HDR] _BottomTint("Tint", Color) = (1,1,1,1)
 
     [Space][Header(DECAL)]
     [NoScaleOffset]_DecalTex("Texture", 2D) = "white" {}
     [HDR] _DecalTint("Tint", Color) = (1,1,1,0)
     _DecalScale("Scale", Float) = 1
     
     [Space][Header(BLEND)]
     _RadiusInner("Inner Radius", Float) = 0.1
     _RadiusOuter("Outer Radius", Float) = 0.2
     [HDR] _BlendColour("Color", Color) = (1,1,1,1)
     
     [Space][Header(RATIO)]
     _Horizontal("Horizontal", Float) = 1
     _Vertical("Vertical", Float) = 1
 
     [Space][Header(CENTER)]
     _CenterX("X", Range(0,1)) = 0.5
     _CenterY("Y", Range(0,1)) = 0.5
 }
 SubShader
 {
     Tags { "RenderType" = "Transparent" "Queue" = "Transparent" }
     Blend SrcAlpha OneMinusSrcAlpha
 
     Pass
     {
         CGPROGRAM
         #pragma vertex vert
         #pragma fragment frag
         #include "UnityCG.cginc"
 
         struct appdata
         {
             half4 vertex : POSITION;
             half2 uv : TEXCOORD0;
         };
 
         struct v2f
         {
             half2 uv : TEXCOORD0;
             half4 vertex : SV_POSITION;
         };
 
         sampler2D _MainTex, _BottomTex, _DecalTex;
         half4 _TopTint : COLOR, _BottomTint : COLOR, _BlendColour : COLOR, _DecalTint : COLOR;
         half _CenterX, _CenterY, _RadiusInner, _RadiusOuter, _Horizontal, _Vertical, _DecalScale;
 
         v2f vert ( in appdata v )
         {
             v2f o;
             o.vertex = UnityObjectToClipPos( v.vertex );
             o.uv = v.uv;
             return o;
         }
 
         half arch ( half t ) { return t * ( 1.0 - t ); }
 
         fixed4 frag ( in v2f i ) : SV_Target
         {
             half2 center = fixed2( _CenterX , _CenterY );
             half2 pos = i.uv.xy;
             half2 dir = (pos-center) / fixed2(_Horizontal,_Vertical);
             half t = smoothstep( _RadiusInner , _RadiusOuter , length(dir) );
 
             fixed4 ctop = _TopTint * tex2D( _MainTex , i.uv );
             fixed4 cbottom = _BottomTint * tex2D( _BottomTex , i.uv );
             half2 uvdecal = (i.uv-0.5) /_DecalScale/fixed2(_Horizontal,_Vertical) +0.5 -(center-0.5)/_DecalScale/fixed2(_Horizontal,_Vertical);
             fixed4 cdecal = _DecalTint * tex2D( _DecalTex , uvdecal );
             
             fixed4 ctopbottom = lerp( cbottom , ctop , t );
             fixed4 ctopbottomblend = lerp( ctopbottom , _BlendColour , arch(t) );
             fixed4 ctopbottomblenddecal = lerp( ctopbottomblend , cdecal , cdecal.a );
 
             return ctopbottomblenddecal;
         }
         ENDCG
     }
 }
 }

How to render semi-transparent rings for outline of circle wipe

1 Reply

Your answer

Follow this Question

Related Questions