Wayback Machinekoobas.hobune.stream
May JUN Jul
Previous capture 14 Next capture
2021 2022 2023
2 captures
13 Jun 22 - 14 Jun 22
sparklines
Close Help
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
1
Question by kotaromarunouchi · Apr 08 at 08:22 AM · shadertransitionblurblurryanti-aliasing

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.

An ideal example

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
         }
     }
 }



alt text

ss5.png (299.7 kB)
Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

1 Reply

· Add your reply
  • Sort: 
avatar image
1
Best Answer

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 1

  • change _FadeColour default alpha to 1 ( (1,1,1,1))

Comment
Add comment · Show 3 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image kotaromarunouchi · Apr 09 at 01:57 AM 1
Share

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.

avatar image andrew-lukasik kotaromarunouchi · Apr 09 at 09:46 AM 0
Share

You're welcome : )

avatar image kotaromarunouchi andrew-lukasik · Apr 10 at 01:18 AM 0
Share

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.

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Follow this Question

Answers Answers and Comments

207 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

How to blur the corners of the screen? 3 Answers

Unity Editor text is blurred! Need help please 5 Answers

Fade Shader- One texture fades in, the other fades out 2 Answers

Shaders : Blur only part of the screen 1 Answer

Problem with surface of the object in WebGL and Android builts 0 Answers


Enterprise
Social Q&A

Social
Subscribe on YouTube social-youtube Follow on LinkedIn social-linkedin Follow on Twitter social-twitter Follow on Facebook social-facebook Follow on Instagram social-instagram

Footer

  • Purchase
    • Products
    • Subscription
    • Asset Store
    • Unity Gear
    • Resellers
  • Education
    • Students
    • Educators
    • Certification
    • Learn
    • Center of Excellence
  • Download
    • Unity
    • Beta Program
  • Unity Labs
    • Labs
    • Publications
  • Resources
    • Learn platform
    • Community
    • Documentation
    • Unity QA
    • FAQ
    • Services Status
    • Connect
  • About Unity
    • About Us
    • Blog
    • Events
    • Careers
    • Contact
    • Press
    • Partners
    • Affiliates
    • Security
Copyright © 2020 Unity Technologies
  • Legal
  • Privacy Policy
  • Cookies
  • Do Not Sell My Personal Information
  • Cookies Settings
"Unity", Unity logos, and other Unity trademarks are trademarks or registered trademarks of Unity Technologies or its affiliates in the U.S. and elsewhere (more info here). Other names or brands are trademarks of their respective owners.
  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges