Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

Circular Fade In/Out shader

Discussion in 'Shaders' started by nicolasjr, Jul 31, 2015.

  1. nicolasjr

    nicolasjr

    Joined:
    Mar 12, 2014
    Posts:
    11
    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!
     
  2. Peter77

    Peter77

    QA Jesus

    Joined:
    Jun 12, 2013
    Posts:
    6,589
    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.


    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:
    I hope it proves to be useful for you!

    Download example
    http://www.console-dev.de/bin/Unity5_Example_ScreenTransitionEffect.zip
     
    Last edited: Aug 5, 2015
  3. smd863

    smd863

    Joined:
    Jan 26, 2014
    Posts:
    292
    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:

    Code (csharp):
    1. float weight = step(_MaskValue, alpha);
    with
    Code (csharp):
    1. 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.
     
    Ruiko20 and nicolasjr like this.
  4. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    683
  5. nicolasjr

    nicolasjr

    Joined:
    Mar 12, 2014
    Posts:
    11
    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 for your tip on altering the shader!
     
  6. jammyt

    jammyt

    Joined:
    Jul 7, 2014
    Posts:
    12
    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. vetasoft

    vetasoft

    Joined:
    Nov 15, 2013
    Posts:
    432
  8. TBruce

    TBruce

    Joined:
    Jan 18, 2015
    Posts:
    86
    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. TBruce

    TBruce

    Joined:
    Jan 18, 2015
    Posts:
    86
    I fixed the problem by commenting out this line in the shader

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

    pertz

    Joined:
    Jan 8, 2015
    Posts:
    106
    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. TBruce

    TBruce

    Joined:
    Jan 18, 2015
    Posts:
    86
    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.
     
    Michoko and Peter77 like this.
  12. iDRez

    iDRez

    Joined:
    Jan 10, 2013
    Posts:
    2
    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. Ruiko20

    Ruiko20

    Joined:
    Jun 26, 2019
    Posts:
    18
    @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:

    Code (CSharp):
    1.  
    2.         fixed4 frag (v2f i) : SV_Target
    3.         {
    4.             fixed4 col = tex2D(_MainTex, i.uv);
    5.              
    6.             //    Calculate the pixel coordinates of the current point relative to the mask center.
    7.             fixed2 relative = (i.uv - _MaskCenter) * _ScreenParams.xy;
    8.             //  Normalize to the longest screen dimension.
    9.             relative /= max(_ScreenParams.x, _ScreenParams.y);
    10.  
    11.             //    The mask is opaque if further than _FadeRadius from the center.
    12.             fixed transparency = clamp((_FadeRadius - length(relative)) / _Softness, 0, 1);
    13.             col.rgb = lerp(_MaskColor.rgb, col.rgb, smoothstep(0, 1, transparency));
    14.  
    15.             return col;
    16.         }
    17.  
    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. Toscan0

    Toscan0

    Joined:
    Oct 9, 2018
    Posts:
    11
    @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?