Circular Fade In/Out shader

Unity Engine
1

Hey guys,

I need to create a shader that mimics an effect similar (or identical) to the one in this video:

(6:56)

To be honest, I’ve tried to find it, but it’s hard for me to even think on how it should be called.

Does anyone have some pointers for that?

Thanks in advance!

Circular growing cracks on a (wall) texture?
2

I created a little example project for you, find the download link at the bottom of this post.

Here is a video that shows the effect(s) in action.

https://www.youtube.com/watch?v=dwjvkv4y0NE

The “Screen Transition” is implemented as an Image Effect, which is using a texture mask to describe where the effect takes place. This provides a way to author lots of different transition effects just by changing the texture and most importantly allows to create new transitions without code, so it’s a perfect fit for artists.

The texture mask has to be a grayscale texture. The pixel intensity represents the progression of the transitioning effect. For example, encoding a vertical gradient from white to black creates a vertical swipe transition. Encoding a glow provides the circle like effect you are looking for. This only gives a range of 256 steps for the transition, but this is often enough. Black pixels in the texture mask blend in first, white pixels last.

The mask texture has to use special settings. If you add a new mask, make sure to apply the following settings in the Texture Inspector window:[quote=Texture Settings]
Texture Type = Advanced
Alpha from Grayscale = True
Bypass sRGB Sample = True
Wrap = Clamp
Format = Alpha8
[/quote]

I hope it proves to be useful for you!

Download example
http://www.console-dev.de/bin/Unity5_Example_ScreenTransitionEffect.zip

10 Likes
3

That is probably how I would do it, too, and it’s nice of Peter for providing an example project.

As an aside, I’ll just mention that in the shader you could replace this line:

float weight = step(_MaskValue, alpha);

with

float weight = smoothstep(_MaskValue - _MaskSpread, _MaskValue, alpha);

Assign the “_MaskSpread” variable in C# just like “_MaskValue” is assigned, and it will give you some more customization for the effect. You can get a much softer transition if you want it, but you will have to drive the effect past 1 (enough to compensate for the additional spread) to fully hide the screen.

2 Likes
4
5

Hey @Peter77 , thank you so much for your very detailed reply and for providing the whole project.
That was really helpful.

And thank you @CaptainScience_1 for your tip on altering the shader!

6

This is great, thanks for posting the sample project!

One thing I was wondering, would it be possible to offset the effect, so for example the Mask1 (with the circular mask closing in), we could make it close in on something not at the centre of the screen. As it’s a screen space effect I guess the offset would need to be done in the shader but I’m not sure how.

If you had the time to help that would be amazing.

7

Hi,

We have a filter called FX Spot on our filter pack CAMERA FILTER PACK, you can easily modify the position and the fading just like your video example.

Hope this help,

Adriano
Vetasoft

8

Thank you Peter for the awesome effects. The shader has one undesired side effect, it rotates and mirrors everything on the screen (with the exception of the UI). This is in Unity 5.6.

TBruce

9

I fixed the problem by commenting out this line in the shader

o.uv.y = 1 - o.uv.y;

10

I have used this shader but it’s flipping the Y for me as well on some devices. I would try the fix proposed by TBruce, but the issue is that I don’t know beforehand in which devices this happens.

Any idea on how can I detect it so I can flip the Y or leave it as it is?

Thanks

11

Hi PedroRtz,

The fix I proposed was just a quick and dirty solution. I have since come up with a better solution per the Unity documentation.

I have posted my fix here.

2 Likes
12

Is it possible to have two cameras and have this transition control mask of the second camera. The effect would look like what you have but instead of it going to a color, it going to the other camera.

13

@Peter77
Thanks for uploading your code!

I tweaked your shader to implement a radial fade effect (your first one) with an adjustable center. However at some point I needed to increase the resolution of Mask1. To fully cover my screen with a good resolution, It needed to be 5.3 MB.

Another way of doing it would be to write a shader without the need for a mask texture:

        fixed4 frag (v2f i) : SV_Target
        {
            fixed4 col = tex2D(_MainTex, i.uv);
              
            //    Calculate the pixel coordinates of the current point relative to the mask center.
            fixed2 relative = (i.uv - _MaskCenter) * _ScreenParams.xy;
            //  Normalize to the longest screen dimension.
            relative /= max(_ScreenParams.x, _ScreenParams.y);

            //    The mask is opaque if further than _FadeRadius from the center.
            fixed transparency = clamp((_FadeRadius - length(relative)) / _Softness, 0, 1);
            col.rgb = lerp(_MaskColor.rgb, col.rgb, smoothstep(0, 1, transparency));

            return col;
        }

The trade off with this is that length() is a rather costly operation. Do you think this is better than using a 5.3 MB texture?

14

@Peter77
Thanks for uploading your code!

I’m using unity 2020.2.4f1 and I can’t use the first 6 masks anyone knows why?
I tried to use older versions (like 2018.4.31f1) and it works.

Any ideia how can i use this in 2020 version?