Unity Term Book
グラフィックスとエフェクト

Shader Graph

Shader Graph は HLSL を書かずノード接続でシェーダーを作る仕組みです——数学やテクスチャを配線し、カスタム表面効果を作れます。Dissolve、Fresnel Effect、Blackboard プロパティ操作まで実践的に学べます。図解とシミュレーターでノード配線を追い、自学にも使えます。

想像してみてください...

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（左パネル）にあり——Float “Speed” を追加すると、この Shader を使う すべての Material にスライダーが付きます。

よくある技法：dissolve（Noise + Step + clip）、outline （頂点拡張）、water ripple（sine + UV offset + normal）、 hologram（fresnel + emission + scanline）。Shader Graph は Sub-Graphs もサポート——ノード群を再利用可能な部品にまとめられます。

例：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 で境界をはっきり → Alpha Clip でピクセルを切る → Dissolve 効果

ハンズオン手順

1

Shader Graph Editor を開く

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 でコンパイル。Material を作成 → 新しい Shader を選ぶ。Properties が Material Inspector に表示されます。

インタラクティブシミュレーター

エフェクトプリセットを選び、対応するノードグラフとプレビューを確認。

進行:

Node Graph

Preview

コード例

基本

C# から Shader Graph プロパティを駆動——時間とともに dissolve。

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

コード例

上級

Dissolve Graph の 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: ノード群を再利用用にまとめる
  • ▸C# から速く当てるなら Shader.PropertyToID()
  • ▸Master Stack の Alpha Clip には Render Face と Alpha Clip の設定が必要

⚠️ よくあるミス

  • ❌ ポート色が合わず赤い線

    Vector3 を Float に接続——型不一致

    ✅ Split/Combine ノードで型を変換

  • ❌ Shader Graph が Material ドロップダウンに出ない

    グラフが未保存（Ctrl+S）

    ✅ 保存し、Unity のコンパイル完了（プログレスバー）を待つ