Basics of Shader Graph - Unity Tutorial

you guys see this I'm actually the gun in ten I think I've been out in the Sun for too long luckily today we're talking about shade first so shader graph is unities new node based shader editor it allows you to create all kinds of cool effects and generally just alter the visual appearance of your game kata graph is a huge tour and can be used to create anything from flowing lava to Holograms to sprite animations and post-processing effects so far all this stuff has been done by writing custom shaders by hand but with shader graph we can do everything visually and in a fraction of the time for someone like me who's just terrible at writing shaders shader graph is an amazing tool and I don't think I've ever been this excited about a unity feature alright enough talking about it let's start using it but first this video is sponsored by bolt both is an awesome visual scripting tool that allows you to quickly and easily program from within the unity editor without writing a single line of code the cool thing is that both works in much the same way as shader graph it's a completely note based visual tool however instead of just creating shaders both opens up the full power of C sharp scripting in unity along with the ability to live edit your graphs while in play mode personally I'm extremely impressed with this tool as I think it combines the best of what I've seen from other visual scripting solutions to get started simply click the link in the description and download both from the unity asset store alright it's shader time so the first thing that we want to do is make sure we're using unity 2000 18.1 or later I'm using unity hub so for me that means going to installs as you can see I'm currently using 2018 point 1.1 will then create a new project and here under template we need to change to the lightweight render pipeline shader graph is currently only available using this template but support for other templates is coming now I've gone ahead and created a quick example scene the only things that I have is a camera a couple of lights a tiny bit of post-processing and of course this monkey and as with any object in our game this monkey has a material the material is currently just using this standard shader so let's change this by creating our own custom shader we're going to be creating a cool glowy shader that looks like this but first it's a good idea to make sure we're using the newest for of shadowgraph to do that we'll go to window and open up the new package manager here we can see all the different packages currently in our project you'll notice that the shader graph package isn't actually in here but that's because it's part of the render pipelines lightweight in my case this also has an update available so I'm just gonna go ahead and update it so now we own the newest version of shader graph and we're ready to go ahead and create our shader let's right-click in our project go create under shader here we can see the normal shaders as well as three new options ending with graph let's select the PP our graph will give the shader name I'm gonna call it monkey underscore shader and now to open this up in shader graph we simply double click it and this entirely new window is going to pop up as with any other window in unity we can dock this anywhere we want or maximize and minimize it I normally have this in full screen on my secondary monitor but for now I'm just gonna make it into a window and maximize that window and by default when we open shader graph we have only one note this is our PBR master node master notes in shader graph represent our final output right away you will notice that you know most of these settings from the normal standard shader we can change the albedo I'm gonna go ahead and make it some kind of blue here that's the slot for normal emission metallic and all that good stuff and the cool thing is that instead of just controlling these through textures we now control them using different nodes so in order to try and make our object glow around the edges we need to modify our emission however if we just go ahead and change our emission for the entire object well we can see that the result isn't particularly interesting instead let's go ahead and create our own node by the way to move around you can use alt and click or just the middle mouse button and you can scroll to zoom so to create a new node we can either right-click go create node or sim to use the keyboard shortcut which is space this brings up a tiny panel where we have different categories for different nodes and you'll quickly see just how many different nodes are actually in here and on top of that new nodes are constantly being added so it's safe to say that we won't be going over all the nodes in this tutorial so the note that we want to create here is what we refer to as Fornell so I'm just gonna go ahead and search for that now you can see it pops up let's click it and voila we've created a effect note now understanding how the different notes in shader graph where it can be extremely math heavy luckily we can always see a visual representation of what the node is doing so in terms of deep Fornell effect it's creating this circular ramp and we can control the power of that ramp using this value here for now I'm just gonna set it to something like three we then take the output of this node and drag it right into the emission input of our master node and right away we can see that we get this glowing effect so next let's add a way to control the color of our for now to do this we need a color node so that saves space let's search for color and hit enter now this is a really simple node it doesn't take in any inputs instead we can just select a color I'm gonna choose some kind of bright orange and we want to combine this with or for another fact to do that we create another node so that's hit space and this time we want to create a multiply node this of course allows us to multiply together two different inputs and get a result let's remove the old connection here by selecting it and hitting delete and it's instead connect our fernell out with the first multiply input and the output of our color with the second multiply input and right away we can see the result we then take the output of this multiply node and put it into emission and well now we can now use the color field to control the color of our Fornell so this is a really cool example of how this node based way of thinking works you can bind together different nodes in order to create interesting results and pretty much all nodes work this way there's some kind of input in our case d4 nil and color the node does some magical processing behind the scenes and spits out a result and if you ever wonder what a node does you can always right-click on it and hit open documentation and this will open up a documentation page for that particular node with a description of what it does which kinds of input and output it has a supposed to function that it executes behind the scenes so that's really cool now there's definitely some more we can do with this I'm gonna change the color mode from default to HDR because we are working with emission here and so I'm gonna go in and bump up the intensity to say 1 just to make the glow a bit stronger and of course if we save this acid now and go back into unity we can easily apply it to our monkey all we need to do is select our monkey material and under the shader will go under graphs currently all shader is created with shaded graphs go under here but I here the team is currently working to fix that and we can then select all monkey shader and we can see just how cool that looks in the editor however it's something that would be really need is the ability to change the color of our Fornell from inside the material because currently we have to double click on our shader open an urban shader graph find the correct node and make the change in here and that's not very intuitive and also it means that the color will be the same for all of our materials instead we can right click on this color and we can convert it to a property this makes it so that we can no longer edit the node in here but instead it shows up in the top left corner this is what we refer to as the blackboard and here we can see all the properties that our shader has in our case we just created a color and if we expand this we can now see that we can change both the color and mode up here instead we can also right click on it to rename it now I'm gonna rename it to for nail color as a result of this if we save this asset and select the material we now change the for another color in here awesome let's see what else we could do to make this more interesting first of all we can change the preview down here so that we can see it on our monkey head to do that that's right click and choose custom mesh and we can then select the monkey head that makes everything a bit clearer to see we could then try animating our Fornell effect over time to do this that select all of our nodes and move them up a bit let's then create a new node this time I'm gonna search for time that's it enter and here we have all kinds of different outputs for time let's then create a multiply node so space multiply I'm gonna delete the old connection here and go from our old multiply node to our new one and from our time node I'm gonna take the sign of time and drag that into this second multiply input and we see now this cool animation that occurs of course this sign of time goes between minus 1 and 1 and we really only wanted to go between 0 and 1 so we can actually remove this here and instead put a note in between so we'll go from sign of time into and we'll then create a remap node and we wanted to go to the input so it's going from the sign of time to the input of our remap node our input goes between minus 1 and 1 and our output goes between 0 and 1 so now you can see that the animation looks much nicer let's then take the output of a remap node and drag it into the second input of our multiply and finally let's take the output of our multiply node and drag it back into remission and there we go we've now created an animated material I don't want this effect to completely disappear at any point so I'm gonna make it go between point 2 and 1 instead of 0 and 1 I think that looks a bit better so we've now created a pulsating highlight let's just clean up our notes here by moving them up a bit let's save the asset close down shader graph and hit play we can see that our monkey is indeed animating whoo-hoo now the final thing that I think is good to know when getting started with shader graph is how we can work with textures to do this let's start by creating a property in our blackboard here we have some different ones to choose from we're going to select texture and let's just create an occlusion texture for our models so let's call this occlusion and as the default input here I'm gonna select a monkey occlusion texture that I have prepared we then take our property and drag it in here and at this point it would be pretty intuitive to simply go from the occlusion property into the occlusion input on our PBR master but as you can see it really doesn't accept this the reason why is that they're currently 2 different types as you can see on a PPR master after occlusion there is a one in parentheses that's because the occlusion is a single channel value whereas our property is parentheses t that's because the type of a property is a texture so to convert between these we take the output of our property we input it into a sample texture node and we then go from this sampler texture node into the occlusion input and now it should work just fine if we save this asset and select our monkey material we now have an empty texture slot here we can then input our monkey occlusion and as you can see if we toggle between the two it clearly adds some nice ambient occlusion to our model that's how you can apply texture notes in shader graph and that should be enough to get you started from here on it's just about playing around with it trying to recreate different effects and figuring out what the different notes do and most importantly make sure to have fun so that's pretty much it for this video however shader graph is a huge tool and there's so much more exciting stuff to cover if you'd like to see more videos on shader graph or on how to create cool effects like Holograms or dissolving effects definitely let me know in the comments I'm really fond of the tools so far but there's still a lot of stuff that I would like to see added like vertex displacement and access to the camera depth buffer but the tool is not even out of preview yet so I guess we'll just have to be patient also don't forget to check out both you can use the link in the description to get started on that thanks watching and I will see you in the next video thanks to all of the awesome patreon supporters who donated in April and a special thanks to Diego vo infinity PPR and extended player Sybok mami Derrick Eames Kirk Clinton fan skewer Dell Burnett Tommy Huang Frizzle Murphy Daniel Sullivan cheetah 3d thanks to long PRN Glade - Schneider tiny link J delay Superman the great John Burkhart Dennis Sullivan Jason Lotito Alex for kids key point cat Matthew Knight James P Gregory Pierce James Rogers now Kiowa sake Robert bond levy tweed Tim of holdup our German Rob ferran adria Nez mayor and Erasmus you guys Rock

Channel: Brackeys

Views: 683,524

Keywords: brackeys, unity, unity3d, asset, assets, models, textures, material, materials, beginner, easy, how, to, howto, learn, course, tutorial, tutorials, game, development, develop, games, programming, coding, basic, basics, C#, texture, nide-based, node, based, visual, scripting, visual scripting, shader, shaders, graph, graphs, shadergraph, shader graph, introduction, intro, graphic, fresnel, glow, effect

Id: Ar9eIn4z6XE

Length: 12min 29sec (749 seconds)

Published: Sun May 27 2018