「水面をゆらゆら揺らしたい」「敵が被弾したら白く光らせたい」——やりたい表現は明確なのに、調べると出てくるのはHLSLの呪文のようなコード。シェーダーはやりたいことと学習コストのギャップが一番大きい分野かもしれません。
そのギャップを埋めるのが Shader Graph——Unity公式のノードベースビジュアルシェーダーエディタです。ノードを線でつなぐだけで、発光するマテリアルや波打つ水面、ホログラムのようなエフェクトまで、コードを1行も書かずに作れます。
この記事でわかること
- Shader Graphの構成要素（Master Stack・Blackboard・プロパティ）
- 作成から適用までの基本操作と、テクスチャ・スクロールの実例
- スクリプトからの変更とMaterialPropertyBlockの使いどころ
- Sub Graph・Keyword・Custom Functionによる発展
- 実践：被弾で白く点滅するシェーダーを組む
従来のシェーダーとの違い
従来のシェーダーの課題
- プログラミングの知識が必須
- デバッグが難しい
- 試行錯誤に時間がかかる
- 非エンジニアには敷居が高い
Shader Graphの利点
- プログラミング不要 - ノードを接続するだけ
- ビジュアルで分かりやすい - 処理の流れが視覚的に理解できる
- リアルタイムプレビュー - 変更結果を即座に確認
- 再利用性が高い - Sub Graphで共通パーツを作成
- URPとHDRPに対応 - Built-in RPはバージョンにより対応状況が異なる
Built-in RP対応状況:
| Unityバージョン | Built-in RP対応状況 |
|---|---|
| 2021.1以前 | 非対応 |
| 2021.2以降（Shader Graph 12〜） | Built-Inターゲット で Lit / Unlit とも対応 |
Built-Inターゲットでは、URP/HDRP向けに先行して追加される一部ノード・設定が使えない制限があります。挙動が違うと感じたら、公式ドキュメントで対象ターゲットの対応状況を確認してください（本記事の検証はUnity 6 / 6000.0時点）。
Shader Graphの構成要素
| 要素 | 説明 |
|---|---|
| Shader Graphアセット | シェーダーの設定を保存するファイル |
| Blackboard | プロパティとキーワードのリスト |
| Master Stack | シェーダーへの最終的な出力 |
| ノード | シェーダーの処理単位 |
| プロパティ | シェーダーの外部パラメータ |
| Sub Graph | 再利用可能なパーツ |
Shader Graphアセットの種類
| 種類 | 用途 |
|---|---|
| Unlit Shader Graph | ライトの影響を受けない（UI、エフェクト向け） |
| Lit Shader Graph | ライトの影響を受ける（PBRマテリアル向け） |
Master Stackの構造
Master Stackは2つのステージで構成されています：
| ステージ | 処理内容 | 主な用途 |
|---|---|---|
| Vertex | 頂点シェーダー処理 | 頂点アニメーション、位置変形 |
| Fragment | フラグメントシェーダー処理 | 色、テクスチャ、ライティング |
Position端子: Vertexステージの Position 端子に接続することで、頂点の位置を変形できます（波打つ水面、風になびく草など）。
Lit Shader GraphのPBRパラメータ
| パラメータ | 説明 |
|---|---|
| Base Color | 基本色 |
| Normal | 法線マップ（凹凸表現） |
| Metallic | 金属度（0=非金属、1=金属） |
| Smoothness | 滑らかさ（0=ザラザラ、1=ツルツル） |
| Emission | 発光色 |
| Ambient Occlusion | 環境遮蔽（影の濃さ） |
| Alpha | 透明度（Transparent設定時に使用） |
透明・半透明マテリアルの設定
ガラスや半透明のマテリアルを作成するには：
- Shader Graphを選択し、Graph Inspector を開く
- Surface Type を
Transparentに変更 - Master Stackの Alpha 端子に透明度を接続（0=完全透明、1=不透明）
Graph Inspectorの主要設定一覧:
| 設定 | 選択肢 | 用途 |
|---|---|---|
| Surface Type | Opaque / Transparent | 不透明 / 透明 |
| Render Face | Front / Back / Both | 描画面 |
| Alpha Clipping | On / Off | テクスチャ切り抜き |
| Two Sided | On / Off | 両面描画 |
| Cast Shadows | On / Off | 影の投影 |
Alpha Clipping: 葉や草など、テクスチャで切り抜きたい場合は Alpha Clipping を有効にし、Alpha Clip Threshold を設定します。
Shader Graphの作成と基本操作
Shader Graphアセットの作成
- Projectウィンドウで右クリック
Create > Shader Graph > URP > Unlit Shader Graphを選択- アセットをダブルクリックしてエディタを開く
ノードの作成と接続
- 作業スペースで右クリック → Create Node
- 検索フィールドでノードを検索
- ノードの出力ポートからMaster Stackの入力ポートへドラッグ
マテリアルの作成と適用
- Shader Graphアセットを右クリック →
Create > Material - 作成されたマテリアルをオブジェクトにドラッグ&ドロップ
プロパティを使った動的なシェーダー
プロパティの追加
- Blackboardの
+ボタンをクリック - プロパティの種類を選択（Color、Float、Texture2Dなど）
- プロパティをShader Graphウィンドウにドラッグ&ドロップ
スクリプトから色を変更
// 方法1: material直接変更（マテリアルインスタンスが生成される）
renderer.material.SetColor("_Main_Color", Color.red);
// 方法2: MaterialPropertyBlock（バッチング維持、推奨）
var mpb = new MaterialPropertyBlock();
renderer.GetPropertyBlock(mpb);
mpb.SetColor("_Main_Color", Color.red);
renderer.SetPropertyBlock(mpb);
SRP BatcherとMaterialPropertyBlockの関係（SRP Batcherの仕組みは ドローコールとバッチング を参照）:
- SRP Batcher有効環境ではMaterialPropertyBlockを使用するとSRP Batcherのバッチが切れます
- 少数のオブジェクト → MaterialPropertyBlockで問題なし
- 大量のオブジェクト → material instanceの方がSRP Batcherの恩恵を受けられる場合がある
- 用途に応じて使い分けてください
重要: Reference名について スクリプトからプロパティにアクセスする際は、Blackboardで設定した Reference名 を使用します。Blackboardでプロパティを選択し、Graph Inspectorで Reference フィールドを確認してください。デフォルトでは
_プロパティ名の形式になります（例：Main Color→_Main_Color、スペースはアンダースコアに変換）。Reference名はGraph Inspectorで自由に変更可能です。
テクスチャを使ったシェーダー
- Texture2Dプロパティを追加
- Sample Texture 2Dノードを追加
- プロパティをTexture入力に接続
- RGBA出力をBase Colorに接続
スクロールするテクスチャ
「動くシェーダー」の入門はこれです。川の流れ、ベルトコンベア、背景の雲——Timeノードで取得した時間をUVのオフセットに流し込むと、テクスチャが延々と流れ続けます。
- Timeノード を追加（時間を取得）
- Vector2ノード を追加（X方向のみに時間を適用）
- Tiling and Offsetノード を追加
- Vector2の出力をOffset入力に接続
- Sample Texture 2DのUV入力に接続
スピード調整にはMultiplyノードを使用します。
よく使うノード
Input Nodes
| ノード | 説明 |
|---|---|
| Time | 時間を取得（アニメーション用） |
| UV | メッシュのUV座標を取得 |
| Position | 頂点の位置を取得 |
Texture Nodes
| ノード | 説明 |
|---|---|
| Sample Texture 2D | テクスチャをサンプリング |
| Tiling and Offset | UV座標にタイリングとオフセットを適用 |
Math Nodes
| ノード | 説明 |
|---|---|
| Add, Subtract, Multiply, Divide | 基本的な算術演算 |
| Lerp | 線形補間 |
| Clamp | 値を範囲内に制限 |
Procedural Nodes
| ノード | 説明 |
|---|---|
| Noise | ノイズを生成 |
| Checkerboard | チェッカーボードパターンを生成 |
| Gradient | グラデーションを生成 |
| Fresnel Effect | 視線角度に応じた効果（リムライト、ホログラム） |
Fresnel EffectのPower値:
- 値が小さい（1〜2）→ 効果が広い範囲に及ぶ（全体的に光る）
- 値が大きい（5〜10）→ 効果がエッジのみに集中（シャープなリムライト）
Sub Graphの作成
Sub Graphは、複数のノードをまとめて再利用可能なパーツにする機能です。
作成手順
- Projectウィンドウで右クリック →
Create > Shader Graph > Sub Graph - Sub Graphエディタで入力（Input）と出力（Output）を定義
- 処理ノードを接続
- 保存して、他のShader Graphで使用
活用例
- ノイズ生成の共通処理
- UV操作のパターン
- 色変換の共通ロジック
具体例：UV回転Sub Graph
| 入出力 | 名前 | 型 |
|---|---|---|
| 入力 | UV | Vector2 |
| 入力 | Angle | Float |
| 出力 | RotatedUV | Vector2 |
処理: RotateノードでUVをAngle度回転させ、RotatedUVとして出力。テクスチャの回転アニメーションなどに再利用できます。
高度な機能
Keyword（条件分岐）
シェーダー内で#ifdef相当の条件分岐を実現します。
- Blackboardで
+→ Keyword を選択 - Boolean/Enum/Built-inから種類を選択
- Keywordをグラフにドラッグすると Keywordノード が自動生成される
- Keywordノードの各出力に異なる処理を接続
最適化: Keywordを使うと、条件に応じて異なるシェーダーバリアントがコンパイルされ、不要な処理を省けます。
Custom Function Node
HLSLコードを直接記述できるノードです。Shader Graphでは実現できない処理を追加する際に使用します。
- 右クリック →
Create Node→ Custom Function を検索 - ファイルまたはインラインでHLSLコードを記述
- 入力/出力を定義して接続
次のステップ: HLSLの知識がある方は、Custom Function Nodeで高度な表現に挑戦してみてください。
よくある問題と解決策
| 症状 | 原因と対処 |
|---|---|
| ピンク色になる | シェーダーのコンパイルエラー。Graph Inspectorでエラーを確認 |
| マテリアルが真 っ黒 | Base Colorに何も接続されていない、またはNormal Mapの形式が未設定 |
| 透明にならない | Surface TypeがOpaqueのまま |
| Normal Mapが紫色にならない | テクスチャのImport SettingsでTexture Typeを「Normal map」に設定する |
シェーダーバリアント: Keywordを増やすとシェーダーバリアント数が指数的に増加します（n個のBooleanキーワードで最大2^n個）。モバイル向けではGraphics Settingsで不要なバリアントを除外することを推奨します。
実践：被弾フラッシュシェーダーを組む
アクションゲームで敵を斬ったとき、シューティングでボスに弾が当たったとき、RPGで攻撃がヒットしたとき——敵が一瞬白く光るあの定番演出は、Shader Graphの格好の練習台です。「プロパティを作る→ノードでつなぐ→スクリプトから動かす」という、この記事で学んだ流れがすべて登場します。
仕組みは1本のLerpだけです。通常の色と真っ白を、FlashAmount（0〜1）で混ぜる——0なら通常表示、1なら真っ白、スクリプトでこの値を一瞬だけ上げれば「点滅」になります。
グラフの組み立て（3ステップ）:
- Blackboardでプロパティを2つ追加:
MainTex（Texture2D）とFlashAmount（Float、Reference名_FlashAmount、既定値0） Sample Texture 2Dでテクスチャを読み、LerpノードのAに接続。BにはColorノード（白）を接続FlashAmountをLerpのTに接続し、出力をMaster StackのBase Colorへ
あとはスクリプトから_FlashAmountを動かすだけです。ここで本文で紹介したMaterialPropertyBlockが活きます。
// DamageFlash.cs（敵にアタッチ）
using System.Collections;
using UnityEngine;
public class DamageFlash : MonoBehaviour
{
[SerializeField] private float flashDuration = 0.1f;
private Renderer rend;
private MaterialPropertyBlock mpb;
private static readonly int FlashAmount = Shader.PropertyToID("_FlashAmount");
void Awake()
{
rend = GetComponent<Renderer>();
mpb = new MaterialPropertyBlock();
}
// ダメージ処理から呼ぶ
public void Flash()
{
StopAllCoroutines();
StartCoroutine(FlashRoutine());
}
private IEnumerator FlashRoutine()
{
SetFlash(1f); // 真っ白に
yield return new WaitForSeconds(flashDuration);
SetFlash(0f); // 元に戻す
}
private void SetFlash(float amount)
{
rend.GetPropertyBlock(mpb);
mpb.SetFloat(FlashAmount, amount);
rend.SetPropertyBlock(mpb);
}
}
敵のダメージ処理でdamageFlash.Flash()と呼べば完成です。MaterialPropertyBlockを使っているので、敵が100体いてもマテリアルは1つのまま——個体ごとに別々のタイミングで点滅できます。
ポイントは2つです。 「見た目の切り替えはLerp＋0〜1のプロパティで作る」（白フラッシュに限らず、凍結・毒・ステルスなど大半の状態表現がこの形になります）と、 「スクリプトから触る値はReference名で正確に」（_FlashAmountのスペルミスはエラーにならず、ただ無言で効かないので要注意）。コルーチンの仕組み が曖昧な方はそちらもどうぞ。
まとめ
Shader Graphは、プログラミング不要でシェーダーを作成できる強力なツールです。
- ノードベース - ノードを接続するだけで複雑なシェーダーを作成
- リアルタイムプレビュー - 変更結果を即座に確認
- プロパティ - マテリアルから値を調整、スクリプトからも変更可能
- Sub Graph - 共通パーツを再利用
- 状態表現の基本形は Lerp＋0〜1のプロパティ。被弾フラッシュはその第一歩
まずは簡単な色の変更やテクスチャの表示から始めて、徐々にアニメーションやエフェクトに挑戦してみてください。あなたのゲームの敵、被弾したときにちゃんと「痛そう」に見えていますか？
次に読む記事
- 前提を確認したい → レンダーパイプライン入門（Shader GraphはURP/HDRP前 提）
- 画面全体の見た目を変えたい → ポストプロセッシング入門
- マテリアルの基礎から → マテリアルとシェーダー基礎