【Unity】Getting Started with Unity Shader Graph: Creating Shaders Without Programming

Overview

"I want to create shaders, but programming seems too difficult." "I can't read HLSL or Cg code."

Shader Graph is Unity's official node-based visual shader editor. By simply connecting nodes with wires, you can create a wide variety of shaders -- from glowing lava materials and rippling water surfaces to hologram-like effects.

Differences from Traditional Shaders

Challenges with Traditional Shaders

• Programming knowledge is required
• Debugging is difficult
• Iteration takes a long time
• High barrier for non-programmers

Advantages of Shader Graph

• No programming required - Just connect nodes
• Visually intuitive - See the processing flow at a glance
• Real-time preview - Instantly see changes as you make them
• High reusability - Create shared components with Sub Graphs
• Supports URP and HDRP - Built-in RP support varies by version

Built-in RP Support Status:

Unity Version	Built-in RP Support
2021 and earlier	Not supported
2022.1 - 2022.3	Unlit Shader Graph only
2023.1 and later	Unlit + partial Lit shader support

Note that Built-in RP does not provide full Lit Shader Graph functionality -- certain features like custom lighting models have limitations.

Shader Graph Components

Component	Description
Shader Graph Asset	File that stores the shader configuration
Blackboard	List of properties and keywords
Master Stack	Final output to the shader
Node	Individual processing unit of a shader
Property	External shader parameter
Sub Graph	Reusable component

Shader Graph Asset Types

Type	Usage
Unlit Shader Graph	Not affected by lighting (for UI, effects)
Lit Shader Graph	Affected by lighting (for PBR materials)

Master Stack Structure

The Master Stack consists of two stages:

Stage	Processing	Main Usage
Vertex	Vertex shader processing	Vertex animation, position deformation
Fragment	Fragment shader processing	Color, textures, lighting

Position port: Connecting to the Position port in the Vertex stage lets you deform vertex positions (e.g., rippling water surfaces, grass swaying in the wind).

Lit Shader Graph PBR Parameters

Parameter	Description
Base Color	Base color
Normal	Normal map (surface detail)
Metallic	Metalness (0 = non-metal, 1 = metal)
Smoothness	Smoothness (0 = rough, 1 = smooth)
Emission	Emissive color
Ambient Occlusion	Ambient occlusion (shadow intensity)
Alpha	Transparency (used when Transparent is enabled)

Setting Up Transparent/Translucent Materials

To create glass or translucent materials:

1. Select the Shader Graph and open the Graph Inspector
2. Change Surface Type to Transparent
3. Connect a transparency value to the Alpha port on the Master Stack (0 = fully transparent, 1 = opaque)

Key Graph Inspector Settings:

Setting	Options	Usage
Surface Type	Opaque / Transparent	Opaque / Transparent
Render Face	Front / Back / Both	Which face to render
Alpha Clipping	On / Off	Texture cutout
Two Sided	On / Off	Double-sided rendering
Cast Shadows	On / Off	Shadow casting

Alpha Clipping: For foliage or grass where you need texture cutout, enable Alpha Clipping and set the Alpha Clip Threshold.

Creating and Using Shader Graph

Creating a Shader Graph Asset

1. Right-click in the Project window
2. Select Create > Shader Graph > URP > Unlit Shader Graph
3. Double-click the asset to open the editor

Creating and Connecting Nodes

1. Right-click in the workspace > Create Node
2. Search for nodes using the search field
3. Drag from the node's output port to the Master Stack's input port

Creating and Applying Materials

1. Right-click the Shader Graph asset > Create > Material
2. Drag and drop the created material onto an object

Dynamic Shaders with Properties

Adding Properties

1. Click the + button on the Blackboard
2. Select the property type (Color, Float, Texture2D, etc.)
3. Drag and drop the property into the Shader Graph window

Changing Colors from Script

// Method 1: Direct material change (creates a material instance)
renderer.material.SetColor("_Main_Color", Color.red);

// Method 2: MaterialPropertyBlock (maintains batching, recommended)
var mpb = new MaterialPropertyBlock();
renderer.GetPropertyBlock(mpb);
mpb.SetColor("_Main_Color", Color.red);
renderer.SetPropertyBlock(mpb);

SRP Batcher and MaterialPropertyBlock:

• Using MaterialPropertyBlock in an SRP Batcher-enabled environment breaks SRP Batcher batching
• For a small number of objects, MaterialPropertyBlock works fine
• For many objects, material instances may benefit more from SRP Batcher optimization
• Choose based on your use case

Important: Reference Names When accessing properties from script, use the Reference name set in the Blackboard. Select a property in the Blackboard and check the Reference field in the Graph Inspector. By default, it follows the _PropertyName format (e.g., Main Color becomes _Main_Color, with spaces converted to underscores). You can freely change the Reference name in the Graph Inspector.

Texture-Based Shaders

1. Add a Texture2D property
2. Add a Sample Texture 2D node
3. Connect the property to the Texture input
4. Connect the RGBA output to Base Color

Scrolling Textures

1. Add a Time node (to get time)
2. Add a Vector2 node (to apply time only in the X direction)
3. Add a Tiling and Offset node
4. Connect the Vector2 output to the Offset input
5. Connect to the UV input of Sample Texture 2D

Use a Multiply node to adjust the speed.

Commonly Used Nodes

Input Nodes

Node	Description
Time	Gets time (for animation)
UV	Gets mesh UV coordinates
Position	Gets vertex position

Texture Nodes

Node	Description
Sample Texture 2D	Samples a texture
Tiling and Offset	Applies tiling and offset to UV coordinates

Math Nodes

Node	Description
Add, Subtract, Multiply, Divide	Basic arithmetic operations
Lerp	Linear interpolation
Clamp	Clamps a value within a range

Procedural Nodes

Node	Description
Noise	Generates noise
Checkerboard	Generates a checkerboard pattern
Gradient	Generates a gradient
Fresnel Effect	View angle-based effect (rim lighting, hologram)

Fresnel Effect Power values:

• Low values (1-2): Effect spreads across a wide area (overall glow)
• High values (5-10): Effect concentrates on edges only (sharp rim light)

Creating Sub Graphs

Sub Graphs let you group multiple nodes into reusable components.

Creation Steps

1. Right-click in the Project window > Create > Shader Graph > Sub Graph
2. Define inputs and outputs in the Sub Graph editor
3. Connect processing nodes
4. Save and use in other Shader Graphs

Use Cases

• Common noise generation
• UV manipulation patterns
• Shared color conversion logic

Example: UV Rotation Sub Graph

I/O	Name	Type
Input	UV	Vector2
Input	Angle	Float
Output	RotatedUV	Vector2

Processing: Uses a Rotate node to rotate the UV by the specified Angle, outputting it as RotatedUV. This can be reused for texture rotation animations and similar effects.

Advanced Features

Keywords (Conditional Branching)

Keywords enable #ifdef-equivalent conditional branching within shaders.

1. In the Blackboard, click + > select Keyword
2. Choose from Boolean/Enum/Built-in
3. Drag the Keyword onto the graph -- a Keyword node is automatically generated
4. Connect different processing to each output of the Keyword node

Optimization: Using Keywords compiles different shader variants based on conditions, allowing unnecessary processing to be skipped.

Custom Function Node

A node that lets you write HLSL code directly. Use this when you need processing that Shader Graph cannot achieve on its own.

1. Right-click > Create Node > search for Custom Function
2. Write HLSL code as a file or inline
3. Define and connect inputs/outputs

Next steps: If you know HLSL, try using Custom Function Nodes for advanced rendering techniques.

Common Issues and Solutions

Symptom	Cause and Solution
Turns pink	Shader compilation error. Check errors in Graph Inspector
Material is completely black	Nothing connected to Base Color, or Normal Map format not set
Won't become transparent	Surface Type is still set to Opaque
Normal Map doesn't appear purple	Set Texture Type to "Normal map" in the texture's Import Settings

Shader Variants: Increasing Keywords causes shader variant counts to grow exponentially (n Boolean keywords create up to 2^n variants). For mobile, it's recommended to exclude unnecessary variants in Graphics Settings.

Summary

Shader Graph is a powerful tool for creating shaders without programming.

• Node-based - Create complex shaders just by connecting nodes
• Real-time preview - See changes instantly
• Properties - Adjust values from materials, modifiable from scripts too
• Sub Graphs - Reuse common components

Start with simple color changes and texture display, then gradually move on to animations and effects.