Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

2D Image Fill Shader

Hi, i'm new to writing shaders, so i would appreciate your help and patience.

I'm currently working on a project in a small team and for specific reasons we need to use Sprite Renderes for our images.

We want to "fade in" the images like you can do with the Image Type Filled Component on the Canvas UI Image.

We first tried to animate the images over masks, but that is kind of performance heavy so we thought about shaders.

Unfortunately we have no clue on how to recreate this effect. We found this script for Radial Fill:

but have no idea on how to change it so that we can fill the image on the y-Axis, x-Axis or from inside.

Could anybody link us helpful references or even help us?

Thank you in advance for your help!

(P.S. Sorry if my english isn't correct 😊 )

Best Answer

  • MouledouxMouledoux Member
    Accepted Answer

    Do you want a fade, or a fill? Because they are different.

    The example you provided is most likely a cutout shader, and you can make them pretty easy with the shader graph. In there, you can use math to get X and Y 'fades' for the cut out, even radial ones, or you could provide your own textures for custom fills, like spirals, or waves.

    This video is old, and doesn't use shader graph, but you can see how you would go about setting up something like what you are describing.


  • We would like to have a fill effect.

    Is there a difference between shader graph and "writing shaders" in terms of performance (or...) ?

    And thank you for the video, it really helped us to understand the basic concept and setting more. 🤗

  • No, at least not once you build.

    Shader graph just generates shader, under the hood, they're both the same.

  • Okay, thanks a lot. :)

Sign In or Register to comment.