概要
「シェーダーを作りたいけど、プログラミングが難しそう」「HLSLやCgのコードが読めない」
Shader Graph は、Unity公式のノードベースビジュアルシェーダーエディタです。ノードを線でつなぐだけで、溶岩のような発光するマテリアルや、波打つ水面、ホログラムのようなエフェクトまで、様々なシェーダーを作ることができます。
従来のシェーダーとの違い
従来のシェーダーの課題
- プログラミングの知識が必須
- デバッグが難しい
- 試行錯誤に時間がかかる
- 非エンジニアには敷居が高い
Shader Graphの利点
- プログラミング不要 - ノードを接続するだけ
- ビジュアルで分かりやすい - 処理の流れが視覚的に理解できる
- リアルタイムプレビュー - 変 更結果を即座に確認
- 再利用性が高い - Sub Graphで共通パーツを作成
- URPとHDRPに対応 - Built-in RPはバージョンにより対応状況が異なる
Built-in RP対応状況:
| Unityバージョン | Built-in RP対応状況 |
|---|---|
| 2021以前 | 非対応 |
| 2022.1〜2022.3 | Unlit Shader Graphのみ |
| 2023.1以降 | Unlit + 一部Litシェーダーに対応 |
Built-in RPではLit Shader Graphの全機能が使えるわけではなく、カスタムライティングモデルなど一部機能に制限があります。
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有効環境では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ノード を追加（時間を取得）
- 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で不要なバリアントを除外することを推奨します。
まとめ
Shader Graphは、プログラミング不要でシェーダーを作成できる強力なツールです。
- ノードベース - ノードを接続するだけで複雑なシェーダーを作成
- リアルタイムプレビュー - 変更結果を即座に確認
- プロパティ - マテリアルから値を調整、スクリプトからも変更可能
- Sub Graph - 共通パーツを再利用
まずは簡単な色の変更やテクスチャの表示から始めて、徐々にアニメーションやエフェクトに挑戦してみてください。