- Home /
How to add blurry effect to outline of circle wipe
This is a simple circle wipe used based on where users tap on their screen. I would like to make the outline of the circle blurry. If there is anyone who knows how to add blurry effect, would you give me some advice? Hopefully,
I would like the outline to be as blurry as the one in the link below.
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) = 0
_Vertical("Vertical ratio", Float) = 0
_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
_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 col = tex2D(_MainTex, i.uv);
fixed4 fadeCol = _FadeColour * tex2D(_FadeTex, i.uv);
float3 pos = float3((i.uv.x - _Offset.x - 0.5) / _Vertical,
(i.uv.y - _Offset.y - 0.5) / _Horizontal, 0);
return length(pos) > _Radius / _RadiusSpeed ? col : _FadeColour;
}
ENDCG
}
}
}
Answer by andrew-lukasik · Apr 08 at 11:40 AM
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+0.05 , dist ) );
}
change
_Vertical
&_Horizontal
defaults to 1change
_FadeColour
default alpha to 1 ((1,1,1,1)
)
Thanks to your help, I added a blurry outline to my circle wipe. I really aprecite you and the fact that you helped this shader noob (myself) with your concise and explicit comment and codes.
If there is enough enough spare time, would you take a look at this? In order to implement my ideal circle wipe, I posted a further question to this forum.
LinkLink
I am really sorry for this request. In regard to shader, I am unfamiliar with it and am running out of time.