How to Get Started With Shader Graph | Unity Basics

in this video we're going to go over the very basics of shader graph and how to get started making shader graphs the very first thing that you need to make sure of when you're working with shader graph is that you're using either universal render pipeline or high definition in the pipeline i began this project in the unity hub by selecting one of the two presets that come bundled with unity now this will not work if you're using the built-in pipeline so you need to make sure that when you make a new product let's leave this to load for a bit make sure you select either high definition rp or universal render pipeline or if you've already made a project with either 2d 3d or 3d with extras then if you come to the window package manager and if you just make sure that uh wait for it to load for a second because it's been quite slow today make sure that you have either universal render pipeline or high definition render pipeline installed from the package manager now we can just very easily search them here so i have universal rp installed already or we can install definition rp now though there might be a little bit more setup that you have to do manually if you install them through the package manager but that's outside the scope of this tutorial so i'm going to close that down oh also you need to make sure that you have shader graph installed from the package manager too if you start a project using the unity hub then it will already have shader graph installed if you are using the urp or hdrp templates and we'll also get this default scene that we're going to work with so i'm going to go ahead and create a sphere and this is going to be the object we're going to do a few basic shadery things to so i'm going to reset that to the center and just put it kind of in the middle of this scene so i think that we'll do and we're going to make our very first shader so if we go right click and we'll first of all i'm going to make a new folder so i'm going to name that shaders and i'm going to click that right click create shader and there are a lot of options this is going to be a shader graph rather than shade of code so we can ignore this first little section here all of these are to make shader code files now i may show you how to make these in the future but not in this video these are the things we are interested in so the 2d graphs are specifically for sprite rendering and we won't be using those today but they are still experimental but they they work pretty well currently so those are to be used if you're working with sprites an unlit graph is a graph that does not use unity's lighting system so if you wanted something that is completely unlit it doesn't have this kind of smooth falloff between light and dark that the default standard shader has then you'll select unlit graph a pbr graph on the other hand is one that uses physically based rendering so it will have the lighting that we see here so you have highlights like this dark bits like that a vfx shadow graph is for the visual effect system so that's essentially the new particle system in unity and i'll use vfx shadow graph if you want to make shaders for particles in the vfx system we also won't be using that today and a sub graph is something we'll get onto a sub graph is some collection of nodes that you can kind of bundle together and use them in other shader graphs so a sub graph is just a container basically it's like in code if you were to write a helper method it's a way of encapsulating quite complex behavior into a smaller unit if you have some operation that you constantly end up doing that takes up a lot of shadow graph nodes then you might want to bundle that in a subgraph so that in your bigger graphs you don't have to copy and paste this huge collection of nodes everywhere in your scene and duplicate them you can just have one node for the sub graph and copy that one node each time it will make your graphs so much cleaner we are going to start off with the unlit graph so i click unlike graph and i call it anything you want basically but we're gonna call this unlit test because i'm boring and that's created our shader it has this fancy little gizmo if we double click that it will open up the shader graph editor now i'm going to pop this out so that it's as big as possible when you create a new shader graph there's a lot of things kind of in this window that we will go over very very slowly so first of all there's the save asset button this is important when you make changes in your shader graph that will only be applied to a material that uses this graph if you press save asset so when you've made changes just always make sure that you press this button or press ctrl s showing projects will open up this shader graph file in the project window precision float we don't need to worry about this for now but this is the precision of the variables that are used in the shader code generated for this shader graph then on the right hand side here we have color mode which to be honest i've never modified before so it probably isn't going to be relevant and then we have these two buttons here for blackboard and main preview the blackboard is on the left hand side there you can see it disappearing when i toggle and the main preview is in the bottom right hand corner and you can see that toggling as well the main preview shows shows you what the shader graph is going to look like if we were to apply this to an object in this case a sphere and the blackboard is where we store all of the input properties and keywords for this shader graph then in the middle is where the magic happens this is where we're going to add nodes that basically do the thing that the shader graph is doing if that makes sense this is where we write the behavior of the shadow graph so this is where we take in textures and colors and vectors and all that kind of stuff we modify them using different nodes and then we output them into the unlit master node every shader graph has a master node of differing type so if we'd selected pbr graph this would be a pbr master node and all of them have different properties on them these are all called pins and we input things into them and that will change the output values so by default if you don't have anything put like input into these pins then they'll have their kind of default values here that we can change so if we wanted to make the color of this always red that's super simple to do we can also right click anywhere in this empty space and go to create node if we type in color that means a color node and then we can also make this if we don't make it red actually if we make this yellow and we'll make the alpha full as well and if we output this by dragging its output pin into the input pin color here that will make it yellow so that's super simple however we don't really have much control of this outside this shader graph file so if we were to want to make a material where we let the user change the color we can't just do this we need to add a property and to add a property use the little plus button here and that brings up a bunch of different types if we want to add a color we select color and we have this big box here that's very daunting because it has a lot of things on it if we wanted to give this a name then we can call this let's call it base color so and in fact this is like a human readable name so i can put a space in the middle there so i'm going to call this face space color and i'm going to use the american spelling and color because in some of my past videos i keep mixing up the english and remember the uk and american selling and it's probably very annoying for everyone so let's just step through the things that this color property has exposed defines whether or not this property shows up on a material that has this shader attached so we want it to be exposed so we'll keep it ticked but we can untick it if we want the reference is a behind the scenes code name that is used by the shader file that is generated by unity for us so basically a shader graph is auto-generated into different shader files and then those are used by unisy but if we want to write our own shaders or if we want to interface with the shader via code then this is the name that we will use to refer to this property there are methods in unity such as if we say material dot set color it takes in a string and a color so the string would be this reference string and this is how we refer to this property encode so we might want to make this something nicer and convention is normally to go underscore and then say base color like this so capitals on every first letter of each word and lowercase otherwise with an underscore at the start then we can change the default value of this property so maybe we want this to be blue this time and i'll make the alpha channel full as well so by default if we create a new material with a shader the base color will be blue but we can change this in the material the mode is either default or hdr where default is kind of how you imagine classic colors i suppose where you have rgb values that go from 0 to 255. hdr lets us ramp those values above 1 essentially so hdr stands for high dynamic range and it's a way of letting us basically over saturate the color so that if we are using certain kinds of shaders that allow us to have emissive color then it will let us do that but we are going to stick with default for now the precision here is similar to what we have up here with the precision for the whole graph which is either float or half but it's not very relevant for us so we are going to ignore it if we stick with inherit it will just use the value had set up here but we can't overwrite it for each property and then we have hybrid instance which you can probably just leave untick that's not important either now instead of having this color we're going to delete that by clicking on it and pressing the delete key and i'm going to drag the base color into the graph and attach that to the color pin instead and now it's blue now if we were to save the asset and close this down if we were to take this shader let's open it up again oops if we were to go into our materials folder create a new material uh we'll call this sphere because we're going to attach it to our sphere in the shader drop down if we click this go to shader graphs and we can find our unlit test shader down here and as you can see it has the base color for whatever reason let's put it as white rather than the blue as default but that happens sometimes you just kind of roll with it and it has a few other things that aren't really important for us either so we can attach this to our sphere now it's unlit it doesn't have the smooth shadow highlight kind of fall off that we had before and we can just change the color of this however we want so let's make this a nice kind of bluey green color there we go actually turn gizmos off so you can see it probably right so that's an unlit shader if we go back to our shaders and we'll make another one and we're going to go to create shader pbr graph so this is going to use the physically based rendering and i'm just doing this to show you some of the differences that we'll have now so i'm going to call this pdr test if we open this up and if i make this bigger with a pbr graph we have a lot more things on the master node so whereas before we had the albedo we had the alpha and i think we had the alpha clip threshold we also now have the normal which will allow us to fake some detail on the shape of the object um some emission that lets us do the hdr colors i was talking about before it will let us over saturate the object and it will if we have the right settings on the camera it will glow we also have metallic which defines how metallic the object is that's very straightforward so if this is a value of one it's like we have a very very shiny metal ball and if it's a value of zero that's a very organic material so completely matte non-metal surface smoothness is again very self-explanatory how smooth the object is so if this is a value of zero then it's the completely rough surface and if it's one it's polished to a mirror sheen so smoothness and metallic kind of work together and they'll both give the old jets a realistic feel that's why we call it physically based rendering because it's based on the physical properties of the object occlusion we won't worry about alpha is the transparency of each part of the object and we'll go on to how this is relevant very shortly so if we were to give this you know a value of 0.5 that means it's half transparent and the alpha clip threshold means that any pixel that is below this threshold will get cold completely and not rendered now back to the alpha this is relevant if we go to this little cog menu here we have a few extra values so we can change the workflow from metallic to specular and this will change the metallic quality to a specular property and it kind of works in a similar way specular defines how highlighted parts of the object get we're gonna stick it on metallic for now and keep it like that the surface type can be either opaque or transparent now this is where the alpha and alpha clip threshold get relevant if this is opaque then even if we put the alpha for every single pixel to 0.5 they will all still be drawn with full alpha it won't be drawn transparently that means that all pixels are just drawn normally with no alpha blending or anything like that and every pixel will be drawn unless the alpha falls below the alpha clip threshold if we set it to transparent however this ends up being slightly more expensive to calculate and render because it has to calculate whether you know if this is in front of something else it needs to do some alpha blending so it needs to blend the color of this object with the things behind it based on how transparent it is but if we were to make the alpha 0.5 now uh it's very hard to tell because this isn't like a great background but you know if we say like point one you might be able to see it a bit better this object is now a lot less visible than it was and in fact you know the further down we go if i just add zeros there then it gets more and more transparent the alpha is between zero and one like most of these properties but we're going to leave this as opaque we also have fragment normal space we can leave this as it is and two-sided means that regularly this sphere is drawn such that only the outer shell pointing outwards is drawn and the inside of the sphere is not drawn at all but if we have a shader that eliminates part of the mesh so if we took like a chunk out of this right here it would be weird if we can't see the inside part of the shell at the back of the sphere if that makes sense so two-sided will let us see the inside of this shell we're going to leave it as one-sided for now and i'm going to show you one more kind of node so i'm going to add a property for this i'm going to go to texture2d and i'm calling i'm going to call this base texture or main texture or something like that in fact the reference i'm going to give it is underscore main texture and i'm going to leave the defaults as they are but the defaults are similar to the um the color that we had so we can set our default texture and that will bring up the textures in the project these are the urp default ones so we've got the mode which defines kind of how this texture is red either we have white black or gray which is how this texture will look if it doesn't have a texture assigned to it or we have bump which says that this is a normal map and that will be used for this normal pin we're going to set it as white and then of course we have precision which we don't care about if we want to read the texture then we'll go to create node you right click and then go to create node and we're gonna type in sample texture texture 2d so this one here sample texture 2d this gives us a bunch of things on it might look a little bit daunting because there's a lot of pins on the left and the right and a couple of options it's a lot more complicated than the color node that we had but we'll go through each part of this so the texture is of course what texture it's reading and we're going to drag on the base texture for that the uv defines how this texture is red so if you've never experienced uv mapping before that is a mapping between the coordinates on a model and the coordinates on a texture if we just leave this as the default then you know the default unity sphere has uv coordinates on it already and it will just read the texture and map it onto this object in a relatively sensible way the sampler state this is what the ss stands for is a way of defining how the texture is read so i'm actually going to create one here if i go to sampler state and i'm just going to leave it with the name sample state the thing about this is that it cannot be exposed so this is only to be kind of modified within the shader we can define similarly to how you import textures into unity anyway we can define how it is read so the filter will be either linear point or trillionaire if we do linear then it will do a little bit of blending between pixels if we if we choose point then it will not blend the colors between pixels on the texture so if we have pixel art or something that we need the pixels to be very crisp then pick points and try linear adult entirely sure to be honest but we're just gonna leave it on linear for now the wrap defines how the texture acts when we go outside the bounds of the texture so if we have uv coordinates that go outside the bounds of this texture or if we tile the texture so much that we would go outside the bounds of the texture repeat means that the texture will basically if you say if you have the texture in the middle and we wanted to draw or we wanted to access like to the left of it it's as if the texture will be redrawn here and we'll pick like the right hand side of the texture if that makes sense so it's as if the texture tile's repeated clamp means that it if we try to access beyond the realms of the texture it will pick the color that was on the edge of the texture so if we were choosing from beyond the left-hand side of the texture it would choose whatever color was on the pixel on the left hand edge of the texture mirror will do similarly to repeat but it will mirror the texture and mirror once only mirrors at once so it will mirror once and then it will not mirror anymore so we're going to leave it as repeat and precision same as before so this sampler state we're going to attach here and that means that it's always going to be read linearly with repeat no matter what the import settings are on the texture within the unity editor that's very useful but we don't need to define one of these and if we don't it will just use whatever sampling options were set on the texture when you imported it in the inspector that's a lot to take in but just kind of roll with it for now we also have the type which will define how to read this texture we either have the default or a normal map this is the default texture it's just going to be read as colors not as normal vectors so we're going to leave it as default and the space is either tangent or object and to be honest just leave it as tangent then the outputs now we have the rgba output which is just the color as you know all of the color so this is red green blue and alpha but then we also have them all individually so what i'm going to do is output the four component rgba into the albedo field or the of or the albedo pin and as you'll notice the rgba is four components and the albedo's three components and this is okay because it will just take the first three components the rgb and stick them into into the albedo so that fourth one gets lost but that doesn't matter and then we're also going to take the a output the alpha and output that into the alpha pin and now this means that both the color the albedo color and the alpha are being read from this texture and output to our pvr master node now i'm going to save this shader app close it down and i'm going to make another new material and i'm going to call this sphere 2 because again i'm the most inventive person ever spoiler alert i'm not going to shader graphs and we're going to go to pbr test i'm going to attach that to our sphere and you can see we've got our shadow our kind of um darkened region back because it's using the lighting system in unity automatically and we're going to assign a different base texture to this so i'm just going to use one that's in the game by default in the urp test scene click this cork board which probably looks quite awful on this and it has assigned our texture pretty well to it so you can see there's some artifacts on the way that it has decided to unwrap the uvs on this object but that's to be expected if we had a cube in fact if we were to make a cube here skew is in a very very annoying place and then if we were to assign the i know it's called sphere 2 but if we were to assign the cube to it then the uv wrapping or the uv mapping rather on the object is a lot more sensible so that's been a crash course on how to get started with shader graphs it's just a case of taking properties and funneling them through nodes and then outputting those into the master node and from this you can add more complicated behavior which we will go on to into future videos but for now that's a good starting point so thank you for watching this video and we will continue this series next time with some more complicated notes thank you for watching

Channel: Daniel Ilett

Views: 4,662

Keywords: unity, unity3d, shader graph, shaders, unlit, pbr, basics, tutorial

Id: u9pbpypdq0Q

Length: 25min 2sec (1502 seconds)

Published: Sun Dec 27 2020

Reddit Comments

[u/AlanZucconi]

Thank you for making this! :-)

[u/daniel_ilett]

Shader Graph is often seen as a "friendlier" way to get into shaders, especially compared to code. In this video I talk about unlit and PBR graphs from the perspective of someone who hasn't worked with shaders at all, and explain the different parts of the Shader Graph interface.

Thanks for watching! 💜

[u/janimator0]

You my friend make great tutorials.

[u/Fabbseh]

And I was just going to try it for the first time, perfect!

[u/YummyRumHam]

Great tutorial, I wish I could step forward in time when you have a couple of dozen of these to work through! Keep up the great work, I’ll definitely subscribe and be checking back.

[u/BimzyCodes]

Thanks!