Unity Term Book
图形与特效

Shader Graph

Shader Graph 让你在 Unity 用可视化节点连线而不是手写 HLSL 来制作着色器，把数学运算与贴图采样块接在一起即可做出自定义表面效果。适合美术与 TA 快速迭代材质风格，并与 URP/HDRP 深度集成；既降低着色器入门门槛，也可交给程序继续做性能调优、变体管理与多平台的性能优化。

想象一下...

Shader Graph 是图形用的电路板。每个节点是零件：Texture 节点采样图像，Math 节点加减乘除颜色，Time 节点让画面动起来。你连端口而不是写代码。结果流入 Master Stack——最后设置 Base Color、Metallic、Normal… 的节点。可视化，无需手写 HLSL。

概念详解

Shader Graph 属于 Universal Render Pipeline （URP） 与 HDRP，Built-in 不可用。 每个图是 .shadergraph 资源——保存时 Unity 编译为 HLSL。创建方式： Create → Shader Graph → URP → Lit/Unlit Shader Graph。

节点分几类：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…）。最终结果接到 Master Stack 上的 Fragment（以及 Vertex）。

Properties 与 Keywords 用来暴露 Inspector 旋钮。 Properties 在 blackboard（左侧面板）——加一个名为 “Speed” 的 Float，使用该 Shader 的每个 Material 都会多一个滑条。

常见技法：dissolve（Noise + Step + clip）、outline （顶点外扩）、water ripple（sine + UV 偏移 + normal）、 hologram（fresnel + emission + 扫描线）。Shader Graph 还支持 Sub-Graphs——把一组节点打成可复用组件。

示例：溶解效果图

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 形成清晰边界 → Alpha Clip 裁切像素 → Dissolve 效果

动手步骤

1

打开 Shader Graph 编辑器

Create → Shader Graph → URP → Unlit/Lit Shader Graph。双击资源打开编辑器。

2

在 Blackboard 添加 Properties

Blackboard（+）→ 添加 Float、Color、Texture2D… 把属性拖到画布即可生成输入节点。

3

连接节点

从输出端口（右侧圆点）拖到输入端口（左侧圆点）。端口颜色必须匹配（Vector3 → Vector3，Float → Float）。

4

接到 Master Stack

右侧 Fragment 块：把最终结果拖到 Base Color、Alpha、Emission… 预览实时更新。

5

保存 → 创建 Material

Ctrl+S 编译。Create Material → 选新 Shader。Properties 会出现在 Material Inspector。

交互模拟器

选择效果预设，查看对应节点图与预览。

进度：

Node Graph

Preview

代码示例

基础

从 C# 驱动 Shader Graph 属性——随时间溶解。

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);
  }
}

代码示例

进阶

溶解图的 HLSL 等价写法——优化或做 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);
}

📌 快速记忆

  • ▸Shader Graph 仅适用于 URP 与 HDRP
  • ▸Blackboard Properties → 出现在 Material Inspector
  • ▸Sub-Graph：打包节点组以便复用
  • ▸用 Shader.PropertyToID() 从 C# 快速访问属性
  • ▸Master Stack 上的 Alpha Clip 需设置 Render Face 与 Alpha Clip

⚠️ 常见错误

  • ❌ 端口颜色不匹配 → 红线

    把 Vector3 接到 Float——类型不匹配

    ✅ 用 Split/Combine 节点转换类型

  • ❌ Material 下拉列表里找不到 Shader Graph

    图未保存（Ctrl+S）

    ✅ 保存并等待 Unity 编译完成（进度条）