Dissolve Effect in Unity Shader Graph

a dissolve effect like the one on screen looks great during a teleportation animation when an object is destroyed the glowing edge helps to emphasize the effect and makes it look a lot more futuristic today we're going to use shadow graph to dissolve our debts above a certain y-coordinate in world space the source code for this is available on github and a write-up of this tutorial is available on my website links are in the description will create a new PBR graph as a basis by going to create shader PBR graph then name it something like dissolve the first thing we'll do is add a base color and plug it into the albedo field add a new color property call it albedo and drag it onto the graph then immediately connected to the albedo field in practice you probably want to use the texture 2d but we'll use a color for demonstration to generate some variation the edge of the dissolve will use one of the built-in noises which unit includes and to create note procedural noise each one works a bit differently so try swapping between each type of noise until you find the one you like I've chosen simple noise this takes in a scale parameter which controls the resolution of the noise clouds let's create another property this time of type vector one called noise scale with a default value of around 50 and plug that into the scale field we also want to control how strongly the noise distorts the edge of the dissolve effect for this add another vector one property called noise strength and give it a default value of one we want to remap the values from the simple noise no need so the values go from between 0 and 1 to between minus new strengths and plus new a strength unity has a built-in remap node which takes in one range of values and outputs another so go ahead and use that we need to create a vector 2 for the X component will negate noise strength for the Y will leave noise strength alone pass this vector 2 into the alt min/max field this gives us a measure of variation to the edge of the dissolve to determine where the edge is create a new vector one policy called cutoff height this will control the Y position of the cutoff in world space add this to the noise calculations we've made so far now we need to remove pixels which exceeds the cutoff point we can get the world position of a pixel by using a position node and setting the space to world since we're using the y-axis for the cutoff we'll need a split node to take the G component RGB corresponds to the respective X Y Z here to perform the cutoff we'll use a step node this acts a bit like an if statement with an output of 0 or 1 if the edge parameter which in our case is the noisy Y position of the pixel is greater than the inner ammeter in our cases the threshold Y value the output is 0 otherwise it's 1 we can output this directly to the alpha channel or the PBR master node make sure you use the coke drop down menu to make sure this material uses two-sided rendering so we consider the opposite side of the dissolved mesh finally we'll add a glowing edge to the dissolving parts of this mash we also need an edge width property of type vex of 1 to define the thickness of these bright edges give it a default value of about nor point naught 5 for these edges we'll use another step node but we'll swap the order of the in and edge parameters so that the noisy pixel y-coordinate goes directly into the edge field will add edge width to the Y fresh off value then connect that to the end parameter this gives us a slightly offset an inverted version of the step function we did before add another property called edge color this is the course of sight color and we'll set the merge to HDR so that we can bump up the intensity far above the standard maximum in the color picker increase the intensity field to make the highlights brighter multiply this together with the edge color and then plug it into the emission channel of the PVR masternode and with that we can now add a material using the shader to make objects dissolve with a little bit of scripting we can animate the y coordinate cutoff threshold as you can see here you'll need to include a bloom effect on your camera to make the emissive color on the edges glow which the default you RP seen already has setup thanks for watching as always this video is made possible by my patreon supporters your pledges are greatly appreciated until next time

Channel: Daniel Ilett

Views: 59,932

Keywords: unity, urp, shader graph, shaders, tutorial, dissolve, shader, unity shader graph, unity shader graph tutorial, shader graph tutorial, unity3d, unity 3d, game development unity, gamedev, game development, daniel ilett, graphics, daniel ilett shader, daniel ilett effect

Id: 0NuesGD0msI

Length: 4min 29sec (269 seconds)

Published: Mon May 25 2020