Make Awesome Effects with Shader Graph in Unity!

in this video we're going to cover how to set up and start using the shader graph this is a very powerful unity tool that lets you easily make some really cool shaders by dragging and dropping various nodes and simply connecting the dots let's begin hello and welcome i'm your code monkey and this channel is all about helping you learn how to make your own games with in-depth tutorials made by a professional indie game developer so if you find the video helpful consider subscribing okay so let's check out shadowgraph in unity this is an extremely powerful and very easy to use feature i've already done a bunch of different shadowgraph effects in previous videos there's a playlist linked in the description and i also covered how you can apply shadowgraph shaders as a post-processing effect so after watching this beginner video go check those out to see some more concrete examples now here we're going to go through the setup process to be able to start using shadow graph then we're going to look at the basics for how it works how we can add properties to our shader understand how the board works add nodes and connect them to make our effects the process is the same for making 3d and 2d shaders with just the output node being different and lastly in the end we're also going to see how you can manipulate our shaders through code this video is made possible thanks to these awesome supporters go to patreon.com unitycodemonkey to get some perks and help keep the videos free for everyone okay so let's begin now first of all in order to use shadow graph you need to be using one of the new render pipelines so that's the high definition rather pipeline or the universal render pipeline the shadow graph does not work on the old built-in render pipeline so over here i have a completely empty project so right now it is not using any of the render pipelines so let's install that quickly we just go into window and open up the package manager and now here we see tons of available packages so here we want to find the universal render pipeline all right here it is so just hit on download and then install all right it's installed and over here we can also see the shadow graph package and make sure that it has been automatically installed as soon as we install the universal render pipeline okay so now that it's installed we can go into edit and go down here to the project settings and then we have the graphics tab and here we can see a field for a render pipeline asset so down here in my project files just right click and we're going to create go into rendering universal renderer pipeline and create a new pipeline asset so just like that hit enter and there you go so now we can simply drag this drag it onto that field and yep just like that okay so now our project is using the universal render pipeline all right so with the render pipeline setup we can start playing around with shadowgraph now to do that we just right click then we go into create and over here we have shaders and then over here we have the various shadow graphs so you have a basic unknown graph which does not receive light you have a pvr which receives physically accurate light then we have a subgraph which is more complex if you want to compose it of various subgraphs and the vfx shadow graph which is meant to be used with the visual effects graph then you also have the 2d renderer for some basic 2d graphs okay so in this case let's select a basic pbr graph let's call it testing shadow graph all right here's the asset and just double click to open it all right so here we see the shadow graph window so the first thing you see here is this node now this is our master node which is essentially our output and here in the corner we can see a preview so right now it just shows the default sphere and we can right click to change the preview mesh so in this case let's select the cube just for testing and there you go we have our basic cube so let's try out using this completely empty shader now to save we go up here on the left side and click on save asset there you go it's been saved and now down here in our project files let's right click to create a new material alright here's our new material and now over here we can change the shader so just click on it and we go down into the folder called shadow graphs and then inside we have all the graphs that were made with shadow graph so here let's select our custom one and yep there it is now we have this material so now just for testing let's go to our scene and in here let's create a new 3d object make it a cube and just drag our material onto it and yep here we have our very busy cube using our custom shader made in shadowgraph right awesome okay so now having this basic cube isn't really very interesting so let's go back into shadow graph okay here we are now just a simple note on a very useful hotkey which is you press shift and space and it automatically maximizes the window that you're using so in here just select shadow graph shift and space and there you go we have a very nice window that we can work with okay now up here on the left side we have the properties area so this is where we can add properties that our shader requires over here we can click on the plus icon and we can see the various types that we can create so in this case let's select a simple type texture 2d and just like that our shader now has a property and here we see the various films related to this property now the property has a name and a reference so the name is up here and we can double click to rename it so in this case let's call it main text and then over here we have the reference name so in this one we're going to call it underscore main text the is the name we're going to use if we want to modify shader properties through code and normally they start with an underscore and the name has to exactly match what you write in code and what you're writing here so be careful with how it's case sensitive all right so we have our basic texture property now if we just save our asset and now select our material and look in the inspector and over here we can see we have a nice texture field so i can click on this and if there you go i can select any texture so if i select the texture let's say this nice one and go into the scene view and nope our cube is still showing the same basic gray cue so we set a texture but it's currently not yet being applied so let's go back into shadow graph and now here we can take this texture and just click and drag and drop it straight into our board and over here we have our main texture texture node now we want to apply this to our master node here so we can visually see the texture so in order to affect the color what we need to modify is over here the albedo so you really just need to connect the dots however if i try to grab this one and try to connect it to that one and nope you can see that it does not accept it now here inside parentheses we can see the type for each input and output and over here you can see that the input for this one it shows a 3 which means that it's expecting a rgb color value but over here on the texture it's outputting a t2 which is a 2d texture so in this case it means that we need to sample the texture to get the color values which we can then use in here now in order to add a node onto our board we can right click in here then go into create node and over here we have our nodes now in here you can browse around and see all of the various nodes that are available so in this case we can go over here to input go into texture and over here we have the sample texture 2d so that's one way that we can get this or another way is simply over here in the middle of nothing i click on space and then i write sample and over here i find the texture so just a quick way of adding nodes by using text okay so now on this node you can see that over here we have an input of type t2 and we have an output of all the colors so very simple over here we can just connect the dots so just connect the t2 onto this input and now on the output we have the rgba and we're going to connect it onto our albedo alright so everything is nicely connected now we just hit on save asset any up here we are in our scene and we do indeed see our queue with our very nice texture all right awesome so just like this we'll learn how to create the most basic shader so it just has a texture and applies it to our mesh pretty much any effect you want to build is just extending upon this concept so here in shadowgraph another tip is how you can set the default texture so over here you pre-selected and now we can see our very nice preview and then here you can simply just browse around all the nodes so you can see there's tons of nodes tons of master nodes input nodes artistic nodes and anything you want now in order to be able to create an effect you want you just need to start thinking in terms of colors and mathematical operations so for example let's make a simple tint to our texture so let's replace this one with this one that is in black and white and now we want to tint this with any color now if you've ever used an image program you should be familiar with the basic multiply tint we have an image and we tend everything with a certain color now here we can simply add a new property so click on the plus sign we add a color let's call it color and on the reference call it underscore color now let's drag the color onto our board yep there's the color and now over here let's hit space and we want to add a multiply node all right there it is it takes one value and multiplies by another one and we have the output so in this case let's take our color and then we're going to multiply our color by our texture color so just input that one in there and let's change the default color let's put it on a nice green yep just like that and we take this output and simply put it on the albedo and yep over here we have a very basic 10 color shader so by modifying this property we modify the final effect that we get down here so again you just need to think about this in terms of colors and math so what we're doing here on this multiply node is you have to imagine the texture has a comma value per each pixel and then we're going through each pixel one by one and we're multiplying it by our color constant so it multiplies the red and green then blue and so on and then we have our output so we're working with textures but in the end always remember that this is really just numbers all right so let's try this just save the asset and yep back in the scene here and we have our material and yep we have a field for our color property and we can select and now we can tint this so let's change the texture for the gray one and yep there you go now we can tint this with any color so you can see that all of the base pixels of the texture are being multiplied by whatever color value we use so you can see how easy it is to build upon this to make any effect you want it's all about placing nodes and connecting the dots so here in the properties you can see we have tons of fields that we can add so for example let's add one of type vector1 which is essentially a float let's call this our saturation and again give it a nice reference name and over here we have the mode we can click on this and change from default and select a slider and now we can select a nice minimum and maximum so in this case let's leave it between zero and one and if we save and look in the material yep there it is now over here we can see our saturation field and yep it's a nice slider goes from zero all the way to one so now here for example let's drag it in there and let's press space and add a saturation node and there you go it takes an input and saturation so for example for the input let's take this color for the saturation let's take our field and output the whole thing all the way in there so if we save and yep here we are in our scene and saturation of zero then everything is in black and white and increase it and we get our nice color so change the texture for this one use a white color so that it looks the original and then tinted black in black and white and with color and so on alright so here you can see a very nice different type of property all right now just one last thing over here we are working with a 3d shader since we're using a pbr master however if you remember over here if we hit on create shader we can create some 2d renderer shaders now what this does is we only just change the master node so over here we can create a new node go down here to master and you can change any of the masters for example let's say sprite unlit and now we can right click in order to make this the active master and then let's change this to make it a quant and then everything else is pretty much the same so just take this one take the output of that color and just drag it in there and yep there we go now we have a very simple 2d sprite so here in the scene let's make a new object make it a 2d object make it a sprite let's give it a basic sprite all right here's our flat 2d sprite and for the material let's use the same material using our nice shader and if there you go now everything is working the same so we have a nice sprite shader being applied to our sprite render which is using a 2d sprite and whatever sprite you select over here on the sprite render is going to be set on the shader on the main text so again always be careful with the exact name all right now another thing related to shaders is how you can modify them through code so over here i have this very simple script it just has a film for the material and then we access that material and we set color then we pass in the name of the property that we want to change and then the value that we want to change it to so in this case when we press the t key it's going to set the color to green so over here i have my basic cube and let's add this script onto it and let's drag the reference to our material yep now let's hit play all right there's the cube now if i press the t key if there you go it changes the property which changes the color so i modified the shader property through code which modified my material now using this you can build just about anything in your shaders and control them in any way you want you can make shaders that are really simple or go really crazy and complex the only limit is really just your imagination alright so with this introductory video you should now be able to get started making your own shaders if you want to see some specific tutorial videos check out the shader graph playlist where you can view the tutorials for various effects i've already covered a bunch of them like glow blur pixelate and so on and i also covered how to apply those shaders as post-processing effects so now go ahead and make something awesome if you found this video helpful consider liking and subscribing this video is made possible thanks to these awesome supporters go to patreon.com unitycodemonkey to get some perks and help keep the videos free for everyone as always you can download the project files and utilities from unitycodemonkey.com subscribe to the channel for more unity tutorials post any query 7 comments and i'll see you next time

Channel: Code Monkey

Views: 81,358

Keywords: unity shader graph, unity shader tutorial, unity shader, unity shaders, unity shader graph post processing, how to make shaders in unity, unity make shader, code monkey, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity, game design, game development, game dev, game development unity, unity 2d, unity 3d tutorial, programming, coding, c#, code, software development, learn to code, learn programming, unity tutorials

Id: VsUK9K6UbY4

Length: 14min 23sec (863 seconds)

Published: Sat Aug 29 2020