Dissolve shader

By 09/09/2018 March 20th, 2019 Shaders

A dissolve shader returns a cool effect and it’s easy to make and understand; today we’ll create our one in Unity’s Shader Graph and also write it in HLSL.

Here’s an example of what we’ll create:

Quick post map:


HOW IT WORKS

To create a dissolve shader you have to play with the AlphaClipThreshold value in a “Shader Graph” shader or use the HLSL function called clip.
Basically you tell the shader to not render that pixel, based on a texture and a value that you give.
What you need to know is: the white parts dissolve sooner.

The texture that we’ll use is this one:
febucci dissolve shader graph hlsl unity cloud texture

You can create your own too! Lines, triangles, whatever you want! Just keep in mind the “white parts dissolve sooner“.
I created this in Photoshop, using the filter “Clouds”.

 

If you’re only interested in the Shader Graph one and don’t know about HLSL I suggest to read that part too, since it’s useful to understand how Unity’s Shader Graph works under the hood.


HLSL

In HLSL we use the function clip(x). The clip(x) function discards any pixel with a value less than zero. So, if you call clip(-1) you’re sure that your shader will never render that pixel.
You can read about clip in Microsoft Docs.

PROPERTIES

Our shader needs two properties, the Dissolve Texture and the Amount (which represents our overall progress). As all properties and variables, you can call them however you want.

Remember to add this after your SubShader’s CGPROGRAM (in other words: declare the variables):

Also, remember that their name must match the ones in the Properties section.

FUNCTION

We start our Surface or Fragment function sampling our dissolve texture and getting the red value.
P.s. Our texture is a grayscale, this means that R G and B are equal and you can pick what you prefer. For instance, white is (1,1,1), black is (0,0,0).

In this example I’m using a surface shader:

That’s it! You can apply this process on each shader you have and turn it into a dissolve shader !

Here’s Unity’s default Surface Shader turned into a double-sided dissolve shader:

 


SHADER GRAPH

If we want to create this effect using Unity’s Shader Graph, we have to play with the value AlphaClipThreshold (which doesn’t work like HLSL’s clip(x)). In this example I created a PBR shader.

AlphaClipThreshold tells your shader to discard any pixel that has its Alpha value lower. For example, if it’s 0.3f and your alpha is 0.2f your shader won’t render that pixel.
You can read about AlphaClipThreshold‘s function in unity‘s documentation too: PBR Master Node and Unlit Master Node.

This is the final shader:

febucci dissolve shader graph hlsl unity pbr

We sample our dissolve texture and get the red value, then add it to our Amount value (which is a property I created that represents the overall progress, 1=full dissolve) and connect it to the AlphaClipThreshold. Done!

If you want to apply it on any other shader you already have, just copy the nodes connection on the AlphaClipThreshold (don’t miss the required properties!).
You can also make it double-sided and get an even better result!


DISSOLVE SHADER WITH OUTLINES

What if we want to give it a different feeling adding outlines. Well, here’s round two!

febucci dissolve shader graph hlsl unity outline

We can’t work on “already dissolved pixels” because once they’re discarded… they’re gone forever. We can work on “almost dissolved” values instead!

In HLSL it’s really simple, we have to add a few lines of code after our clip calculations:

Done!

Using Shader Graph the logic is a bit different, here’s the final shader:

febucci dissolve shader graph hlsl unity pbr


You can create really cool effects using a simple dissolve shader; you can play with different textures and values and so on!
Read the part 2: World Reveal Shader.