- Home /
How to render semi-transparent rings for outline of circle wipe
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 by andrew-lukasik · Apr 10 at 10:07 PM
Here is a shader with decent degree of control over how it's drawn.
note: decal texture's
Wrap Mode
should be set toClamp
to avoid tilling ( example )
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
}
}
}
Thank you for helping me over and over again. Thanks to you, I suceeded in implementing my ideal circle wipe. Without your help, it could not have been achieved. I so appreciate you and your help. Also I am sorry that I directly consulted my personal problem twice.
Your answer
Follow this Question
Related Questions
Anti-aliasing and flipping texture 0 Answers
Slower performance and no optimised anti-aliasing since Unity 5.1 0 Answers
Anti-aliasing not working in Unity 2018.2 editor 2 Answers
URP 7.5.1 + android 9 + msaa is worst 0 Answers
Deffered Shading and MSAA 1 Answer