Unity Term Book
Graphics & Rendering

Shader Graph

Shader Graph cho phép tạo shader bằng cách nối node thay vì viết HLSL — kéo thả khối toán và texture để tạo hiệu ứng bề mặt tùy chỉnh một cách trực quan.

Hãy tưởng tượng...

Shader Graph giống như bảng mạch điện tử nhưng cho đồ họa. Mỗi node là một linh kiện: node Texture lấy hình ảnh, node Math cộng/nhân màu sắc, node Time cho thứ di chuyển theo thời gian. Bạn nối dây (kết nối port) giữa các node thay vì viết code. Kết quả cuối cùng chảy vào Master Stack — node cuối cùng quyết định màu Base, độ Metallic, pháp tuyến Normal... Hoàn toàn trực quan, không cần biết HLSL.

Khái niệm chi tiết

Shader Graph là một phần của Universal Render Pipeline (URP)HDRP. Không khả dụng với Built-in Pipeline. Mỗi đồ thị Shader Graph là asset .shadergraph — khi save, Unity tự động compile thành HLSL. Bạn tạo Shader Graph qua: Create → Shader Graph → URP → Lit/Unlit Shader Graph.

Hệ thống node gồm nhiều loại: Input nodes (Time, UV, Position, Normal, Color, Texture 2D, Vector), Math nodes (Add, Multiply, Lerp, Step, Smoothstep, Sine, Noise…), Utility nodes (Sample Texture 2D, Normal Map, Fresnel Effect…). Kết quả cuối dồn vào Fragment (và Vertex) trong Master Stack.

Properties và Keywords là cách khai báo tham số có thể chỉnh trong Material Inspector. Properties xuất hiện trong blackboard (bảng bên trái) — khi thêm một Float property “Speed”, nó tự động hiện thành slider trong Inspector của mọi Material dùng Shader này.

Kỹ thuật phổ biến: dissolve effect (dùng Noise + Step + clip), outline shader (vertex expand), water ripple (sine + UV offset + normal), hologram (fresnel + emission + scanline). Shader Graph còn hỗ trợ Sub-Graph — đóng gói nhóm node thành component tái sử dụng.

Ví dụ: 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 tạo ranh giới rõ ràng → Alpha Clip cắt pixel → Dissolve effect

Hướng dẫn thực hành

1

Mở Shader Graph Editor

Create → Shader Graph → URP → Unlit/Lit Shader Graph. Double-click asset để mở graph editor.

2

Thêm Properties vào Blackboard

Blackboard (+) → thêm Float, Color, Texture2D... Kéo property từ blackboard vào canvas để tạo node input.

3

Kết nối node

Click-drag từ output port (tròn bên phải) sang input port (tròn bên trái). Màu port phải khớp (Vector3 → Vector3, Float → Float).

4

Kết nối vào Master Stack

Fragment block (góc phải): kéo kết quả cuối vào Base Color, Alpha, Emission... Preview hiển thị realtime.

5

Save → Tạo Material

Ctrl+S để compile. Tạo Material mới → chọn Shader vừa tạo. Properties tự xuất hiện trong Material Inspector.

Trình mô phỏng tương tác

Chọn preset hiệu ứng để xem node graph tương ứng và preview kết quả.

Tiến trình:

Node Graph

Preview

Ví dụ Code

Cơ bản

Điều khiển property của Shader Graph từ C# script — ví dụ: dissolve effect theo thời gian.

using UnityEngine;
using System.Collections;

public class DissolveEffect : MonoBehaviour
{
  // Property name phải khớp với tên trong 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);
  }
}

Ví dụ Code

Nâng cao

HLSL tương đương Dissolve Graph — hiểu code phía sau khi cần tối ưu hoặc tạo Sub-Graph.

// HLSL fragment shader tương đương graph ở trên
// (ShaderLab wrapper không được hiển thị ở đây cho ngắn gọn)

// Properties tương ứng Shader Graph blackboard
float4 _BaseColor;
sampler2D _BaseMap;
float _DissolveThreshold;   // Giá trị từ C# script
sampler2D _NoiseMap;

float4 frag(v2f i) : SV_Target
{
  // Sample noise texture tại UV của mesh
  float noise = tex2D(_NoiseMap, i.uv).r;

  // Step: pixel bị clip nếu noise < threshold
  float dissolve = step(_DissolveThreshold, noise);
  clip(dissolve - 0.001f);  // Xoá pixel nếu dissolve < 0.001

  // Edge glow: pixel gần ranh giới sẽ phát sáng
  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);
}

📌 Ghi nhớ nhanh

  • Shader Graph chỉ hoạt động với URP và HDRP
  • Blackboard Properties → xuất hiện trong Material Inspector
  • Sub-Graph: đóng gói node nhóm để tái sử dụng
  • Shader.PropertyToID() để truy cập property nhanh từ C#
  • Alpha Clip trong Master Stack cần set Render Face & Alpha Clip

⚠️ Lỗi thường gặp

  • ❌ Port màu không khớp → dây đỏ

    Nối Vector3 vào Float — type mismatch

    ✅ Dùng node Split/Combine để chuyển đổi type

  • ❌ Shader Graph không thấy trong Material dropdown

    Chưa save Shader Graph (Ctrl+S)

    ✅ Save và đợi Unity compile xong (progress bar góc dưới)