DISSOLVE using Unity Shader Graph

one of my favorite effects in videogames and movies is dissolved it's just such a cool way to animate an object in or out and it looks really complicated but it's actually a fairly easy effect to achieve so in this video we'll have a look at how to create a simple dissolve effect using shader graph and you can easily apply or tweak the same concept to create more advanced or interesting looks also this video is sponsored by a skill share skill share is an online learning community with more than 19 thousand in quality classes on game development tech and more I recently stumbled upon this awesome course on designing playing cards this course dives into all the things you need to consider when developing a card game which apparently is a lot so if you want to make a virtual card game a tabletop or you're just fascinated like I am definitely check it out a premium skill share membership gives you unlimited access to all classes for less than $10 a month so to get started simply click the link in the description and the first 500 people will receive their first two months for free alright let's get started so here we have the same scene as in the intro video we have a camera a couple of Lights a tiny bit of post processing as well as this monkey which is currently just using standard settings so let's go ahead and create our own shader for this monkey to do that let's go to project going to create and under shader let's select PPR graph we call the shader to solve and open it up in shader graph we'll double click it we can then maximize this window and we're ready to start creating our shader the first thing that I'm gonna do is just adjust the albedo here to make it a bit darker I think that looks a lot cooler and it will also help our effects stand out now this effect is kind of split up into two parts the first one is adjusting the transparency of our model in order to kind of animate it in and out and the second one is creating a glowing edge on top of this animation so let's start by adjusting the transparency of our model to animate it in and out now for both these effect we're going to be using some noise so I'm gonna hit space and create some simple noise here I'm gonna set the scale to something like 30 and you can see the cloudy texture is that it generates here we're gonna take the output of this node and feed it into the alpha of our PBR master node and right away you shouldn't really be able to see anything but if you want to preview the alpha Channel we can go ahead and set the surface from opaque to transparent and now we can see how the whiter parts of our texture are visible whereas the black parts are transparent now of course we don't want to show this on an object this way so I'm just going to switch back to opaque instead what we want to do is kind of animate through this texture using the Alpha clip threshold and just to show you this happening I'm just gonna create a symbol node to control it I'm just gonna go ahead and hit space and search for a vector one this is basically just a float we're then gonna take the output of the float and feed it into Alpha clip threshold and now we can adjust it right here if I go ahead and increase it we can see that our object is animating out in this cool way and if I decrease it it will come back now what's happening here well if we have a look at the Alpha Channel we're currently generating a noise texture each one of the pixels on this texture has a value between zero and one representing its brightness the first one for example has a value of 0.8 the second 1.9 and so on if we then set the Alpha clip threshold to say 0.7 what we are essentially asking unity to do is go through each of the pixels one by one and ask a simple question is this value larger than 0.7 if it is which is the case with the first pixel here we make it visible when we reach a value that isn't greater than 0.7 like this pixel here we don't include it and so this part will be invisible by doing this for all the pixels we get something that looks like this if you've ever used the threshold adjustment in Photoshop this works in much the same way pretty cool so what that means is by increasing this to one we're animating our object out and by decreasing it to zero we are animating it back in now of course if we wanted to control this in the editor we could right click here and convert it to a property or we could just have this happen automatically over time to do that let's delete this node instead we'll go ahead and create a time node from this I'm gonna take the sine of time and I'm gonna feed it into a remap node and I want it to go in the in channel now by default sine of time goes between negative one and one that's the values here and we're simply remapping it Tony go from zero to one you can see the effect of it here I'm then gonna take the output from this node and feed it into alpha clip threshold and voila our object is animating in and out on its own so that's the first part of the effect the second part is adding the edge and you were using a node that works very similar to the Alpha clip threshold let me show you this so if we take our simple noise and drag it out so we're gonna drag it out to another node and this node is going to be the step node so our symbol noise is both outputting to the alpha as well as the edge of our step node and if I now adjust this value here we can see that I can kind of animate through the noise exactly the same way that the Alpha clip threshold is animating through it on our object and that's because these step node is doing the exact same thing it's going through each individual pixel and determining whether or not it has a value greater or lower than this value here if it has it's going to include it and if not it's just going to be black and so we can animate it in the exact same way by taking the output of our sine of time here and putting it right into our step function and as you can see it's working just fine I'm just gonna move my notes out a little bit here and we could theoretically take our step function now and put it into the emission however we wouldn't actually be able to see the result of this and the reason why is that right now it's only applying emission to the part that are transparent if we went ahead and said remove the connection here to the Alpha clip threshold we can actually see the emission animating just fine I'm just going to go ahead and put that back so what we need to do is just offset this emission a tiny bit and we can actually do that really easily all we need to do is just move this out a bit and itself going straight into the step function will delete that will instead go through an ADD node so we're going to add a value here and we don't need the preview and the value that we're going to be add is going to be pretty small let's just try adding point zero one and let's then feed the output of this into the step function and as you can see everything works a spife for but because we've shifted time for a step function a tiny bit we can now see the edge of our emission so that's super cool and if we wanted to control the thickness of it we could do that by simply adjusting this value so we could make it super thick or super thin I'm just gonna keep it at point zero one finally we can of course control the color of our edge to do that we'll move all this stuff out a bit we'll take the output of our step function and put it into a multiply node and I'm also going to input another node here which is going to be a color I'm gonna change the mode here to HDR so that we can put really bright values and have a glow let's just set the color to say a light blue with a pretty high intensity let's translate that to four and we can now take the output of this multiply node here and drag that into emission instead and voila our edge is now blue pretty cool of course there are a few properties that I want to be able to control individually for each material so let's go ahead and make some properties for this the first one is of course the color that's right here so we can simply right-click that and convert it to a property and then up here we can rename this property to something like edge color I think it's also a good idea to be able to control the thickness of our edge so let's go up here and add a vector one let's call it edge width I will just default this to point zero one drag it into shader graph and create a link from this to the add method and finally it's also pretty neat if we get to control the scale of our noise so that we can make the effect smaller or larger for this let's just create another vector one this one is going to be the noise scale and I'm just gonna default this to 30 because I think that looks pretty nice let's drag it in SA node and it's put it into our scale channel on the noise function also right now when the animation is happening we can actually not see inside of our sphere the back faces of our model are completely invisible to change this we can simply check the two sided checkbox here and now we can actually see inside of our model which is a pretty cool effect we then hit save go back to the editor let's elect the monkey material and under shader we'll go to graphs and select our new dissolve shader and right away we can see this working if we want a smooth preview we can always press play and there we go our object is now animating in and out using this cold laser II effect and we can easily adjust the edge colors that we wanted to make it kind of purple we could make it fiery red or we could make it green it's really easy to adjust we can even go in here and increase how much it glows so if we wanted to really pop we can bump up the intensity that might be a bit too much and we can of course change the width of the effect as well as these scales so I'm gonna put that to say 15 or maybe 50 and I think you get the idea awesome that's pretty much it for this video from here it's up to you to play around with the effect and try adding and changing different nodes to see how it affects the result you could for example try using a Voronoi node instead of simple noise to drive the dissolve effect which looks pretty cool also don't forget to check out Skillshare there's something for that in the description on that thanks for watching and I will see you in the next video thanks to all the awesome patreon supporters who donated in May and a special thanks to Michael Neely Clinton Fenske a definite Papio infinity PPR cheetah 3d Alex and the player Sybok mummy dark Eames Kirk Fresnel Murphy Daniel Sullivan thanks along Superman the great John Burkhart Leo Lisette Dennis Sullivan Jason the Tito cor Jackson oh breezy Alex Akatsuki Bruins cat Matthew Knight cool Swedish key James P Gregory Pierce James Rogers Naoki Misaki Robert bond Louie tweed Tim of holder Park Jimin Adrian hosta and Erasmus you guys Rock

Channel: Brackeys

Views: 515,849

Keywords: brackeys, unity, unity3d, texture, textures, material, materials, easy, how, to, howto, learn, course, tutorial, tutorials, game, development, develop, games, programming, coding, C#, dissolve, shader, graph, shader graph, effect, animate, burn, dissolve effect, shaders

Id: taMp1g1pBeE

Length: 10min 33sec (633 seconds)

Published: Sun Jun 10 2018