🎨 Lesson 8.3: Intro to Shader Graph

Enabling Shader Graph

If your project was created from the URP (Universal 3D) template, the Shader Graph package is already installed — it's a dependency of URP. To confirm, open Window ▸ Package Manager, switch the dropdown to Packages: In Project, and look for Shader Graph. If it's missing, select Unity Registry and install it there.

Shader Graph produces shaders that are render-pipeline specific. In this course we always target URP, so every graph you make uses a URP target. (A graph authored for URP won't work under the Built-in pipeline, and vice versa.)

Creating a Shader Graph

Right-click in the Project window and choose Create ▸ Shader Graph ▸ URP ▸ Lit Shader Graph (or Unlit for effects that shouldn't receive scene lighting). Name it something like SG_MyFirst. Two flavours:

• Lit — receives scene lighting and shadows, like the standard Lit shader. Use for surfaces (walls, characters, water).
• Unlit — ignores lighting; the colour you output is exactly what's drawn. Use for UI effects, holograms, glowing energy, and many stylized effects.

Double-click the asset to open the Shader Graph editor — a dark canvas that fills the window. Let's learn to read it before we build.

Anatomy of the Editor

Here is the Shader Graph editor rebuilt faithfully — the exact graph we'll build in this lesson: a Color property feeding Base Color, and a scrolling texture (Time + UV → Tiling And Offset → Sample Texture 2D) feeding both Base Color and Emission.

💡 Read a graph like a river. Data flows left to right, always ending at the Master Stack. Any node not connected (directly or through a chain) to the stack does nothing to the final shader. When a graph confuses you, start at Base Color and trace the wires backward.

Your First Graph: Color → Base Color

The simplest useful graph is one node's worth of work: output a solid colour. Here's the whole thing:

1. Open your SG_MyFirst Lit graph.
2. Right-click the canvas ▸ Create Node, search Color, and add a Color node. Click its swatch and pick a colour.
3. Drag from the Color node's output port to the Base Color input on the Fragment block of the Master Stack.
4. Click Save Asset (top-left).

That's a complete, valid shader. Assign it to a material and the material is that colour, lit by your scene. Trivial — but it proves the core loop: a node's output connected to the Master Stack becomes the shader's result.

Conceptually, the data path of the full lesson graph looks like this:

Figure 2: The same graph as a flow — properties and nodes converging on the Master Stack's Base Color and Emission.

The Blackboard & Properties

Hard-coding a colour inside the graph is fine for one object. But you usually want the colour adjustable per material, in the Inspector, without reopening the graph. That's what the Blackboard is for.

Click + on the Blackboard and add a Color property; rename it BaseTint. Now:

• Drag it onto the canvas to get a property node you can wire up (the pink-capped boxes in Figure 1).
• Because it's a property (not a constant), it shows up as an editable field on every material that uses this graph.

Common property types: Color, Float (a slider or number), Vector2/3/4, Texture2D, and Boolean. In Figure 1 the Blackboard holds BaseTint (Color), MainTex (Texture2D), and ScrollSpeed (Vector2) — everything the material's user can tweak.

A Time + UV Effect

Static colour is boring. The magic of shaders is that they can move without any C#. Two nodes unlock that:

• Time — outputs the seconds elapsed, ever-increasing. Feed it into anything and that thing animates.
• UV — outputs each pixel's texture coordinates (0–1 across the surface). It's how a shader knows where on the surface it is.

To scroll a texture, you offset its UVs over time:

1. Add a Time node and a ScrollSpeed Vector2 property; Multiply them so the offset grows each second.
2. Add a UV node and a Tiling And Offset node. Feed UV into its UV input and the Time×Speed result into its Offset input.
3. Feed Tiling And Offset's output into the UV input of a Sample Texture 2D node (with MainTex in its Texture slot).
4. Wire the sampled colour into Base Color (multiplied by BaseTint) and also into Emission for a glow.

Save, and the texture on your material now scrolls — an animated shader, and you never touched a script. This exact pattern (UV + time) powers scrolling force-fields, flowing lava, waterfalls, and conveyor belts.

Assigning to a Material

A Shader Graph asset is a shader, not a material — you still need a material to use it. Two ways:

• Right-click the graph asset ▸ Create ▸ Material — makes a material already pointing at this shader.
• Or create a material normally, then in its Inspector set Shader ▸ Shader Graphs ▸ SG_MyFirst.

Now the material's Inspector shows BaseTint, MainTex, and ScrollSpeed — the very properties you put on the Blackboard. Drop a texture into MainTex, pick a tint, and drag ScrollSpeed. Assign the material to any renderer and your custom shader is live in the scene.

💡 One graph, many looks: because the tweakable bits are properties, you can make a dozen materials from this single graph — a slow blue force-field, a fast red one, a scrolling green toxic sludge — without editing the graph again.

Hands-on Challenge

Summary

🚀 What's Next?

You can now read a graph, expose properties, and animate with Time. In Lesson 8.4: Building a Dissolve Shader you'll put it all together into a real effect — noise + a threshold that clips pixels away, plus a glowing edge — and drive it from a script so an object disintegrates on cue.