Dissolve effect in Shader Graph

[Music] hello my name is paulo this over here is milo and today we're going to make a shader for dissolving objects the solving can be really useful because you generally don't want to just disappear a 3d object you don't want it to just like pop out of existence so this hub is a nice way to make like a either a transition in or a transition out for an object so we'll be working on changing the material for this little guy so i know he's just using a standard universal runner pipeline material and as you can see it doesn't have a lot of stuff going on it's essentially just a base map the metallic doesn't have anything you can press ctrl and then click on this and that shows you what is in every channel so you can see rgb are all empty but the a actually has something and that is the smoothness so down here you can see the source of smoothness is metallic alpha which is basically this little thing here and then it has a normal map and that's it that's only has those three little textures so we can easily recreate that so let's make a shader for that so to do that just uh right click create then go into shader uh universal render pipeline and we're gonna go for a lit shader graph now let's call this uh the solve and you can right click on it and say create and material since we want to match this initial state a good way to start is make a copy of it put it right next to it and then drag the the new material that we have into the middle one and we're going to try and make something that all of them look the same [Music] this is the layout i like to use when i'm working materials i like having my big shady graph over here and then having the the game running on this side so i can preview the material changes i make so as we saw that one only had uh three different textures one was for the base color so we can start there and then do sample texture 2d and then over here we can add um texture 2d and let's call this just albedo let's add another one let's call this the normal and finally let's add one last one to include the metallic once we have that we can drop the albedo over here connect it so let's do that for the rest create node sample texture 2d we're going to have to do this um the same thing a couple times uh for the one that's for use for the normal we gotta change the type from the fault into normal [Music] hook it up over there and last but not least let's do the same for the metallic as we saw on the on the other material the metallic actually includes a metallic value which is just zero at the moment um but it also includes in it the smoothness and that's the one that we really care about so once we have the metallic we can just hook up our red into the metallic which as we saw is just a black texture at the moment so it won't do anything and then the alpha which has a smoothness we hook up to smoothness simple as that we save it as you see it now updated and it looks a little crazy because it's super reflective but let's not worry too much about it once we hook up the materials it'll be fine actually looks kind of cool so select the material right click properties so this is our new material you can see all the textures are empty and this is the old material so we can just click on this and that'll take us to the to the different textures that we can use so just drag and drop click on the metallic drop it in there and finally the normal [Music] as you can see it looks slightly different and that's because in the case of the original the base map also had a tint that we didn't include so let's do that now so to add a color we can go here and then click on color and then we can just drop it in here add a multiply and then hook up the sample texture that we had for our albedo and replace that on the exit simple as that and if we compare the materials now we have a color black which was the default we had when we saved it first so we can click on the on the color that the other material has copy the hexadecimal color and then paste in the new one and there we go we got essentially we made a brand new material but it looks exactly like the other one so now that we have it looking the same i'm going to restart so that i can remove this clone [Music] excellent so now we have our material hooked up it looks like it used to now we need to make it dissolve so first up for that is i'm going to add a little float here and i'm going to call this dissolve and i'm going to set this on the node settings you can set how you want to control this by default i'm going to leave it at 0 which means no dissolve and then i might i'm going to set it to be a slider from zero to one so at one it will be fully dissolved at zero will be not dissolved since we want to make part of our mesh disappear we gotta go into the settings for the graph so in the graph settings you go into alpha clip let's turn that on so without the clipping what it means is um basically it can only be on or off you cannot have things that are like a little transparent if your value is anything above 0.5 will be visible anything below will be impossible and there will be no in-betweens since right now the alpha's defaulting to one everything is visible all the time so let's make a quick um let's make a quick change for that to not be the case right click create node and i'm going to add a simple noise in here [Music] we got this right now it's really staticky so i'm going to reduce the scale of it to like a 50. i know it looks more like um the noise from like a burling cloud noise and i can hook up that to alpha and then if i save you'll see now there's a whole bunch of holes in there anything that's below 0.5 is becoming invisible anything that's about 0.5 it's become invisible um and to make this a little better i'm going to drop the dissolve over here we can hook this up into the alpha clip threshold so it's not always a static 0.5 and when we save our thing is back and now we can look at the material that we have and we have our little dissolve here and as we move it you can see everything starts disappearing there you go that's uh that's the most basic of the solves that you can make so let's try and make it a little fancier and the next cool thing that you've probably seen in a lot of games is basically adding like a little bit of uh an edge to this so that it has like um an outline so this over here grab a new float call this edge with and then another one for uh this time of color and we're going to call this edge color [Music] and let's change the settings of the notes so you can go into node settings let's change this by default to like a 0.1 change the mode to a slider zero to one seems pretty good and the edge color um i want to change it to an hdr because i probably want to make it glow a little bit uh and by default i don't want it as black let's make it like a little let's make it a mint because why not [Music] so what we'll do is from this point here since we need to basically offset it a little bit we're gonna subtract [Music] we're going to subtract the edge with which is just a float hook it over here as you can see this one's a little darker than this one because the edge width by default is set to 0.1 it allows us to be a little a little darker there [Music] and then we're going to pass this into a step node and we pass this as a in value so essentially the step node is doing exactly the same thing that the clip threshold is doing but the alpha is based on this one and the edge is going to be based on this one which is offset a little bit so that's what will let us uh use this edge with um so since we're basically doing the exact same thing the value that comes here is actually the same one is the dissolve and then from here since we actually want to have the right now basically any value here is fully visible we only want to have the other side visible because we only want like a little bit of an edge so we actually need to flip it so we go one minus finally the outs the value comes from that we multiply it by our edge color [Music] and we put that into the emissive once we save [Music] we can grab a shadow graph and right now we're at minus one two for some reason so this actually needs to be a positive value so there you go we put a positive value and you can see a little bit of an edge out there with the hdr color and as we move the dissolve there you go we get that little cool little energy edge as is a hdr color you can actually intensify this so if you have um if you have a post process it'll grab the you have post process with glow it'll grab the color from the hdr and actually make it glow so as you can see i can go pretty extreme there and just make like a cool little magic apparition for this so that's pretty dope and this is just with a random noise value so it is pretty simple and we can do some tweaks immediately with this for example um the scale of this can really change the feel of things so uh if you remember originally it had like a value of 500. if you go back to that which is just noise you'll see it's a totally different um totally different thing when um when you switch to the dissolve right now we're just using simple noise to make the the dissolved mass but it can be whatever you want you could use a texture for example let's say you wanted to dissolve in like the shape of diamonds and you could literally have like little diamonds with gradients there and it would dissolve like that so let's quickly do that example so instead of the sample noise i'm going to create a node and make this a sample uh texture 2d and let's hook this one directly to the alpha and this directly to subtract and i already have a little texture one tiling styling diamonds is what i called it i just made a pretty simple texture if we look at the pattern up close you can see it's basically a radial gradient that goes from dark to white in a shape of diamonds so as you'd expect when you use this to dissolve it almost looks like some things are like little diamonds are sort of spinning in there you know so you can use all sorts of different patterns that you can draw to to make the dissolve kind of look the way you want [Music] so i want to make a different effect where i dissolve based on the y so i can create a node here say position and that will give me the position in this case i want the position within the object coordinates that means um that if i move the object this coordinates will remain consistent versus if i have them against the world which may be something you want uh if i put them against world coordinates when i move the object the the position will change so um in this case i want object then i want to split that because the the one that i care about right now is the y the y in this case goes to g so i can just um put the g into that one and put the g into this one and let's save that [Music] and now from the results here you can see i can do rune pretty cool little um pretty sure this is how it looks in star trek or something it almost looks like i want to flip it and also you can see once i get to the very top this stuff is outside of the of the the solve and the reason for that is that i'm doing a dissolve right now from zero to one but the height of the object is not one and you can see this by going into the mesh you will be able to see the bound size and this case on y is 1.15 so this point 15 is basically the extra that's outside now i don't know if a way to get basically this number from shader graph and if anyone out there knows please correct me because i would love to know but as far as i know there's no way to get this so since you kind of get it i generally just put it into a variable when i need it so let's add one here and then let's say float and let's call this object height and since we already know what the value we want this we're just going to put it the default to 1.15 just because we know it's the value that we want so now to use that object we actually need to put it in between this and we're gonna do a little um division [Music] we're gonna divide our position by the height then we hook that up into the to the usual two places [Music] and you can see now that if i go from zero all the way to the top it now covers the entire thing now since we have the height to be exact that means that i get this little tip at the at the top and i get this little extra at the bottom so um one way to solve that is to do a remap over here so this given this is giving us right now value from zero to one we can grab that value which is originally from zero to one and we can remap it to like um point zero five to point ninety five so we're essentially sort of pushing the edges in a little bit and then we grab that and we hook it up here and close that for a moment and we grab that and put it over here and as you can see every time we're doing things like that we keep on like having to reconnect both of those you could also put a floating between that probably would have been a good choice at the beginning but i didn't do it so and now when we took the material you can see once it's at zero you don't see any blue at all when it's at one you don't see any at all you start seeing it around 0.95 which is exactly what you expect because we're multiplying that by 0.95 over there you can obviously expose that number if you want to have a little more control over here for example maybe we want to flip it so we can grab a one minus and we hook it into the two places that we have save the asset and now when we tweak the and when we take this up at zero is like that and then dissolves that way so as you can see there's a lot you can do with this effect at this point for example you can see that it's dissolving this way but you don't see the edge over there that's a very easy change you can go into the graph settings and change it to a two-sided material [Music] this next part is not exactly dissolve related but we're gonna try and like expand the vertices of the mesh as the dissolve comes in let's give it a little more juice and also if you ever want to watch more of my face i stream on twitch on mondays wednesdays and saturdays and also don't forget to like like and subscribe and all that stuff it really helps and i appreciate it [Music] so as you can see when i move the dissolve up and down in this version uh it will unravel the mesh which looks pretty cool it just adds a little bit of a little bit of juice to it i will go over how i made it but i won't do it like step by step so here we have a smooth step and this is taking the value that we've been using for fading in and stuff like that um and then it passes to uh through a smooth step that is basically from the solve which if we move the bar so the solve is essentially at this height and then we subtract a little bit a little 0.1 this is an arbitrary value i chose so that would be at this height so it's basically making like a little gradient from this point to this point um then it's inverting it um it's adding a power and the reason for that is because um i want it to become sort of extreme here so you can almost see how it goes up and then starts curving really quickly that curve is because of that power and then i multiply that by the normal vector so the normal vector for example for a quad here the normal vector would be pointing um sort of two out towards us right now so you can see when when the things are moving out they're getting pushed outwards because that's the direction that the normal is put pointing in so then i basically just use the normal i multiplied i don't want to change y because i didn't want to change like the height because y is kind of like the position that we're using to fade things so i just multiply on x and onset by 0.3 totally arbitrary number if you change this number it will change how far these things move outwards and then i multiply that by the power that i had before i add it to the position of the object and then i just pass it into the position so as you can see there's a whole lot of things you can do here by either switching what you use to do the transition dissolve like a texture or noise or whatever you want the why maybe the distance from the camera that's another very common use for this um so there's a lot you can experiment with i hope you had a good time hope you learned something i'll see you in the next one oh and don't forget to like like and subscribe and all that stuff yes [Music] well thanks for stopping by don't forget to like subscribe and hit the bell to be notified when new videos come out thanks for watching

Channel: PabloMakes

Views: 7,184

Keywords: game, videogame, gamedev, tutorial, unity, script, design, c#, tween, shader, urp, hdrp, shadergraph, graph, dissolve, fade

Id: iTlSwQ4b-uM

Length: 19min 22sec (1162 seconds)

Published: Sat Jan 30 2021