Create your First Shader in Unity Shader Graph

You can access the full course here: Shader Graph for Beginners

In this short web class, we will learn to use the Shader Graph in Unity. Before beginning, please note that this feature is only available in the Lightweight Render Pipeline or the High Definition Render Pipeline. For information on setting up projects with the Lightweight Render Pipeline and the basics of using Shader Graph, you can review this web class.

Creating a Shader Graph

Create a new folder called Shaders. Here is where we’re going to create our various shaders. Inside of that folder, create a PBR Graph (right click Project > Create > Shader > PBR Graph). Call this one ExampleShader. To open up the shader and edit it, we can just double click on the asset.

Shader Graph Editor

When you double click the shader, it will open up the Shader Graph editor. This is where we create our shader. First, let’s look at the two panels.

  • The Blackboard is where we can create properties for our shader. If you’ve ever edited a material and seen how you can change the color, tiling, smoothness, etc. Those are properties.
  • The Main Preview is where we can see the shader applied to a model. By default it’s a sphere, but we can change this to whatever model we want by right clicking on it.

Unity Shader Graph blackboard and preview

Blackboard

To add a property to the blackboard, we can click on the ‘ + ‘ button and select a data type.

Unity shader creation options with Vector1 selected

If you’re used to coding in C#, you might be wondering what Vector1 is. Well this is basically an integer or floating point number. If we select Vector1 it will pop up in the blackboard. We can enter in a name for the property, i’m going to call it MyNumber.

  • Exposed is like private or public. Is the property visible in the editor?
  • Reference is the id for the property and what we need in order to get or change the property in-script.
  • Default is the default value.
  • Mode is if you want a slider, range, etc.

Vector1 Shader creation options

We can also add a color property. The Mode can be changed to HDR which allows us to add intensity to the color, which will make it bloom with screen effects.

Unity shader graph with mode set to HDR

Nodes

By default, we have the PBR Master node. A node is how you create shaders in shader graph. This node is the end point for the shader and is where everything else connects to.

Unity Shader Graph PBR Master

To create a node, right click the window and select Create Node. You can select a node by clicking through the different categories, or you can search for one.

Unity Shader Graph Create Node window

We can even drag our color property from the Blackboard into the editor and it will create a new node.

Unity shader graph with new property node

In the shader graph a node has either an input, output or input and output.

  • An input is on the left hand side of the node and is where we another node can send a result to.
  • An output is where we can connect the result of a node to another.

Our color property node only has an output, so we can connect it to another node. Right click and add an Add node. This one has two inputs and one output.

It adds both inputs together and outputs the result.

Unity shader graph with Add window

To connect the nodes: drag the color property output to the input of the Add node.

Unity Property Node connected to Add

Let’s add another color to this one. Create a Color node and connect that to the other Add node input.

Shader Graph color window connected to Add

I made our color property red and the color node green. Now adding those two colors together, results in yellow. We can now connect the output of the Add node into the PBR Master node’s Albedo input. This will set the model’s color.

Unity shader graph with yellow color for albedo

To change the preview model, we can right click on it and select Custom Mesh. Select the robot kyle model.

Shader graph main preview with yellow albedo

Applying the Shader

Back in the editor, we can create a new material called TestMaterial and set the shader to be Shader Graphs/ExampleShader. Then drag the material onto our model.

Unity scene with shader graph material applied

Congrautlations! You’ve started your journey with using shader graph by creating your first render. There are many more topics to discover, such as setting up a scriptable render, but you now have the skills you need to expand your knowledge!

 

Transcript

Hey, everyone, and welcome back to the course. In this lesson, we are going to go over how to create a new shader for Shader Graph, and then we’re gonna go over what is Shader Graph, how does it work and what all the various different components in that do, how to connect nodes, how to then create that into a material that we can apply to our model.

So, first of all, I’m going to create a new folder here called Shaders. And this is where we are going to store all of our various shaders we create with Shader Graph. So in here, I’m gonna right-click. To create a brand new shader, we can right-click here in the folder, go to create. Then we wanna hover over the Shader selection and choose PBR Graph. This creates us a Shader Graph. And I’m just gonna call this one our ExampleShader. And as you can see, it creates the shader folder, which is this S here.

And to open the Shader Graph editor, we can either double-click on this file or go up to this Open Shader Editor button in the Inspector. Click on that. Then we should open is a window something like this. It is a graph here that we can then edit and create our shaders in.

So how does it work? Well, Shader Graph is set up using nodes. You connect various nodes together, which can do various different things, like add two effects together, create new ones, allow for inputs. And the final result all plugs into the PBR Master node right here, which is something similar to how you would look at the standard asset, how you look at the standard shader. You have your Albedo, Normal, Metallic, Smoothness, Alpha, all that sorta stuff that, you would want to change the overall appearance of your model.

So, how do we actually navigate? First of all, well what we can do is to move around, we can hold down middle mouse button and start dragging around to just navigate around. You can also zoom in and out with the scroll wheel to have a much better view of your shader. And also, then, to create new nodes, we can right-click and go Create node. And here you’ll see that there are a bunch of various different categories, Artistic. It’s just a various number of selections.

We won’t, of course, be using all of these. We’ll probably be using only around maybe 20 or so different nodes throughout this course. We’ll go over in detail what they do and how they work with the other nodes, as well. But for now, let’s just have a look at some of the other aspects inside of the Shader Graph here.

First of all, you might see up here where it says example shader. This over here is the Blackboard. What the Blackboard is is basically like a variable list. If you’ve ever looked at a material, such as the standard shader or any other sort of materials you’ll see – you’ll notice that in the Inspector there are a bunch of different properties that you can edit, like the color, the smoothness, the metallic level, the mission, all these various different properties that you’ll also if you were to create a variable in a script. So that is basically what the Blackboard is.

To create a new variable or property, we can go and click on this plus icon here. And then we can choose between a bunch of different data types here. Now you might notice that you don’t have your traditional ints or floats here like you do in C#. Instead, if you wanna create just a number, you would select Vector1. And here we could name it something like MyNumber. And then we can enter in a default value for that we can choose if it is Exposed or not. This is pretty much similar to is it public or private does it appear in the inspector for us. This Reference here is if we want to access this property inside of a script, we will be accessing it by this reference, you can change that if you wish.

Some other variable types, you can have your colors, so you can see a default color here in the Color wheel. You can also choose that to be a HDR color, which stands for high dynamic range and allows you to add intensity. So if you do have things such as bloom, or post-processing effects like we currently do in our project, you’ll be able to see these colors more intensely, and they’ll appear to be very broad.

With this, then you can also, create other variables such as Texture2D to allow for inputs of textures. We will be using this in quite a few of our shaders. And that is pretty much all of the different examples will be using for us. You can of course guard for many more of these and have look at how they work. But for now, let’s go over how node work and what we can do with them.

Now a good starting point when working with shader node, when working in the shader, is to create an input node. Now one input node is it’s something that takes from the world or takes from the player’s input. This can be various things such as a number. An example here, for example, we could have one of the properties in the Blackboard, we could also have something like the position of the object, the position of the different vertices of the faces of the object or the normal direction of the object, or we could have something more procedural like some noise, or some randomly generated aspect like so to create a shader.

For example, I’m actually going to bring in the color here. So I can just actually drag this in. And as you can see, it will create a brand new node with our property. And what you can see here is actually a little dot, and what we can do is we can click and drag on that dot. And this will create a connection. Now what we can do is connect this to an input of another node. And a node has two things on it, a node has either and a node has birth one of either – an input and an output.

As you can see here, the property node only has an output because this in and of itself is an input node. And the PBR Master node here, only has inputs as this is pretty much the end, the end position for everything inside of the Shader Graph. There are other nodes that do have birth, and many nodes actually have birth, we could get a node here, we can go create node and we can actually create an add node.

So we can go Add. And what this add node does is it takes two inputs, and adds those values together into the output here. So what we could do is create two colors, and plug them into the add node. And what that would do is add those colors together and create a result and color. So let’s actually do that right now, by going it’s dragging out color here into the A1 input of the add node. As you can see it added like so. And what we could then do is create another color down here.

Now we could create a color here in the Blackboard. But we could also create what you could call hardcoded properties by just going – which is right-clicking here, go Create Node, we’ll search for Color. And it’ll create us a color input note here that we can just edit inside of the shader graph. So it – we’ll drag that also into the add node here.

Now let’s actually set a value for our default color appeal. Let’s set this to maybe a red. And then this one down here, we could set maybe to a green. And as you can see, if you have red plus green, that equals yellow. And then what we can do is actually take this output of the add node and plug this into albedo color, which is going to be what the actual final material looks like. So we can drag this out, plug it into Albedo. And as you can see down here in the main preview, we can actually see what the resulting shader will look like when applied to a model.

Also, in the main preview, you can increase the size, you can drag it around like so you can click on this little white rectangle down here to increase the size or decrease the size. I’m just going to keep this and drag it right down to the bottom here. You can do the same with the with the Blackboard – click on this little white rectangle here to increase the size and drag it around, it’s going to put it back up here as well.

And now what we can also do with the main preview is make it so that it can display a different type of model. We can right-click on the main preview, and we can choose between Sphere, you can have Capsule, we can have a Cube, we can also put a Custom Mesh. So you can click on that. Let’s choose a robot too. And then as you can see, this is what it looks like when applied to a robot model.

That is pretty much the basics of the Shader Graph.

Another thing there is that some nodes like the add here actually have a preview just showing you what so far in the process it looks like. So when we add those two colors together, it creates a preview of the color something all session is that the add node or isn’t just for colors. It’s pretty much for many different things. These aren’t like in C#, where you have very strict rules with what can go where what can be added together. Because in Shader Graph, you can pretty much add various different things together.

And you can get surprising results will be adding stuff like numbers together, colors together – we’ll even be adding colors and stuff like noise maps together to create a colored noise map and various other things as well.

Okay, but how do we actually set this as a material and apply it in game? Well, first of all, let’s click on the Save Asset button up here to save this asset. And then we can just click on the X up here to exit out of the shader graph. And we can then go to assets folder materials. And I’m going to right-click go create. I’m going to create a new material code, test material. And then to set this material to have a shader we can go up to the Shader here, click on this and we want to find Shader Graphs and ExampleShader and as you can see, it will pop up we also have that property’s here we have a number of property, we also have our color property.

And what we all want to do then is in our scene view, we can just simply drag and drop it onto a character. I can then change the color here. And as you can see, it will change the appearance adding this to the color red.

And in the next lesson we are going to be going over, a bunch of different nodes that will be using inside of our feature Shader Graphs, and I’ll just explain how they work and how they can even work together. So I’ll see y’all in the next lesson.

Interested in continuing? Check out the full Shader Graph for Beginners course, which is part of our Unity Game Development Mini-Degree.