Shader Graph basics in Unity - Step-by-Step Execution

Concept Flow - Shader Graph basics

Start Shader Graph

↓

Create Nodes

↓

Connect Nodes

↓

Set Node Properties

↓

Compile Shader

↓

Apply Shader to Material

↓

See Visual Result

This flow shows how you start a Shader Graph, add and connect nodes, set their properties, compile the shader, and apply it to see the effect.

Execution Sample

Unity

1. Create Color Node
2. Create Multiply Node
3. Connect Color to Multiply A and B
4. Connect Multiply to Output
5. Set Color to Red

This simple shader multiplies a color and outputs it, showing how nodes connect and affect the final color.

Execution Table

Step	Action	Node Created/Modified	Connections	Output Color
1	Create Color Node	Color Node (default white)	None	White
2	Create Multiply Node	Multiply Node	None	White
3	Connect Color to Multiply A and B	Color Node	Color -> Multiply Input A and B	White
4	Connect Multiply to Output	Multiply Node	Multiply Output -> Master Node	White
5	Set Color to Red	Color Node	Color set to Red	Red
6	Compile Shader	All Nodes	Connections active	Red
7	Apply Shader to Material	Material	Shader assigned	Red
8	Render Frame	Material	Shader runs	Red
9	End	No changes	No changes	Red

💡 Shader graph setup complete, shader applied and rendering red color.

Variable Tracker

Variable	Start	After Step 1	After Step 2	After Step 3	After Step 5	Final
Color Node Value	White	White	White	White	Red	Red
Multiply Node Inputs	None	None	None	Color Node outputs (A and B)	Color Node outputs (A and B)	Color Node outputs (A and B)
Output Color	None	None	None	White	Red	Red

Key Moments - 3 Insights

Why does the output color stay white until I set the Color Node to red?

Because initially the Color Node's default value is white (see execution_table step 1 and 5). The output color depends on the Color Node's value, so changing it to red updates the output.

What happens if I don't connect the Multiply Node to the Output?

The shader won't output the Multiply Node's result, so the final color remains default or black (see execution_table step 4). Connections define the data flow.

Why do I need to compile the shader after setting nodes?

Compiling processes the graph into GPU code so changes take effect (see execution_table step 6). Without compiling, changes won't appear in the material.

Visual Quiz - 3 Questions

Look at the execution table, what is the Color Node value after step 3?

A Black

B Red

C White

D None

💡 Hint

Check the 'Color Node Value' in variable_tracker after step 3.

At which step is the Multiply Node connected to the Output?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Look at the 'Connections' column in execution_table for when Multiply Output connects to Master Node.

If you change the Color Node to blue instead of red at step 5, what would the final output color be?

A Blue

B White

C Red

D Black

💡 Hint

The output color follows the Color Node value as shown in variable_tracker and execution_table.

Concept Snapshot

Shader Graph basics:
- Create nodes (Color, Multiply, Output)
- Connect nodes to define data flow
- Set node properties (e.g., color)
- Compile shader to apply changes
- Assign shader to material to see effect

Full Transcript

Shader Graph basics start by creating nodes like Color and Multiply. You connect these nodes to define how data flows from inputs to output. Initially, the Color Node defaults to white, so the output color is white. When you set the Color Node to red, the output color updates to red. Connecting the Multiply Node to the Output node is essential for the shader to produce the final color. After setting nodes and connections, compiling the shader processes these changes so they take effect. Finally, applying the shader to a material lets you see the color change in the scene. This step-by-step process helps beginners understand how Shader Graph works visually and practically.

Practice

1. What is the main purpose of Shader Graph in Unity?

easy

A. To write complex shader code manually

B. To create shaders visually by connecting nodes

C. To design 3D models for games

D. To animate characters in Unity

Solution

1. Step 1: Understand Shader Graph's function

   Shader Graph allows users to build shaders without writing code by using visual nodes.

2. Step 2: Compare options with Shader Graph's purpose

   Options B, C, and D describe other tasks unrelated to Shader Graph's visual shader creation.

3. Final Answer:

   To create shaders visually by connecting nodes -> Option B

4. Quick Check:

   Shader Graph = Visual shader creation [OK]

Hint: Shader Graph means visual node-based shader building [OK]

Common Mistakes:

• Confusing Shader Graph with coding shaders manually
• Thinking Shader Graph is for 3D modeling or animation
• Assuming Shader Graph is a text editor

2. Which of the following is the correct way to add a Color node in Shader Graph?

easy

A. Right-click in the graph and select Create Node > Color

B. Type 'color' in the console window

C. Drag a texture file into the graph

D. Use the Material Inspector to add a Color node

Solution

1. Step 1: Recall how to add nodes in Shader Graph

   Nodes are added by right-clicking in the graph area and choosing from the Create Node menu.

2. Step 2: Evaluate each option

   Right-click in the graph and select Create Node > Color correctly describes adding a Color node. Options A, B, and D do not add nodes in Shader Graph.

3. Final Answer:

   Right-click in the graph and select Create Node > Color -> Option A

4. Quick Check:

   Add nodes via right-click menu [OK]

Hint: Add nodes by right-clicking inside Shader Graph [OK]

Common Mistakes:

• Trying to add nodes via console or inspector
• Dragging textures instead of adding Color nodes
• Looking for Color node outside the graph editor

3. Given this Shader Graph setup: a Color node set to red connected to the Base Color input of the PBR Master node. What color will the object appear in the game?

medium

A. Blue

B. Green

C. Red

D. White

Solution

1. Step 1: Identify the Color node value

   The Color node is set to red, so it outputs red color values.

2. Step 2: Understand connection to PBR Master node

   The Color node connects to Base Color input, which defines the object's visible color.

3. Final Answer:

   Red -> Option C

4. Quick Check:

   Base Color input = Color node output [OK]

Hint: Base Color input shows connected Color node's color [OK]

Common Mistakes:

• Assuming default color instead of connected node's color
• Confusing node connections and outputs
• Ignoring the Color node's set value

4. You connected a Texture2D node to the Base Color input but the object appears white. What is the most likely error?

medium

A. The object has no mesh renderer

B. The PBR Master node is missing

C. The graph is saved but not compiled

D. The Texture2D node has no texture assigned

Solution

1. Step 1: Analyze the Texture2D node connection

   If the Texture2D node is connected but no texture is assigned, it outputs white by default.

2. Step 2: Check other options

   The PBR Master node is required but usually present; saving compiles automatically; mesh renderer missing would cause no rendering, not white color.

3. Final Answer:

   The Texture2D node has no texture assigned -> Option D

4. Quick Check:

   Unassigned Texture2D = white output [OK]

Hint: Assign textures to Texture2D nodes to avoid white output [OK]

Common Mistakes:

• Forgetting to assign a texture to Texture2D node
• Assuming saving is separate from compiling
• Confusing mesh renderer issues with shader color

5. How can you create a shader that smoothly changes an object's color from blue to green over time using Shader Graph?

hard

A. Use a Time node connected to a Lerp node blending blue and green colors, output to Base Color

B. Add a Color node set to blue and animate it manually in the inspector

C. Connect a Texture2D node with a blue-green gradient texture to Base Color

D. Use a Vector1 node to switch instantly between blue and green colors

Solution

1. Step 1: Understand color blending over time

   Smooth color change requires blending two colors based on time, which Lerp node does.

2. Step 2: Use Time node and Lerp node

   Connect Time node output to Lerp's T input, and set Lerp's A and B inputs to blue and green colors respectively, then connect to Base Color.

3. Step 3: Evaluate other options

   Add a Color node set to blue and animate it manually in the inspector requires manual animation, not smooth automatic change. Connect a Texture2D node with a blue-green gradient texture to Base Color uses static texture, no time change. Use a Vector1 node to switch instantly between blue and green colors switches instantly, no smooth transition.

4. Final Answer:

   Use a Time node connected to a Lerp node blending blue and green colors, output to Base Color -> Option A

5. Quick Check:

   Time + Lerp = smooth color change [OK]

Hint: Use Time node with Lerp for smooth color transitions [OK]

Common Mistakes:

• Trying manual animation instead of node-based blending
• Using static textures instead of procedural nodes
• Switching colors instantly without interpolation