Introduction to Shader Graph

By 10/07/2018 March 20th, 2019 Shaders

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?

Shader Graph is a new tool (available from version 2018.1) that enables you to build shaders visually, instead of writing code and magic.

Shader Graph Documentation.


Create a shader

  • 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.

create shader - unity3d shader graph tutorial


Shader Graph Window

Once you open your shader you can see different panels, which functions are very intuitive.

 

Title Bar

title bar - unity3d shader graph tutorial
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.

Workspace

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.

Workspace documentation.
workspace - unity3d shader graph tutorial

Context menu

This panel lets you create/manage nodes. It shows up?pressing space or the right mouse click.
Context menu documentation.
context menu - unity3d shader graph tutorial

Blackboard

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.

Blackboard documentation.
blackboard - unity3d shader graph tutorial

Master Preview

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).
master preview - unity3d shader graph tutorial


Nodes

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.
Nodes documentation

You can also create custom nodes, but we’ll talk about this in its own tutorial.

nodes example - unity3d shader graph tutorial


How it works

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.


PBR and Unlit Shaders

pbr and unlit cubes - unity3d shader graph tutorial

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.

pbr and unlit master nodes - unity3d shader graph tutorial

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.


Shaders example

PBR – Change color (with property)

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.

unity3d shader graph example

PBR – Change color (property and SinTime)

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!