Shader Graph fundamentals in Unity

[Music] i made a little mistake here but since it looks cool i don't want to put it so you can see it hi everyone my name is paolo this over here is jiro today we're going to do a tutorial about shader graph i've seen a lot of tutorials that are like how to make this one specific material like how to make a little lava thing or how to make a portal or something like that instead of that i want to go through like the different things i usually do in most materials i work on shader graph gonna get you started and give you some tools so you can make whatever you want we're starting from an empty scene here this is a brand new project i made it into universal render pipeline since we're gonna be talking shader graph shadow graph only works in universal shaded pipeline and the high definition render pipeline so you need to use those for that now a lot of the principles i'm going to give you are like general principles of shaders so this actually applies a lot to like amplify shader editor or even if you're writing hlsl directly like a lot of the ideas are exactly the same depending on the version of unity that you're using you might have to go into package manager find the shader graph and import it but all the newer ones already have it included when you make a urp project okay so let's start with creating our first uh shader graph so you right click over here in your project and you can go into create shader uh universal render pipeline and then we can we have a few options here for now i'm going to select unlit just because it's the simpler one and let's call this example shader then you can right click on it and say create material and this is the one that's actually going to be used to render so let's do that one and then over here in our space let's create a 3d object let's make a little quad i like using game object align view to select it and that puts you in and you just can like pull your camera back a little bit and there you go you see it full frontal then you can just grab the material and drag it onto it and now this is using the material we just created and now personally i like to have a certain layout when i'm working with materials i like to be able to see this while i'm working on it but you'll see in a moment once we open this once we open the shader shader itself it's a pretty big window right it has like a whole bunch of things so i like putting it on this side to each the wrong obviously you can arrange this however you want but generally this is kind of what i like to do i like to just keep it give it this whole space for itself and then just kind of squeeze this guy over here and and then you can just save it as um as a separate layout i have one here called material workshop so if i click on that one you can see basically it's it's this exact exact thing um i just gotta click on the double click on the shader again and let me move it to this side there you go so there we go so we're working on it so here you kind of have all the properties for your material these are the things that get serialized out that you can change them from the editor then this window here which i like moving over here and is basically your inspector but for shadowgraph so this shows you the properties of the whole shader and these are the properties of the node although right now we don't have any nodes so this is empty um and then over here well this this over here in the corner sorry is um a preview as you can see i'm also having the preview over here i prefer it here because it's just the real world one you can see the effects of lighting a little better i feel that this one is a little more realistic but this one works too and finally this is it this is where we are gonna output everything we do now as you can see it's separated into two parts the vertex and the fragment and the vertex is the actual vertices so like the 3d geometry and i'm actually not going to touch on this much uh i personally i don't very often use this they actually can be very useful for things like for example simulating water where you want to do like disruption of the surface or you know any sort of deformation to the actual geometry that you want to do but they are a little more complicated so i'm going to leave these ones out for today the one that what i'm going to focus on is the fragment part and fragment is the color of the thing so as you can see right now it just comes in and by default it has a gray here so actually i can just select for example a red and then i can save my asset and there you go our material is red now obviously this is kind of dull and doesn't do a ton so we can try a few other things so for example i can start by creating over here node and i'm going to call this a vector tree and this is going to be our color so x y and z basically match to r g and b so if i put this here you can see it becomes black because it's zero zero and zero but if i go and do like i make it one now it's green because rgb therefore this one is one over here let's try and play a little bit around with um with the color so one first thing we can do is we can create a note and let's look for noise and and then let's just put a simple noise over here and we can map this one to the y now you can see uh if i save it over here you can see it has like ups and downs because the noise has either black or white combined into it and we can also like if we reduce the scale considerably it can look a little more interesting let's change it to like a 15. um so it's a little like a cloudy thing uh and then we can do more than that we can grab this noise here and we can also uh ctrl d to duplicate it just like we do for anything else in the unity engine and let's hook this one to x so it's not particularly interesting right now because these two look exactly the same but we can actually make them different and the main way of doing that is through the uvs so what are uvs well let's create a uv node and go from there the ubs basically are a coordinate system that maps to geometry so for example this thing that we're seeing here if i change it to wireframe you can see that it really is just four vertices right so it has like one vertices here another here another here another here each one of these has a uv value which maps to this thing so this uv over here actually maps exactly to this corner this uv over here maps exactly this corner this one here to here it's pretty easy to see it when it's a square it's not as easy when it's for example on our preview which is a sphere so let's give it a try i'm going to grab this one here and i'm going to put it directly into the color and now we will be able to see the uvs directly here right so now we can see them now we can see exactly what they look like so you can see for example here it goes from yellow to green well where is that well this is where it's the yellow and this is the green so basically at this point it's sort of wrapping around you can see if i turn it you can actually see kind of this texture just kind of laid out in the sphere but obviously it it kind of squeezes on the top because it's a sphere so putting a flat thing in it is hard and it actually shows up twice so it goes from zero to one and then obviously this is zero again and one so actually you can see it's wrapped twice now if we change um if we change the shapes over here to custom mesh see what we have here so for example this one you can see those are that's how they set up this particular object which is from the urp presets that's how they laid it out and you can see actually it's kinda i think it's this way it should be yeah so you can see that this here where it gets dark between the green and uh and the red is kinda here this part is here and this part is here so that matches but then this side is like full green so whatever color you put here will appear here um so that's what uvs are essentially are a mapping from um each vertices into a different texture so what's our benefit from using this well we in here is just saying that it's using ub0 and this is ub0 so actually if i connect this here you see it didn't change at all so connecting it here is essentially the same because it by default is going to uv0 but i can also separate it here and i can add a node here that's called tiling and offset and i pass the uv here and now i can connect this here still looks the same but if i start moving the offset you can see i can make the the noise scroll around so now they can look different and if we do this for we can do this for all three of them i can grab this over here i can duplicate it i can hook it here and i can hook this to the set which is the blue and i can give it a different um different offset and now you can see we're getting these crazy pastel colors because the noises are mixing in different ways and if we save it here and go back to shaded you can actually see it here in action so we're actually already having a little bit of impact there let's try making it automatic right now so for example this offset here that we put in we're just putting some volume manually but we can also make it scroll over time so for that we can do right click create node time and then we can um we can hook up this directly here and now you can see that one's moving over time we don't have a ton of control right now because we're just hooking up directly so we can go instead of that or here we can go into like multiply and and then we can multiply it like a minus one and then go from here into vector two and right now that's hooked up on the y and then we can hook up this here and now you can see this it's um basically we're making this negative and now just crawls up and we have control over how we want the timing of this for example i could make it like really really slow by moving 0.1 you can see now barely moves i can make it super big by making it 10 or i can remove the negative and that way if i just put like a four now it's moving downwards and -4 is moving up right so we have a lot of control over what we want to do there right now the transition of the colors is really soft so we can do some tricks there you can grab from here go into a node this is called a step node is a very useful node um that you can use to essentially what a step node does is it says um it puts a boundary on things so you can see that right now we're passing like a white color gray color some black colors and this is saying anything below this edge one is going to be black anything below this so if we lower the edge you can see some of it starts appearing and since it's a step note it says it's either black or white all all step nodes knows is black or white it's very it's a binary state so once we set it up you can see now it does a more like a strange shape in there um and let's try doing it for the other ones let's see how it looks once we combine everything with a step [Music] so taking this a little bit more to the extreme where i basically i'm doing a different styling and offset this is what it ends up look like obviously it's not i don't know how you use this for anything but it kind of gives you an idea of how much control you can have over colors now when we get to this part basically this color is essentially what we're seeing here but we can still mess with it a little bit more so let's push this off a little bit more and let's create over here a multiplication i'm going to create i'm basically going to mask it i'm going to multiply it and i'm going to multiply by something called a boronoi and boron is essentially like a pattern that you can create mathematically and you can see for example here if i adjust if i bring the the angle offset to zero it becomes perfect squares and if i start amping it up you can see that the cells sort of start moving and then the cell density as the name implies it changes the cell density and just like in the other one i can also mess with a uv so if i want to make it this scroll i can also make the scroll and then if i combine it you can see since i'm multiplying it everywhere where it passes black it basically becomes fully black which makes a lot of sense so what can we do with this well earlier we saw how you can use step to basically make it either black or white in this one i want to use something called smooth step a smooth step is kinda like step except it has two edges and then it can you can use those two edges to kind of make a little fade in between so you can still have grays when you're using a smooth step so you can see if i if i up the lower step all the blacks basically basically all this um the ones that are gray start becoming black and if i bring the other way around if i lower this one a lot of the grays start becoming white you can choose which which side you prefer so if i do this and then i multiply it by this you can see now the the shapes are very very different now maybe what i want to do is i only want it to be visible where the black parts are so for that we can use another node that's very commonly used called one minus the one minus node essentially flips things so you can see um what was white is now black which was black is now white and if we hook it up over here you can see quickly what effect it has so now i can barely see the color because of how much black there is and that's because i decided to multiply when you multiply something by a black and white generally what you're doing is you're masking it you're making it so anything that's in the black disappears anything that in the white is preserved but instead of multiply for example we can remove this one and we create an add node i could grab this one over here add it to our original color [Music] and all they will do is um add a little bit of extra brightness in spots so this is if you want to just make like highlights or make certain partners brighter this is what you would use so now we saw that smooth step is a thing let's try and replace it here i'm going to replace this quick there we go so uh changing it to smooth step the big advantage is that now we have grays on the red black and white we get way more interesting colors over here so it's starting to look a little more interesting but let's try a few other things first let's try and get a texture in here so i'm going to zoom out obviously you know the spaghetti is starting to grow here with all the notes but that is because i'm showing you a whole bunch of examples um you should probably when you're doing your thing you can always grab for example this part and just grab this whole thing right click and say group selection then i can give it a name and this over here is going to be called um color balls [Music] i called it moles but doesn't matter anyway so that way you can kind of know what each part of your shader is doing so let's make a second part here and let's make it to get a texture so i can create a node and then i can say sample texture 2d sample texture 2d will basically read from a texture and then in here i can select whatever texture i want i brought this one which is jiro this is one of my adorable cats and then i can simply just put it out here and then when i save there it is there's a little jira so that was pretty easy that was pretty simple let's try and do a little bit of playing around with jr so for example one thing we could do is i have a separate texture which we're gonna sample now you can duplicate this one and then select here and select zero mask as you can see it has black where he is and white where he isn't and then i can simply go from here and do a lerp lerp is a linear interpolation you see some of my other tutorials you know that i'm a little bit uh i'm a big fan of um i'm a big fan of interpolations so we want to put connect this one on the zero which is basically wherever it's black go to this one whatever is white we're gonna we want to go to this one i made a little mistake here but since it looks cool i want to put it so you can see it the reason this is wrong is because i by mistake i used inverse lerp where i wanted to use lerp so let me fix that and there we go now we have jira with a little uh party party theme on the back just by using this little mascot here so i'm going to add a little bit of distortion this is a pretty common effect that i use often and for that i'm going to actually sample another texture um and i have a asset here from a collection called this turbulence which are like tiling textures with cool patterns i'll put a link down in the description if you are interested in checking it out and then what i can do is use the input of this texture which as you can see this is like a bunch of little like squares and stuff i can use those to modify the uvs of of the jira picture to kind of distort it a little bit so let's do that [Music] so for that i'm going to create a node over here i'm going to call it uv then i'm going to create another one like we did earlier called tiling and offset and then on the offset i'm actually going to pass this value and then i'm gonna connect this to him i'm sorry i'm gonna connect this here to the uvs i'm gonna connect it in the map to this um and then uh if i save this just so that you can see it it already looks like the the little squares are kind of just deforming basically what they're doing is since i'm adding them they're going they're moving to the side i'm picking a different color so over here to control how much i wanted to do that i can do a multiply um and then this one here is going to be go to a float and this is going to be the amount i want to basically offset the valley so we look at the preview here so i'm going to change this into a little quad so we can more easily see it so you can see right now it's doing nothing but if i start increasing this value it starts basically grabbing from a different part of the texture doing a little bit of distortion there and now let's make it move so it looks a little more interesting and for that we can just copy what we did earlier over here where we did the time then multiply by a vector so we can just basically grab this four notes this one this one this one this one we can duplicate them and then just take them where we need them up here and you can see we have a little extra connection here that we don't want so just delete that and then this one goes here it looks like squares just because of the texture i selected but um we can easily just swap this one out so if i select instead of this one this wavy one you can see it looks very very different in fact now it looks like too much distortion so if i lower it you can see it almost looks like a heat wave of sorts and so you can do a lot of things just by tweaking which asset you choose to use and then just how intense it gets because obviously once you do something like this the distortion is pretty extreme so there's a whole bunch more things that you can do with a shader um these are just some of the nodes that i find myself using the most often and that i feel like help you sort of understand what is happening how the colors are sort of being manipulated to actually go out um so hopefully that gives you like a good foundation the last thing i want to go over a little bit at least it's pbr pbr stands for physically based rendering and the whole idea of it is to try and basically more model how real light interacts with materials in the real world and we're trying to model that in-game so we're starting from a very similar situation to what we had on the other material i just made um i just loaded the default scene from the urp i added a cube in it i made a little material and i added to it as you can see we still have just vertical fragment so if you want to use um pvr you got to switch over here in the graph settings you got to use change the properties from unlit to let so now we have all these variables let's start hooking up so the first one is the color and you might hear look at this and see it referred to as like diffuse or albedo or main texture those are like the common names that you'll see in a lot of materials for this slot so let's uh hook it up just like we did before we're gonna grab a texture so sample texture 2d i'm going to pass it in here then i'm going to select i have a little package that's called grand desert so um if i select this one here actually we can see all the different textures that we have here we're going to use all of them but we're going to use most of them so you can see once i have that one and save it and over here i can now see this thing as you can see it looks really flat like the light here you can see the light that's coming from the side it's sort of illuminating the whole thing as flat so it makes the object look super super flat so the first thing we can do to help with that is give it a normal so a normal in general is a vector that points outwards so for example this cube has this face right and this face is sort of flat this way so a normal would be a vector that points here and points upwards so it points uh on the way outside of the texture so when you that's what a normal is so when you hear about a normal map what you do is when when they create the asset um they will basically save into a into a texture what the normal would be for like this crevice over here so for example if you imagine the vectors here they will be like little lines coming out this way whereas the vector for this one would be a line coming outwards this way or coming upwards this way sorry so you can use those little directional the same data from those directional normals to sort of fake the lighting that you would get if there was more geometry here than there is so we can duplicate our our sample texture over here this time we drop the normal into it now that's not enough we also have to go into a type here and change it to normal and then if we hook this up to our normal and save you see a big big difference on how the light is uh reflected now it looks like it almost looks like it really has some depth to it it really doesn't but the normal helps a ton and normals were the thing that came in during the hd revolution of games you know that step at the end of uh it was at the end of ps2 era and really really improve the the quality of graphics without like a huge huge um impact performance now i'm going to hook up the ambient occlusion next amino occlusion basically stands for um sort of like the the places where the light wouldn't reach very well in the case of a texture like this you'd imagine like the light wouldn't really reach very well into this crevices like for example here you can see there's like a little bit of a highlight there but it's kind of wrong right like why is uh why is the light reaching into that spot so in theory ambient occlusion should help us with those sorts of things so let's uh duplicate this again bring it down here and i'm going to grab my i mean occlusion texture and put it here and let's hook it up [Music] so it's hard to notice a difference um right away so a week a quick way that i like to do it is for example i can go here and then multiply this by a float and this float we can actually add it as um as a property so i actually haven't showed you this so i was saving it for now so you can grab this and then right click convert to property and you see it appears over here so i can just rename it to um ao strength and then over here in the graph inspector i can select the node settings for it and i can change it to default.1 and maybe change it to a slider for zero to one and then i save it then if we go to the properties of this material with that which i can do by selecting it and then going into right-click properties so in the properties of this you'll see that the materials are listed under here so this one q i can right click properties on that one and there we go those are the textures it's using and i can adjust the influence of the ao so that you can see actually what what it's doing so it's not the greatest example for you but i think you see what i mean like if you see this material essentially it's saying um the light in those crevices should be lower than the light on the surface that is what ao is trying to simulate and now we get to metallic and smoothness these are the ones that are um pretty interesting so let's um let's actually duplicate this whole thing and we're gonna use this one now i can grab this one here right click duplicate it and i can rename this um metal strength over here i can delete this one hook this new one up [Music] and hook up this to the metallic and over here i can grab the metal texture and put it in as you can see i put a little hole in the middle just so that we can see the the extreme difference when there is no metal and when there is metal um so let's give that a try so there you go you can see this is where the the circle is um where the circle is applying um it still looks like rock or where the metal is gets super shiny in a in a very metal way i don't know how to describe it other than extremely metal and let's duplicate it once more this time we're gonna use this for the smoothness um so this determines how metallic the surface was this is the next one's gonna determine how smooth it is and this one is one of the ones where you depending on the assets you get you might get a little confused because a lot of assets come with a roughness material versus smoothness which are the same thing just inverted so if you want to use a roughness texture in a smoothness slot you gotta basically invert it you can use the one minus that we saw earlier for example that that's a good a good way to flip things uh here so now let's do for this one the smoothness so just like we did before and duplicate this one change this to smooth so this is actually a good example this package actually has a roughness so i actually want to flip it so right here i do a one minus and now it's a smoothness material there we go so over here you can see this is said to be like really really cursed um again this doesn't look like the material was initially intended to because the original was not supposed to be metallic i only made it metallic so obviously i wanted to be able to add this example for us but you can see the points where it reaches a perfect uh smoothness of one it it shines really really bright and the last slot that you can see we haven't hooked up is the emission one and the emission is basically where the object is generating light from and the main difference between putting color here or putting color here is that this one won't get won't get affected by shadows so this one because it's it's not really emitting light but it's pretending to emit light um it will know uh how to calculate uh with shadows better i actually have animation texture for this particular asset but we can just quickly improvise one from this so i can grab the the ao and flip it and it might not be the the best of the best but from here we can actually add like um contrast node if we increase the contours you can see this stuff starts going black over there maybe i'm going a little too crazy right now um but from here we can go into this and then multiply it and i'm going to multiply this by a color [Music] i'm going to change this to hdr which is high dynamic range for the color let's give it a i don't know what's a good color i i love me some pink so let's give it something and then let's hook this up to ambition and i want to save it this is going to be a little excessive right now but you can see it looks like it has a pink coming out all over the place and you you probably want to add like a multiply to tone this down but it kind of gives you the idea what it's doing um i think if i run this and we can select hdr for example we can increase the brightness of it and now you can see it looks like it's glowing because the post effect is grabbing that hdr color and it's blooming it so it actually looks like there's illumination coming out of it but obviously this is pretty excessive right now and but that's just because i improvise with a texture that wasn't a real emissive texture so one last thing i wanted to show you is i made a very simplified version here where it's just like passing in a color and passing a strength for the smooth and string for the metal and this is what it looks like as you can see it's actually reflects around like you can see this bench it's not really reflecting the bench what it's doing is reflecting from a reflection probe that it's around so you can see there's this there are these reflection pros defined here which actually grab like a little cube map of the scene and then our material would use we'll use the depending on how metallic and smooth it is it will reflect that so right now the cube map is really low res uh let's increase it just so that we can see and again this is just from a default thing that this scene has so let's increase the resolution just so that we can see it now that we increase the resolution you can see now it looks like pretty much exact looks pretty good right um so we can start tweaking um this stuff so you can see what it does so the less smooth it is the more blurry the reflection gets and then you can think about it like this with like any sort of uh stainless steel or something if you imagine the metal the more polished it is the more it reflects but generally most metals will just do something like this where you can sort of see the the shape but you cannot really make it out all that great and then the metalness this is more like a plastic you know because there's no there's no metal included in it um so yeah that's that gives you a little more understanding i just wanted to show you the relation between reflection probes and the metalness and smoothness which i couldn't really show you in the other one because it was so so grainy so with this flat one you can see what it does so also a lot of stuff but hopefully it gave you like a good foundation to start messing about with shaders and materials and stuff and if you want to see me make more shaders and stuff i do this very often on mondays wednesdays and saturdays and twitch um and also if you liked the video don't forget to like like and subscribe and all the things that you do below there if you also want a specific tutorial leave it in the comments maybe i'll get to that one anyways i'll see you in the next one adios [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: 75,148

Keywords: game, videogame, gamedev, tutorial, unity, script, design, c#, tween, shader, urp, hdrp, shadergraph, graph, pbr, reflection probe

Id: nDsTBk6eano

Length: 35min 48sec (2148 seconds)

Published: Sat Jan 16 2021