Shader Graph basics in Unity - Mini Project: Build & Apply

Shader Graph basics

📖 Scenario: You are creating a simple shader for a game object in Unity using Shader Graph. This shader will change the color of the object based on a color you choose.

🎯 Goal: Build a basic Shader Graph that colors a 3D object with a user-defined color.

📋 What You'll Learn

Create a Shader Graph asset

Add a Color property to the Shader Graph

Connect the Color property to the Base Color input of the PBR Master node

Apply the Shader Graph to a material and assign it to a 3D object

💡 Why This Matters

🌍 Real World

Game developers use Shader Graph to create custom looks for game objects without writing code, making it easier to design unique visuals.

💼 Career

Understanding Shader Graph basics is useful for roles like game artist, technical artist, and graphics programmer in game development studios.

1

Create a new Shader Graph asset

Create a new Shader Graph asset called SimpleColorShader in your Unity project.

Unity

# Create a new Shader Graph asset named SimpleColorShader
# Your code here

Hint

Use the Unity Editor's Create menu to make a new PBR Graph shader asset named SimpleColorShader.

2

Add a Color property to the Shader Graph

Open SimpleColorShader and add a new Color property called BaseColor with a default value of #FF0000FF (red).

Unity

// Open SimpleColorShader
// Add a Color property named BaseColor with default #FF0000FF
# Your code here

Hint

In the Shader Graph editor, add a Color property named BaseColor and set its default color to red.

3

Connect the Color property to the shader output

In SimpleColorShader, drag the BaseColor property node into the graph and connect it to the Base Color input of the PBR Master node.

Unity

// Drag BaseColor property node into graph
// Connect BaseColor to Base Color input of PBR Master node
# Your code here

Hint

Drag the BaseColor node into the graph and connect it to the Base Color input of the PBR Master node.

4

Apply the shader to a material and assign it to a 3D object

Create a new material called SimpleColorMaterial and assign the SimpleColorShader shader to it. Then assign SimpleColorMaterial to a 3D object in your scene. Finally, print "Shader applied successfully" to the console.

Unity

// Create material SimpleColorMaterial
// Assign SimpleColorShader to SimpleColorMaterial
// Assign SimpleColorMaterial to a 3D object
// Print "Shader applied successfully"
# Your code here

Hint

Create a material using the SimpleColorShader, assign it to your object's renderer, and print the success message.

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