Unity Term Book
Graphics & Rendering

Shader Graph

Shader Graph lets you build shaders by connecting nodes instead of writing HLSL — wire math and texture blocks together to create custom surface effects.

Imagine...

Shader Graph is a circuit board for graphics. Each node is a part: a Texture node samples an image, a Math node adds/multiplies color, a Time node makes things move. You wire ports instead of writing code. The result flows into the Master Stack — the last node that sets Base Color, Metallic, Normal... Visual, no HLSL required.

The concept in detail

Shader Graph is part of the Universal Render Pipeline (URP) and HDRP. It is not available on Built-in. Each graph is a .shadergraph asset — on save, Unity compiles it to HLSL. Create one via: Create → Shader Graph → URP → Lit/Unlit Shader Graph.

Nodes come in families: Input (Time, UV, Position, Normal, Color, Texture 2D, Vector), Math (Add, Multiply, Lerp, Step, Smoothstep, Sine, Noise…), Utility (Sample Texture 2D, Normal Map, Fresnel Effect…). The final result feeds Fragment (and Vertex) on the Master Stack.

Properties and Keywords are how you expose Inspector knobs. Properties live on the blackboard (left panel) — add a Float named “Speed” and every Material using this Shader gets a slider.

Common techniques: dissolve (Noise + Step + clip), outline (vertex expand), water ripple (sine + UV offset + normal), hologram (fresnel + emission + scanline). Shader Graph also supports Sub-Graphs — pack a group of nodes into a reusable component.

Example: Dissolve Effect Graph

Simple Noise
UV
Scale: 5
Out
→
Step
Edge
In
Out
→
Alpha Clip
In
Thresh: 0.5
Out
→
▣ Master Stack
Base Color
Alpha
Normal
Emission

// Noise → Step makes a hard edge → Alpha Clip cuts pixels → Dissolve effect

Hands-on steps

1

Open the Shader Graph Editor

Create → Shader Graph → URP → Unlit/Lit Shader Graph. Double-click the asset to open the editor.

2

Add Properties to the Blackboard

Blackboard (+) → add Float, Color, Texture2D... Drag a property onto the canvas to create an input node.

3

Connect nodes

Click-drag from an output port (right circle) to an input port (left circle). Port colors must match (Vector3 → Vector3, Float → Float).

4

Wire into the Master Stack

Fragment block (right side): drag the final result into Base Color, Alpha, Emission... Preview updates live.

5

Save → Create a Material

Ctrl+S to compile. Create a Material → pick the new Shader. Properties appear in the Material Inspector.

Interactive simulator

Pick an effect preset to see the matching node graph and a preview.

Progress:

Node Graph

Preview

Code example

Basic

Drive a Shader Graph property from C# — dissolve over time.

using UnityEngine;
using System.Collections;

public class DissolveEffect : MonoBehaviour
{
  // Property name must match the Shader Graph blackboard
  static readonly int DissolveID = Shader.PropertyToID("_DissolveThreshold");

  Renderer rend;

  void Awake() => rend = GetComponent<Renderer>();

  public void PlayDissolveOut(float duration = 1f)
  {
      StartCoroutine(DissolveRoutine(0f, 1f, duration));
  }

  public void PlayDissolveIn(float duration = 1f)
  {
      StartCoroutine(DissolveRoutine(1f, 0f, duration));
  }

  IEnumerator DissolveRoutine(float from, float to, float dur)
  {
      float t = 0f;
      while (t < dur)
      {
          t += Time.deltaTime;
          rend.material.SetFloat(DissolveID, Mathf.Lerp(from, to, t / dur));
          yield return null;
      }
      rend.material.SetFloat(DissolveID, to);
  }
}

Code example

Advanced

HLSL equivalent of the Dissolve Graph — useful when you need to optimize or build a Sub-Graph.

// HLSL fragment shader equivalent of the graph above
// (ShaderLab wrapper omitted for brevity)

// Properties matching the Shader Graph blackboard
float4 _BaseColor;
sampler2D _BaseMap;
float _DissolveThreshold;   // Driven from C#
sampler2D _NoiseMap;

float4 frag(v2f i) : SV_Target
{
  // Sample noise at the mesh UV
  float noise = tex2D(_NoiseMap, i.uv).r;

  // Step: clip the pixel if noise < threshold
  float dissolve = step(_DissolveThreshold, noise);
  clip(dissolve - 0.001f);  // Discard if dissolve < 0.001

  // Edge glow: pixels near the boundary light up
  float edgeWidth = 0.05f;
  float edge = step(_DissolveThreshold - edgeWidth, noise) * dissolve;
  float3 edgeColor = float3(1, 0.4, 0.1) * edge * 3f;

  float4 baseColor = tex2D(_BaseMap, i.uv) * _BaseColor;
  return float4(baseColor.rgb + edgeColor, baseColor.a);
}

📌 Quick recap

  • ▸Shader Graph only works with URP and HDRP
  • ▸Blackboard Properties → appear in the Material Inspector
  • ▸Sub-Graph: pack a node group for reuse
  • ▸Shader.PropertyToID() to hit a property fast from C#
  • ▸Alpha Clip on the Master Stack needs Render Face & Alpha Clip set

⚠️ Common mistakes

  • ❌ Port colors do not match → red wire

    Connecting Vector3 into Float — type mismatch

    ✅ Use Split/Combine nodes to convert types

  • ❌ The Shader Graph does not appear in the Material dropdown

    The graph was not saved (Ctrl+S)

    ✅ Save and wait for Unity to finish compiling (progress bar)