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) và 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
// 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
Mở Shader Graph Editor
Create → Shader Graph → URP → Unlit/Lit Shader Graph. Double-click asset để mở graph editor.
Thêm Properties vào Blackboard
Blackboard (+) → thêm Float, Color, Texture2D... Kéo property từ blackboard vào canvas để tạo node input.
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).
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.
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ả.
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 caoHLSL 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)