A part of a traditional Japanese fox mask is disappearing, then more and more become invisible, and finally only the burning pieces remain. That's the DISSOLVING effect. An entire space dimension
can be hidden and revealed partly when needed to make an interesting puzzle game. That's also the DISSOLVING effect. In the game Genshin Impact, an enemy will turn into multiple particles and becomes invisible when getting killed. The God of fire - Ifrit, chooses the similar style
to escape from the battle in the game
Final Fantasy VII: Remake. They are all the DISSOLVING effects. That's the main topic of the 4th episode in the series Unity Shader Graph on
ABALANCHE. Dissolving is one of the most popular
visual effects in Computer Graphics. And there are many ways to implement it in a game. Today I will show you my method, which relies heavily on the Alpha property. The alpha value is commonly stored
in the Alpha channel of the Albedo texture. And it can be multiplied with
the Alpha channel of the Tint color to produce the final Alpha. For objects rendered in the Transparent mode, the Alpha value will decide how transparent each point
on their surface is. A low alpha value means more transparent, vice versa, a high alpha value means less transparent. It's just simple like that. On the screen, I put 2 identical hanging hourglasses
side by side. The front one has low alpha values, so that you can see the sand inside
through the glass layer. On the other hand, the hourglass on the back uses
high alpha value and you can hardly
see through the glass layer. You may see this setup is used quite regularly when we want to render
the glass, the bubbles or the window... The Alpha map can do more than this. Let's take a look at this FENCE. You can see every little details
of the wire clearly. And this beautiful model comes with a cost, it has nearly 700.000 vertices, which is absolutely not ready to be used
in a game. In fact, it will be seen from a far distance
most of the time. Then it's a great idea to use a low-poly version
when being faraway, like this goal net. This trick helps a lot in reducing the polycount, especially when combined with physically-based clothes like the way this goal net
interacts with the ball. In order to see through
the fence & the net, we can set the Alpha values
of the empty areas as 0. But be aware, the pixels with 0-Alpha will still be rendered and cost the power. For cut-out objects
having multiple holes such as the fence or the goal net, we need a better way to not render those pixels. The Alpha value can also be used to decide which pixels should be rendered, which ones should be clipped
(or discarded). In order to do that,
we need a THRESHOLD a number to compare. That number is called
the "Alpha Clip Threshold". Any pixels with the Alpha value
lower than this threshold will be clipped, the rest will be rendered normally. Let's take a look at this grass texture and examine its Alpha channel. With the threshold set at 0,
all the pixels will be rendered so your grass looks like a billboard. At 0.2, any pixels having Alpha
value lower than that will be clip And the grass looks much better. Similarly, if we increase the threshold to 0.9, only the pixels having the Alpha values
greater than that are rendered. Part of the grass blades over here are missing, since they have Alpha values lower than 0.9. So, picking an appropriate threshold
is important. Take this tree
as an example of how the Alpha Clip Threshold should be used. It looks quite good in every angle, but what makes it stand out is
the number of vertices, only less than 800. The leaves are just multiple quads, cutting out by
the Alpha Clip Threshold. To sum up, the Alpha property
can be used to control the transparency, or to decide which pixels should be clip by comparing with a threshold, or to do BOTH. No, you didn't hear it wrong. You can also use the Alpha Clip Threshold in the Transparent rendering mode. Let's take the window on the screen as an example. The glass is see-through
thanks to the low Alpha values. At the same time, the missing glass pieces
can be discarded entirely if their Alpha values are under
the Alpha Clip Threshold. It's much better than still rendering those
pixels with 0-Alpha. That's enough for the nerdy time, let's get your hands dirty. In this video, we will create a dissolving shader letting the playing card disappear partly overtime like it's burning. You need to install Unity 2019.4+ with a project using
Universal Render Pipeline (URP) template. So, let's take a look at
the core idea of this shader first. We have just learned that the pixels are clipped
if their Alpha values are lower than the Alpha Clip Threshold. So, by having a higher and higher threshold, more pixels will be clipped. This effect is just about animating the Alpha Clip Threshold overtime, and applying it to the object. Since the Black & White texture
may be hard to compare nearby pixels, I put colors on it
for much better explanation. The pink and purple pixels indicate the lower Alpha values, and they will be clipped earlier
than the light blue ones. Imagine that we use this noise texture
as the Alpha Map, instead of
the Alpha channel of the main texture. What we get is a dissolving playing card (!), just by increasing
the Alpha Clip Threshold overtime. This mechanic is so simple that the core idea diagram
can not be more compact. Before we begin,you need to download this stunning playing card
from Thomas Flynn. There are an optimized 3D mesh
and beautiful textures packed inside. Although it's a wonderful work, I cannot wait any longer to burn it down. Let's do it. The first 2 steps are Creating a ShaderGraph and Creating a Material
associated with the new ShaderGraph Since we need the Smoothness property, please use the PBR shader graph. And I believe that
you could do it yourself. If not, please find
my previous episodes. From now on, any changes of the shader graph can be observed directly on the scene. And the next step is:
Sampling the Albedo texture I hope that you are already familiar with this task, since it's done many times in the previous video. Just create the Sample Texture 2D in Shader Graph and set the texture you want to sample
in 'Texture (T2)' port. If everything is good, you should see the texture
in the preview section of the node. Set it as the Master node's Albedo. Now you can see the playing card in the scene if you assigned the material
to the mesh renderer in the previous step. And the next step is: Using the Noise texture as the Alpha map For the Noise texture,
you can use any Black & White Noise one you like. I usually use the MebiusBox
to generate the noise I want. If you want to replicate the Noise texture
I used in this video, Here are my parameters to
create it in MebiusBox I'll put the parameters on the screen. Go back to the Shader Graph, use the 'Sample Texture 2D' node
to sample this texture. Since it will be used
as the Alpha map, you can pick any channel
among Red, Green, Blue to set it as the Master node's Alpha. It's a Black & White texture, so the values of Red, Green, and Blue
are equal for every pixel. We're really close to the goal. Just one more step ahead. It's controlling the Alpha Clip Threshold
from the outside. It's literally just a number
in the range from 0 to 1. So I recommend to make it a Slider. After assigning it to
the Master node's Alpha Clip Threshold port, you can try adjusting its value
to see the dissolving effect instantly in the Shader Graph
with the Main Preview panel. Now you just need to convert it
to an exposed property in the Blackboard
to control it in the Inspector. There's something wrong with the edge of the card. Inspecting the original Alpha channel
of the Albedo texture, you'll see that only the pixels inside the card
are set to White. By replacing its Alpha channel
with the Noise texture, we lost this mask. This will be our expected result for now: We want to replace the White pixels
with the ones from the Noise texture, while keeping the Black pixels
as Black. Well, does it sound familiar ? Indeed, it's the Tint Mask technique
we used in the last video. In order to achieve the expected result, we just need to multiply the original Alpha map with
the Noise texture. The result is visualized on the screen. The problem is fixed by assigning this
to the Master node's Alpha port. We now see the playing card shows and hides partly on our every adjustment of
the Alpha Clip Threshold in the Inspector. Do you wonder why I chose
to expose the Alpha Clip Threshold instead of animating it
inside the Shader Graph ? There're several reasons to do that: 1. I do not want the dissolving effect to loop. 2. I want to control the speed
and the progress of the dissolving animation. 3. While increasing the Alpha Clip Threshold
from 0 to 1 makes the object disappear. Decreasing the Alpha Clip Threshold
from 1 to 0 makes the object appear. Finally, The Alpha Clip Threshold range
will be different for each object Or even for each different texture. There is so many ways
to manipulate the Alpha Clip Threshold So it's much better to control it
from the outside. Once again, I want to emphasize
the importance of the core idea diagram. Because it gives you an overview before digging in. You should make your own diagram
to plan your visual effect ahead, instead of spending hours
struggling with choices. CONGRATULATIONS. You've reached the
100% completion level of this task. Let's compare what we're having here
with the outcome we wanted to achieve. Without highlighting the edge, our playing card looks like a glitch. The glowing edge really takes the dissolving effect
to the next level. Let's do it. When the Alpha Clip Threshold increases from A to B, the pixels with Alpha between A and B will change the state from 'being rendered'
to 'being clipped'. Note that the pixels with Alpha lower than A
were already clipped before. On the screen, we can see that the pixels having the Alpha values
between 0.25 and 0.3 are highlighted. So if the Alpha Clip Threshold is set to 0.25, we can consider the pixels with Alpha
from 0.25 to 0.3 as the EDGE. With our current implementation, the pixels having Alpha higher than
the Alpha Clip Threshold are rendered with the color
sampling from the Albedo texture. In order to render the edge, we just need to set a color
to the pixels having Alpha in the range [Alpha Clip Threshold, Edge Threshold]. The 'Edge Threshold' is defined by us, so we are free to decide where it's set. The distance from the Alpha Clip Threshold
to the Edge Threshold is the thickness of the edge. To render the edge smoothly, I want to have it blend
with the Albedo in the 'Edge area'. Above the Edge Threshold,
the Albedo should dominate 100%. Our plan will be changed to the diagram
on the screen with 3 steps: In the 1st step, we'll use the Alpha Clip Threshold to clip the dissolving pixels
like the current implementation. The 2nd step is calculating the Edge Threshold by adding a small amount
to the Alpha Clip Threshold. The more we add,
the edge area will be wider, so let's call this amount
'Edge Thickness'. The final step is picking the color
for visible pixels 100% Albedo for the pixels
above the Edge Threshold, and a mix between the Albedo and the Edge color
in the Edge area. Specifically, the closer to the Edge Threshold,
the more ratio of Albedo will be put in the mix. The 1st step was done perfectly already. So let's move on to the next ones. The next step is:
Calculating the Edge Threshold In order to perform the Addition in Shader Graph, we'll use the Add node. The 2 input numbers will be added together
to produce the sum in the output port. When assigning
the Alpha Clip Threshold and the Edge Thickness
as the input, we'll get the Edge Threshold
as the output. Just as simple as that. Now we have the 2 thresholds, let's use them to decide
the mixing ratio between the Edge Color
and the Albedo texture. This mixing ratio ranges from 0 to 1 as we knew from
the 2nd part of this series. So we need to remap these thresholds
to the range of [0, 1]. By looking at the diagram on the screen, we can easily figure out this step can be done by converting Alpha in the range
[AlphaClipThreshold, EdgeThreshold] to the mixing ratio
in range of [0, 1]. Firstly, you'll need a Remap node. This node maps a value
from a range of InMinMax to a corresponding value
in the range of OutMinMax. The OutMinMax (target range) is [0, 1] so we don't need to do anything
for this port. About the InMinMax, we need it to be
[Alpha Clip Threshold, Edge Threshold] packed in a Vector2 format
(indicated by the Green port). Let's create a new Vector2 with X = Alpha Clip Threshold,
Y = Edge Threshold, and set it to
the Remap node's InMinMax port. The input value that we want to remap is
the Alpha value So the Remap node's In port
should be assigned with our Alpha map
from earlier stage. The Alpha values is be converted
into mixing ratios. Let's mix the colors. I introduced this technique
when we created a flashing TRON disc in the 2nd video
of this series. I hope that you still remember it. It's just the LERP node with: A = the first color we want to mix which is our Edge Color B = the second color we want to mix (ALBEDO) T = The mixing ratio which should be assigned with
the Remap's output. However, the preview shows some strange colors. Don't panic, this is a known issue that
we faced once with Lerp. We will solve this issue really quickly. The cause must come from the mixing ratio, which is the Remap node. Let's see what happened
when we remapped the Alpha values. Any values between
the Alpha Clip Threshold and the Edge Threshold will be mapped to a value
between 0 and 1. How about the values
outside the input range ? They will be mapped with the same ratio to the values
out of the range [0, 1]. To be more specific The values under the Alpha Clip Threshold
will be mapped to have negative value. The values above the Edge Threshold
will be mapped to have value greater than 1. Since the mixing ratio
should stay in the range [0, 1], we must "flatten" the out-of-range values. It means:
The negative values
will be set to 0. The values greater than 1
will be clamped to 1. We have exactly a node in the Shader Graph
to do this job called 'Saturate'. Just put it between the path
from Remap to Lerp, and the blending issue is fixed. And don't forget to use the new Lerp's output
as the new Albedo color TADAAA That's it. Now you have a proper dissolving shader
with beautiful edge highlights. It's so much better than
the original version that it's deserved to be considered as
150% completion level. SubGraph is a custom node which contains a graph inside. It's an amazing feature of Shader Graph. A SubGraph can be used
in multiple Shader Graphs just like a normal node. So once you found
a combination of nodes which can be re-used in many places
(such as _PBR_Abalanche), you can make it a SubGraph. Then you don't have to
re-create that series of nodes anymore. More over, a long chain of nodes
will be replaced by a compact node. It makes the graph
much easier to view and understand. The previous Shader Graph
can be a headache to many people due to its tangled connections. Meanwhile, the dissolving effect is so popular that it can be used in different situations. These are the exact reasons why we should pack the dissolving parts
into a SubGraph. The Shader Graph will look like this
when we're done, much clearer than the current one. Any SubGraph node can be seen as a black box
to transform inputs to outputs. We just need to care about
the inputs and the outputs, while ignoring what's inside the box. The input is what we want to control
outside the SubGraph, So it includes:
- The Alpha value from the Albedo - The Noise texture. - The Alpha Clip Threshold. - And the Edge Thickness. I'll tell you my secret
to quickly create these input ports. Unity will forward
the Blackboard properties from the Shader Graph
to the SubGraph to convert them into
the input ports. So let's convert the textures and colors to the exposed Blackboard properties first. Then, I will put all the Alpha-related operations
into a SubGraph, by selecting those nodes, right-click and choose
"Convert to SubGraph". A dialog will appear so that you can select a location
to save this as a file. I name it '_Dissolve_SubGraph' to tell the purpose of this SubGraph. A prefix of underscore letter
help putting the SubGraph(s) in the top of the folder when sorting. A suffix of '_SubGraph'
reminds me that this node is editable. In the Shader Graph window, multiple nodes are now replaced by just a single SubGraph node. All the input ports we need are created, we just need to connect the corresponding nodes
to these ports. On the other hand, the output ports are quite confusing since they don't have proper names. It's time to edit the SubGraph. Select the SubGraph, right-click and select "Open SubGraph"
to see the nodes inside. It's so amazing that all the nodes we've just worked with
a minute ago are here, maintaining not only their connections but also their positions. There's a special node with prefix "Out". It contains all the output ports of this SubGraph. By clicking the small cog icon, a list of the output ports will appear. Now you can rename them. After saving this SubGraph
and go back the ShaderGraph outside, the output ports have meaningful names as expected. I want to rearrange the input ports to have the Alpha on the top, and I want to have the Alpha Clip Threshold as an output port for a cleaner graph. So I'll go into the SubGraph
by double-clicking the node, much faster than
accessing the right-click menu. In the Blackboard panel, all the input values are here. Because the Blackboard properties and the input ports of the SubGraph
are the same. So, if you want to edit the input ports, just edit the Blackboard properties. I will drag the Alpha property to the top, so that it will be the first input port. About the output ports, I'll add a new output port
to forward to Alpha Clip Threshold. The data type of the Alpha Clip Threshold
is Vector1, so the new output port must have
the same data type to be compatible. Go back to the Shader Graph outside and use the new output port as
the Master's Alpha Clip Threshold. With our new custom node, the Shader Graph looks much cleaner now. In the .GLTF version, this playing card has a Smoothness texture. You can use another SubGraph called
_PBR_Abalanche that I've introduced
in the 2nd video to load all the PBR properties you need. This shader will become much more useful. Because it can be applied to other object as well. See the Shader Graph with
2 SubGraphs on the screen ? Every time you look at this graph, it includes 2 big parts: Some nodes to deal with PBR properties And the other nodes perform the Dissolving effect. It's easy to follow
and ready to be upgraded Imagine making a new shader from scratch to support all of these features Both volume of work and
the final graph will give you long nightmares. Just apply this shader
with another noise texture to the Tron Bike
(from the 2nd video of the series), it will disappear with style. If you're not interested in PBR stuffs, Just throw your new SubGraph
into another shader, and the dissolving effect
is mixed in straightaway. That's how powerful SubGraph is, definitely worth
a 180% completion level of this task. The Alpha map decides which pixels will be clipped first, and which ones will be clipped later. It's made of a Noise texture
and the Alpha channel of the Albedo texture. So, if you want to control the dissolving direction, you'll need to modify this Alpha map. A "quick" solution is to make another Noise texture, as shown on the screen. You'll need to rely on the UV Map to create this "directional dissolving map". In our case, the playing card image is upside down, and occupies only the bottom part of the texture. There are too many downsides from this solution, making it not an efficient one. You'll need to re-adjust many times to it right -> Slow iteration. If you want to change the dissolving direction, you'll need another Alpha map. If you want to change the Noise texture, you'll need another Alpha map. The direction can hardly change during run-time. In order to separate the Noise texture
and the dissolving direction, I would like to use an individual gradient texture
to indicate the direction. I will combine them to produce a final directional dissolving map
in Shader Graph. You can pick any blending method you like to combine these 2 textures. My choice is the Multiply node, just like the way we used it
in the first version of this shader. With a simple gradient texture
(black at the top, white at the bottom), the produced Alpha map
can be used in the subgraph to make the playing card dissolve
from the bottom to the top. Darker pixels will be clipped first. when you update it, all the Shader Graphs using it
will get the update too! Make this gradient texture exposed
in the Inspector, then you'll find that it's super easy
to change the dissolving direction/order. by just swapping the gradient texture. Excellent! You should be proud of yourself
after all of these hard works, since it's 200% completion already. In this video, I talked about
the Alpha and the Alpha Clip Threshold. By animating the Alpha Clip Threshold overtime, we can make the dissolving effect. What if we keep the Alpha Clip Threshold,
while animating the Alpha map? The FIRE effect
and the HOLOGRAM effect can be achieved with this technique. Use your imagination to create your own effects
with these new friends. I used the FBM2-type noise in this effect, do you wonder why? Well, at first, it can just be explained that this Noise texture seems
to match our intention of making a burning piece of paper. Behind the scene, 2-levels Fractional Brownian Motion noise is famous for creating smooth transition which repeats the pattern itself in different zoom levels. There are many types of noises. Each one is suitable for some specific effects. By digging into these noises, you'll spend less time looking for the right one. Shader Graph provides some useful nodes to create procedural noises
which are ready to use. Take a look at them. With the shader we created in this video, any object can be dissolved. But the dissolved pieces look unnatural since they just disappear straight off. Visual effects are usually needed to cover this part, by adding flying embers. In Unity, we have another wonderful tool called
Visual Effect Graph, which uses the similar Node-based UI
to the Shader Graph. Combining them would really boost the final visual effect. I used VFX Graph
to create the embers of the burning card. This is where a new problem raised. The ember particles appear both in
invisible and visible areas. My expectation is emitting the ember particles
only in the burning edge area. In order to do that, I need to synchronize the parameters
(mostly Alpha Clip Threshold) between the Shader Graph
and the VFX Graph. Fortunately, we can do that with Property Binding mechanics
of the VFX Graph and the exposed Blackboard properties
of the Shader Graph. It's tricky just like
how it's described, but the result is absolutely worth the effort. The burning edge looks aliasing, because the nearby pixels were clipped. If you want to make smoother edges, a better Noise texture may not be enough. I decided to create another shader to support the Transparent rendering mode. In order to keep the semi-transparent edge, and in many other cases that
the Alpha Clip Threshold is unavailable (such as in Sprite shaders), we need another solution
to hide the dissolved pixels. The new subgraph is
less complex than our implementation here, thanks to the SMOOTHSTEP node. The Shader Graph is pretty much the same. If the Transparent version of the dissolving shader
is simpler and produces more beautiful effect, so why did I choose to talk about
the Opaque version? It's because the cost of rendering Transparent objects
is higher than rendering the Opaque ones in general. By understanding the Depth buffer and the rendering order of Opaque & Transparent objects, you'll understand my choice. I will leave this part for you to explore. And do not worry, I will talk more about this part when we learn to create the water surface, the outline effect or the heat distortion effect
in the future. The core concept behind this dissolving effect
is very simple. But it can be extended
and used in various ways. You can't drag the Alpha Clip Threshold manually to fade out objects
in the real game, then how ? By using Animator, AnimationSequencer, DOTween ... it's your choice. Which configurations could
disable the Dissolving effect temporarily, so that it can be activated quickly later ? By answering these kinds of questions yourself, you'll learn much more from this sole video. To sum up, 1. The Alpha property
can be used to control the transparency, or to decide which pixels should be clip by comparing with a threshold, or to do BOTH. 2. By animating the Alpha Clip Threshold over time, we can make more pixels discarded to create the dissolving effect. 3. The Saturate node helps
clamp the values in the range of [0, 1]. In order to highlight the dissolving edge,
we need 2 thresholds to define the edge thickness and blend the edge color
with the original Albedo texture. As I "promised" in the earlier videos, our shaders are getting more complicated. So SubGraph
(along with Alignment, Groups and Sticky notes) helps a lot in making
a neat shader graph. All your extra work will pay off some days. The technique I used in this video is just a single approach
to create the dissolving effect. There are so many creative solutions out there too. You may not be able to learn
and apply all of them. Just remember the core concept: manipulating the Alpha
with a threshold. As you can see, our core idea diagram is so simple at first, then it gets more complicated along the way. That's exactly why
you should NOT procrastinate. Getting your hands dirty
is the only way to find out what's missing and
truly understand how things work. In the Google Time section,
I provided several keywords. These do not only help you
to prepare for the upcoming challenges, but also give you some ideas
to break the rules, create your own version
of dissolving effect. All the assets including shaders, particle effects and custom scripts can be downloaded from my Patreon page. I will post another video to talk about the Transparent version of the Dissolve effect. Unless you want to miss it, please subscribe to this channel and you will be notified when it's on. If you find something useful here
and want to DONATE me, it will be my honor to show the link in the description. Otherwise, just a like and a share
make me happy already. What do you want me to talk about in the next videos ? Please leave a comment below. Thank you and see you next time on
ABALANCHE.
