Shader Graph in Unity for Beginners

A shader is a small program containing instructions for the GPU. They describe how to calculate the onscreen color of a particular material. If you want to learn more about the basics of shaders, take a look at our Introduction to Shaders in Unity.

Though Unity provides a Standard Shader, sometimes you may need to make an effect beyond what the out-of-the-box shader can do.

Historically, this has required a special shading language, such as Cg or HLSL, with conventions a bit different than typical gameplay scripting. For many, shader writing is a neglected area of game development, simply because of the extra learning curve involved.

Unity introduced Shader Graph to allow you to more easlily write shaders, with minimal to no coding. Best of all, Shader Graph makes it easy to get started with a visual, interactive interface.

In this tutorial, you’re going to create your first shader graph in Unity right now!

Getting Started

This tutorial uses Unity version 2019.1 or newer. You can get your version of Unity here.

Use the Download Materials button at the top or bottom of this page to grab the materials for this tutorial. Then unzip its contents and open Intro to Shader Graph Starter inside Unity.

The RW folder in the Project Window is organized as follows:

• Fonts: Fonts used in the scene.
• Materials: Materials for the scene.
• Models: 3D meshes for the game pieces and background.
• PostFX: Post-processing effects for scene rendering.
• Prefabs: Various pre-built components.
• Scenes: The game scene.
• Scripts: Custom scripted game logic.
• Shaders: The shader graphs created for this tutorial.
• Sprites: The sprite used as part of the instructions.
• Textures: Texture maps for the game pieces and background.

Now, load the scene called TangramPuzzle from the Scenes folder.

This is a simple game called Tangram, which originated in China in the 1800s. The goal is to rearrange seven flat geometric shapes into stylized pictograms or silhouettes.

Enter Play mode in the Editor to test the demo game.

You can click and drag the shapes. Use the cursor keys to rotate the pieces. Turn and shift the pieces so they don’t overlap.

Can you figure out how to move the seven shapes into these patterns?

Ok, the game technically works, but it doesn’t give you any visual feedback about your selected game piece.

What if you could make your game piece glow as the mouse makes contact? That might improve the user interface.

This is the perfect chance to show off Shader Graph!

Checking Pipeline Settings For Shader Graph

Shader Graph only works with the relatively new Scriptable Render Pipeline, either the High-Definition Render Pipeline or Lightweight Render Pipeline.

When creating a new project for use with Shader Graph, be sure to choose the correct template.

Your example project is already configured to use the Lightweight Render Pipeline. First, confirm in the PackageManager that you have the Lightweight RP and ShaderGraph packages installed by selecting Window ► PackageManager.

Then, select from the available versions and use the Update to button if necessary. The latest verified version is usually the safest choice.

Once you’ve updated your packages, double-check that your pipeline settings are correct under Edit ► Project Settings.

In the Graphics tab, the Scriptable Render Pipeline Settings should read LWRP-HighQuality. This sets your project to use the highest default setting for the Lightweight Render Pipeline.

Close this window once you’ve confirmed that you’re using one of the Scriptable Render Pipeline assets.

Creating a PBR Graph

A material and a shader always work together to render a 3d mesh on-screen. So, before you can build your shader, you’ll need a material as well.

First, use the Create button in the Project view to generate a new material in the RW/Materials folder. Select Create ► Material, then rename it to Glow_Mat.

Then, in the RW/Shaders folder, create a PBR Graph by selecting Create ► Shader ► PBR Graph. This is a shader graph that supports physically-based rendering, or PBR.

Name it HighlightShaderGraph.

The Glow_Mat material currently uses the default shader for the LightweightRenderPipeline called LightweightRenderPipeline/Lit.

Change it to use the new shader graph you just created. With Glow_Mat selected, click on the Shader dropdown at the top of the Inspector and select Shader Graphs ► HighlightShaderGraph.

The Glow_Mat material will change to a slightly lighter shade of gray but otherwise remain fairly drab. Don’t worry! You’ll remedy that soon.

Now, double-click the HighlightShaderGraph asset or click Open Shader Editor in the Inspector. This opens the Shader Graph window.

You should familiarize yourself with the main parts of this interface:

• The main workspace is this dark gray area where you’ll store your graph operations. You can right-click over the workspace to see a context menu.
• A node is a single unit of your graph. Each node holds an input, an output or an operation, depending on its ports. Nodes connect to one another using edges.
• The Master node is the final output node of your graph. In this example, you’re using the physically-based rendering variant, also called the PBR Master node. You may recognize several properties, such as Albedo, Normal, Emission and Metallic, from Unity’s Standard Shader.
• The Blackboard can expose certain parts of the graph to the Inspector. This allows the user to customize certain settings without needing to edit the graph directly.
• The Main Preview interactively shows the current shader’s output on a sphere.

By connecting various nodes together, you can make a shader graph, which Unity compiles and sends to the GPU.

Creating a Color Node

First off, give your shader some base color. This is done by feeding a color node into the Albedo component of the PBR Master Node. Right-click in the workspace area to create your first node from the context menu by selecting Create Node ► Input ► Basic ► Color.

Note that there are hundreds of nodes in the Create Node menu! While it may seem overwhelming at first, you’ll quickly become familiar with the most commonly used ones.

Next, drag the node around the workspace using its title bar. Then, drop it somewhere to the left of the PBR Master node.

The Color node allows you to define a single color. Click the color chip and select a nice red hue, such as R: 128, G: 5, B: 5.

To output the color to your PBR Master node, drag the Out port into the Albedo port, which represents the base color of your shader.

Once you connect the nodes with an edge, you should see the Main Preview sphere turn red.

Success! In shader writing, making a simple solid colored shader is the equivalent of coding Hello, world! :]

Though you might not realize it, you created your first custom shader!