I’d like to write a quick introduction to Shader Graph, since shaders are “black magic” for a lot of developers (me included) and this tool can help you creating them easily.
Once you understand how it works it’s really easy to start experimenting and start being called a wizard.
If you need to install Shader Graph, here’s my installation guide.
Quick post summary:
- What is Shader Graph?
- Create a shader
- Shader Graph Window
- How it works
- PBR and Unlit shaders
- Shaders example
Shader Graph is a new tool (available from version 2018.1) that enables you to build shaders visually, instead of writing code and magic.
- To create a shader (with the shader graph): go to the project window -> right click -> create -> shader -> pbr or unlit graph.
Then, select it and click “open shader editor” in the inspector. This way you can start modifying the shader using this tool.
Once you open your shader you can see different panels, which functions are very intuitive.
Save Asset – Save your shader (otherwise your changes will only be visible in the shader window).
Show In Project – Focus (highlight) your Shader in the Project Window.
Title bar documentation.
The workspace is where you can create nodes and manage them, you can also move “panels”, expand or collapse them, zoom in and zoom out.
You can add Properties (variables) to your shaders and you can choose their default values. (Property types documentation).
If we set a variable “Exposed” it will be shown in the inspector.
The “Master Preview” panel represents your shaders and updates them real-time. You can see the preview on different shapes.
Master Preview documentation.
Remember: if you want to apply your changes on your materials, remember to save the asset (button on the title bar).
A node could be an input, an operation or an output.
For example you can choose a color and multiply it for a value. The “color” is a node, “value” is another node and then the “multiply node” which multiplies node A and B.
You can connect nodes (the “dots” are called Ports and the connections are called “Edges”) and allow data to flow through the shader.
There are a lot of nodes available and you can create them from the Context Menu.
You can also create custom nodes, but we’ll talk about this in its own tutorial.
Now that you know about the Shader Graph Window, we can start talking about how this tool works.
All shaders must end with a “master node”, which is an end node that elaborates your shader.
At the moment there are two master nodes: “PBR” and”Unlit” and you can see their differences below. (Mater nodes available)
You can create different nodes, applying operations (also logic conditions) and seeing the result in real time. You just need to connect them? and the “magic” is done.
You can already see the main difference in those images. (Left: PBR shader, Right: Unlit shader)
The PBR shader ends with a “PBR Master” node? and creates a material affected by light (with “physical properties”, like the metallic value).
The Unlit shader ends with an “Unlit Master” node and creates a material that is not affected by light, as the name says.
Your shader must have a master node to work (and only one).
If you created a PBR shader and you want to change it in an Unlit? shader, you can delete the “PBR master” and add the “Unlit master” node.
This way you can “convert” a shader anytime.
If you want to change a material’s color in the inspector, you can create an exposed color property, create it’s property node in the workspace and connect it to the master’s node albedo port. Here’s an image for a better explanation.
You can multiply a value for the Sin of the time (so it goes from -1 to 1 periodically).
I’ve also added the node “Absolute”, so the SinTime only goes from 0 to 1.
That’s it! I hope this guide was helpful, I’ll share more complex shaders in the next days.
Have fun experimenting!