---
title: "Unity Shader Graphの使い方｜作成手順とStep・Timeノード、Custom Function【Unity 6.3対応】"
url: "https://www.issoh.co.jp/tech/details/4903/"
published: 2025-01-20
updated: 2026-09-30
categories: ["シミュレーション"]
publisher: "株式会社一創"
---

# Unity Shader Graphの使い方｜作成手順とStep・Timeノード、Custom Function【Unity 6.3対応】

Shader Graphは、ノードを線でつないでシェーダーを組み立てるUnityのビジュアルエディターです。URPかHDRPを入れたプロジェクトには自動で入り、コードを書かずに色・テクスチャ・アニメーション・ディゾルブのような表現を作れます。現行の長期サポート版Unity 6.3 LTSに対応するのはShader Graph 17.3で、2026年9月時点の最新Supported版Unity 6.6は17.6です。

この記事では、アセットを作ってマテリアルに当てるまでの手順、検索の多いStepノードとTimeノードの仕様、エミッションを光らせる設定、Custom FunctionとSub Graphの使い方を、[Shader Graph 17.3の公式マニュアル](https://docs.unity3d.com/Packages/com.unity.shadergraph@17.3/manual/index.html)に沿って説明します。Unity公式の日本語マニュアルで確認できるのは10.0版だけなので、版によって画面や手順が違う箇所も併せて書きます。

## まとめ：Shader Graphの要点

- Shader GraphはURP・HDRPを入れると自動で入ります。Built-in Render Pipelineでも2021.2以降は使えますが、互換目的の対応で、XRとGPU Instancingは使えません。
- 作成は「Create > Shader Graph > URP > Lit」、編集画面ではSpaceキーでノード検索、完成したグラフを右クリックして「Create > Material」でマテリアルを作ります。
- Stepノードは成分ごとに「In >= Edge なら1、それ以外は0」を返します。生成コードは `step(Edge, In)` で、値が等しいときは1です。境界をなめらかにしたいときはSmoothstepを使います。
- TimeノードのTimeは経過秒数（`_Time.y`）です。UVスクロールはTime×速度をTiling And OffsetのOffsetに入れます。
- エミッションを光らせるには、HDRカラーに加えてURPのBloomが必要です。BloomのIntensityは既定値0（無効）なので、上げないと光がにじみません。
- 同じ処理を何度も使うならSub Graph、ノードで書けない処理はCustom FunctionでHLSLを直接書きます。

## Shader Graphの対応パイプラインとUnity 6での版の変化

Shader Graphは `com.unity.shadergraph` パッケージとして提供されます。公式マニュアルは次の3点を明記しています。

- URPかHDRPをインストールすると、Shader Graphも自動でインストールされます。
- Built-in Render Pipelineでは、Unity 2021.2以降にPackage Managerから手動で入れれば使えます。ただしバグ修正以外の更新は行われず、XR非対応で、GPU Instancingも効きません。
- グラフのTarget（出力先）は、Universal・HDRP・Built-inに加え、Custom Render Texture用を選べます。複数のTargetを同時に選ぶと、Targetごとにサブシェーダーが生成されます。

Unity 6以降はエディターのマイナー版ごとにShader Graphの版が上がります。各版の「New in Unity」ページに記載されたShader Graphの追加機能は次のとおりです。

| Unity   | Shader Graph | 主な追加（公式の新機能一覧より）                              |
| ------- | ------------ | --------------------------------------------- |
| 6.0 LTS | 17.0         | Heatmapカラーモード、UGUI（Canvas）対応、サンプル追加           |
| 6.2     | 17.2         | Appendノード、キーワードのDynamic Branch設定              |
| 6.3 LTS | 17.3         | テンプレートブラウザ、URPカスタムライティング、Terrain・UI Toolkit対応 |
| 6.4     | 17.4         | Terrain Propertiesノード                         |
| 6.5     | 17.5         | Expressionノード、Switchノード、HLSL関数のノード化           |
| 6.6     | 17.6         | Preprocessor Directives、パーティクル用ノード5種          |

6.1の新機能一覧にはShader Graphの節がありません。Unityのリリース情報APIで確認すると、2026年9月30日時点の最新は6.3 LTSが6000.3.25f1、6.6が6000.6.3f1です。ネット上のチュートリアルで「From Templateが無い」「Appendノードが見つからない」という食い違いが起きる場合は、まず使っているエディターの版を確認してください。Unity 6.3全体の変更点は[Unity 6.3 LTS（6000.3）の新機能と6.2からの変更点](/tech/details/10417/)で扱っています。

### 日本語マニュアル（10.0版）と英語版17.x系の使い分け

「shader graph」で検索すると、上位にUnity公式の日本語マニュアル「初めての Shader Graph」が出ます。このページはShader Graph 10.0（Unity 2020.2世代）の版です。`docs.unity3d.com/ja/Packages/com.unity.shadergraph@` の後ろの版番号を11.0・12.0・12.1・13.1・14.0・15.0・16.0・17.0〜17.4・17.6の13通りに変えてindex.htmlを取得すると、いずれもHTTP 404でした（2026年9月30日確認）。同じURLから /ja を除いた英語版は表示されます。

10.0の時点でMaster Stackは導入済みなので基本操作は通じます。一方で、Built-in対応（Unity 2021.2以降）、テンプレートブラウザ、Heatmap、UI用ノードは載っていません。Unity 6で作業するなら、英語版の17.x系マニュアル（URLの@以降を自分のShader Graphの版に合わせる）を正本にするのが確実です。

## Shader Graphアセットの作成からマテリアル適用までの手順

URPのLitシェーダーを例にした、公式マニュアルの手順です。

1. Projectウィンドウで右クリックし、「Create > Shader Graph > URP > Lit」を選んで名前を付けます。Unity 6.3以降は「Create > Shader Graph > From Template」でテンプレートからも作れます。
2. Shader Graphウィンドウが開かなければ、作ったアセットをダブルクリックします。アセットを選んでInspectorの「Open Shader Editor」を押しても開けます。
3. 作業領域を選んでSpaceキーを押すとCreate Nodeメニューが開きます。「color」で検索し、Input > BasicのColorを追加します。
4. ColorノードのOut(4)ポートを、Master StackのFragmentにあるBase Colorへドラッグしてつなぎます。Main Previewの球の色が変わります。
5. 左上の「Save Asset」で保存します。保存しないとマテリアルに反映されません。
6. ProjectウィンドウでShader Graphアセットを右クリックし、「Create > Material」を選びます。できたマテリアルのShaderには自動でこのグラフが割り当てられます。
7. マテリアルをシーン内のオブジェクトへドラッグすれば適用完了です。

「Blank Shader Graph」で空のグラフを作った場合は、Graph InspectorのGraph SettingsでTargetを追加しないと機能しません。生成されたHLSLを読みたいときは、アセットのInspectorにある「View Generated Shader」で確認できます。

### Master StackのVertexとFragmentの役割

Master Stackはグラフの終点で、1つのグラフに1つだけ置きます。中身はVertexとFragmentの2つのコンテキストに分かれ、Vertexにつないだノードは頂点シェーダー、Fragmentにつないだノードはピクセル（フラグメント）シェーダーの一部になります。

同じノードを両方のコンテキストにつなぐと、頂点とフラグメントで2回実行されます。Graph Settingsの変更で使えなくなったブロックはグレー表示になり、そこだけにつながったノード列も最終シェーダーに含まれません。

### Blackboardのプロパティをマテリアルとスクリプトから操作する設定

Colorノードの代わりにBlackboardの「+」でColorプロパティを作り、Graph InspectorのNode Settingsで「Show In Inspector」を有効にすると、マテリアルのInspectorから値を変えられます。スクリプトから触るときに使うのは表示名ではなく「Reference」の値です。Referenceがアンダースコアで始まらない場合、Unityが自動で先頭に付けます。

Scopeを「Global」にしたプロパティはInspectorに出ず、C#からの一括設定専用になります。マテリアルごとに変えたい値は「Per Material」のままにします。次は、Referenceを `_Threshold` にしたFloatプロパティをスクリプトで動かす例です。コードをDissolveDriver.csとして保存し、Rendererと対象マテリアルを持つゲームオブジェクトにアタッチします。

```
using UnityEngine;

public class DissolveDriver : MonoBehaviour
{
    static readonly int ThresholdId = Shader.PropertyToID("_Threshold");
    [SerializeField] float speed = 0.3f;
    Material mat;

    void Start()
    {
        // renderer.material はこのオブジェクト専用の複製を返す（共有マテリアルは変えない）
        mat = GetComponent<Renderer>().material;
    }

    void OnDestroy()
    {
        if (mat != null)
        {
            Destroy(mat);
        }
    }

    void Update()
    {
        mat.SetFloat(ThresholdId, Mathf.PingPong(Time.time * speed, 1f));
    }
}
```

## ノードのカテゴリ一覧と代表的なノード

Create Nodeメニューのノードは機能別のカテゴリに分かれています。画面右上のColor Modeを「Category」にすると、ノードの見出しがカテゴリ色で塗られます。

| カテゴリ       | 色       | 代表的なノード                             |
| ---------- | ------- | ----------------------------------- |
| Input      | #CB3022 | Color、Time、Sample Texture 2D        |
| Math       | #4B92F3 | Step、Smoothstep、Lerp、Multiply、Remap |
| UV         | #08D78B | Tiling And Offset                   |
| Procedural | #9C4FFF | Simple Noise、Gradient Noise         |
| Channel    | #97D13D | Split、Combine、Swizzle、Append        |
| Artistic   | #DB773B | Blend、Contrast、Saturation           |
| Utility    | #AEAEAE | Branch、Comparison、Custom Function   |

自作のSub GraphはCreate Nodeメニューの「Sub Graph Assets」か、Sub Graph側で指定したカテゴリに並び、Category表示ではUtilityと同じ色になります。個々のノードは、選択してF1キーを押すと公式リファレンスが開きます。

## Stepノードの仕様とSmoothstep・Comparisonとの使い分け

[Stepノード](https://docs.unity3d.com/Packages/com.unity.shadergraph@17.3/manual/Step-Node.html)は、入力Inが入力Edge以上なら1、そうでなければ0を、ベクトルの成分ごとに返します。ポートはEdge（しきい値）・In（判定する値）・Outの3つで、生成されるコードは次のとおりです。

```
void Unity_Step_float4(float4 Edge, float4 In, out float4 Out)
{
    Out = step(Edge, In);
}
```

つまずきやすいのは次の3点です。

- **引数の順番**：HLSLの `step(Edge, In)` はしきい値が先です。ノイズとしきい値の接続先を交換すると、値が異なる場所では白黒が逆になります。ただし、値が等しい場所は交換前後とも1なので、厳密な反転にはOne Minusを使います。
- **等しいときは1**：比較は「以上」なので、In=0.5・Edge=0.5なら1です。
- **境界のギザギザ**：出力は0か1だけなので、斜めの境界にジャギーが出ます。なめらかにしたい場合はSmoothstepで幅を持たせます。

| ノード        | 入力             | 出力           | 向いている用途          |
| ---------- | -------------- | ------------ | ---------------- |
| Step       | Edge、In        | 0か1          | くっきりした切り抜き、ディゾルブ |
| Smoothstep | Edge1、Edge2、In | 0〜1（エルミート補間） | やわらかい境界、フェード     |
| Comparison | A、B（Float）     | Boolean      | Branchの条件（6種の比較） |

ComparisonはEqual・NotEqual・Less・LessOrEqual・Greater・GreaterOrEqualの6種を選べ、主にBranchノードの条件に使います。ただしBranchノードは両方の分岐を評価してから片方を捨てる仕様なので、「重い処理を分岐で飛ばす」目的には使えません。0か1の値を掛け算に使うだけなら、Stepで済ませる方がノードが1つ少なくなります。

### Stepで組むディゾルブと縁の発光

ノイズで物体が溶けて消えるディゾルブは、URP Litグラフで次のように組みます。

1. Graph SettingsでAlpha Clippingを有効にし、FragmentにAlphaとAlpha Clip Thresholdのブロックを出します。Alpha Clip Thresholdは0.5にします。
2. Simple Noise（出力は0〜1、Scaleの既定値は500）をStepのInへ、Floatプロパティ `_Threshold` をEdgeへつなぎ、StepのOutをAlphaへつなぎます。
3. 縁を光らせるには、Edgeに「`_Threshold`＋幅」を入れた2つ目のStepを作り、1つ目のStepから引きます。幅には正の値（例：0.05）を指定します。結果は、ノイズがしきい値以上・しきい値＋幅未満の帯だけが1になります。
4. その帯にHDRカラーを掛けてEmissionへつなぎます。

`_Threshold` を0から1へ動かすと、ノイズの値が小さい場所から順に消えます。前の章のDissolveDriverはこの値を往復させる例です。

## Timeノードの出力とUVスクロール・点滅アニメーション

[Timeノード](https://docs.unity3d.com/Packages/com.unity.shadergraph@17.3/manual/Time-Node.html)の5つの出力は、それぞれ次の組み込み変数に対応します。

| 出力           | 内容                 | 生成コード              |
| ------------ | ------------------ | ------------------ |
| Time         | 経過時間（秒）            | \_Time.y           |
| Sine Time    | Timeの正弦（-1〜1）      | \_SinTime.w        |
| Cosine Time  | Timeの余弦（-1〜1）      | \_CosTime.w        |
| Delta Time   | 前フレームからの経過秒        | unity\_DeltaTime.x |
| Smooth Delta | 数フレーム平均のDelta Time | unity\_DeltaTime.z |

テクスチャを流すUVスクロールは、Time×速度（Vector 2）をTiling And OffsetのOffsetへ入れ、その出力をSample Texture 2DのUVへつなぎます。Tiling And Offsetの計算は `UV * Tiling + Offset` なので、Offsetが時間とともに増えるぶんだけ模様が移動します。

点滅には、-1〜1で揺れるSine Timeを0〜1に直して使います。Remapノードで入力範囲を-1〜1、出力範囲を0〜1にするか、0.5を掛けて0.5を足します。速さを変えたい場合は、Sine Timeではなく「Time×係数」をSineノードに通します。Sine TimeはTimeそのものの正弦で、周期を変えられないためです。

## エミッションで光らせるためのHDRカラーとBloom設定

「Shader Graphで光らせる」には、シェーダー側とシーン側の両方の設定が要ります。シェーダー側は、BlackboardのColorプロパティのModeを「HDR」にしてEmissionブロックへつなぎます。HDRモードでは強さを-10〜10の露出段数で指定でき、Emissionブロックは正の値を前提としています。

シェーダーだけでは色が明るくなるだけで、周囲に光はにじみません。URPでは次の手順でBloomを足します。

1. CameraのInspectorで「Post Processing」を有効にします（URPの新規シーンは既定で無効です）。
2. 「GameObject > Volume > Global Volume」を追加し、Volumeコンポーネントの「New」でVolume Profileを作ります。
3. 「Add Override」でBloomを追加し、Intensityの左にあるチェックボックスをオンにして、値を0より大きくします。Thresholdを変更する場合も、その左のチェックボックスをオンにします。

見落としやすいのが既定値です。BloomのIntensityは既定で0、つまり効果が無効な状態で追加されます。Thresholdの既定値は0.9（ガンマ空間の明るさ）で、これより暗い画素にはBloomがかかりません。HDRカラーの強さをThresholdより上げ、Intensityを上げて、初めて発光して見えます。

## Custom FunctionノードとSub Graphによる処理の再利用

ノードで組んだ処理を部品にするのがSub Graph、HLSLを直接書くのがCustom Functionです。

### Custom Functionノードの書き方（File・Stringモード）

[Custom Functionノード](https://docs.unity3d.com/Packages/com.unity.shadergraph@17.3/manual/Custom-Function-Node.html)はUtilityカテゴリにあります。Graph InspectorのNode SettingsでInputs・Outputsのポートを定義し、Typeを次のどちらかにします。

- **String**：Bodyに関数の中身だけを書きます。引数や波かっこはUnityが補い、`$precision` と書いた箇所はノードの精度に応じてhalfかfloatに置き換わります。
- **File**：プロジェクト内の `.hlsl` ファイルをSourceに指定し、Nameに関数名を書きます。Nameには精度の接尾辞 `_float` や `_half` を付けません。

Fileモードのファイルは、同じ関数を二重に読み込まないよう `#ifndef` と `#define` で囲みます。ファイルを複数作るなら、識別子はファイルごとに変えます。前の章のディゾルブの判定を1つの関数にまとめると次のようになります。

```
//UNITY_SHADER_NO_UPGRADE
#ifndef DISSOLVE_EDGE_INCLUDED
#define DISSOLVE_EDGE_INCLUDED

void DissolveEdge_float(float Noise, float Threshold, float Width,
                        out float Alpha, out float Edge)
{
    Alpha = step(Threshold, Noise);
    Edge  = Alpha - step(Threshold + Width, Noise);
}

#endif //DISSOLVE_EDGE_INCLUDED
```

ノード側ではInputsにNoise・Threshold・Width（Float）、OutputsにAlpha・Edge（Float）を定義し、Nameに `DissolveEdge` と書きます。この例は `_float` 版だけなので、Node SettingsのPrecisionを明示的にSingleへ設定します。Halfで使う場合は同じ引数の `DissolveEdge_half` も用意してください。

ファイル内で関数の外に宣言した変数（uniform）はグローバル扱いになります。マテリアルごとには設定できず、値は `Shader.SetGlobalFloat` などで一括設定するしかありません。

### Sub Graphの作り方と入出力ポート

まとめたいノードを選んで右クリックし、「Convert To Sub-graph」を選ぶと、選んだノードが別アセットのSub Graphになります。空から作る場合はProjectウィンドウで「Create > Shader > Sub Graph」です。Sub GraphにはMaster Stackがなく、代わりにOutputノードが終点になります。

- 入力ポートは、Sub GraphのBlackboardにプロパティを追加すると作れます。
- 出力ポートは、Outputノードを選び、Node SettingsのInputsで「+」を押して追加します。
- プレビューは最初の出力ポートで描かれます。先頭にはBoolean・Float・Vector・Matrixのいずれかを置くと、プレビューがエラーになりません。

Custom Functionノード自体は1つのインスタンスなので、別のグラフで再利用するならSub Graphに入れておくと、ポート定義を作り直さずに済みます。なお、Unity 6.6の新機能にある「Deprecate subgraphs」は、自作のSub Graphに非推奨の印を付けてノード検索から隠す機能です。Sub Graphという仕組みが廃止されるわけではありません。

## Shader Graphでできないことと手書きシェーダーへ切り替える判断基準

Shader Graphで編集できるのは、Master StackのVertexとFragmentの2段と、パイプラインが用意したブロックだけです。次に当てはまる場合は、Shader Graphにこだわらずコードで書く方が早く済みます。

- **ステンシルの読み書き**：Graph Settingsにステンシルの設定項目がありません。URPでの回避方法は[Unity Shader Graphでステンシル（Stencil）を使う方法](/tech/details/4554/)で詳しく説明しています。
- **Built-in Render PipelineでのXR・GPU Instancing**：公式にサポート外です。Built-in向けの対応はバグ修正のみなので、新しい表現を作るならURPへ移る前提で考えます。
- **URP・HDRPでのGPU Instancing**：SRP Batcherとは併用できず、通常のMeshRendererではSRP Batcherが優先されます。GPU Instancingを使うなら、Graphics.RenderMeshInstancedで直接描くか、RendererにMaterialPropertyBlockを付けるなどしてSRP Batcherの対象から外します。同じメッシュと同じマテリアルを大量に描く場合は、GPU Instancingの方が効率的な場合があるため、ProfilerでSRP Batcherとの性能差を確認します。
- **パスを独自に増やす処理**：アウトラインのように2パス目を足す表現は、グラフの外（ShaderLabやRenderer Feature）で組むことになります。

反対に、HLSLの数行で済む計算がノードで組めないだけなら、Custom Functionで足りるので手書きに切り替える必要はありません。Unity 6.6ではGraph SettingsにPreprocessor Directives欄が加わり、pragma・define・includeもCustom Functionなしで追加できるようになりました。

### 重いノードを見つけるHeatmapと精度設定

Unity 6.0で加わったHeatmapカラーモードは、ノードごとの推定GPU負荷を10色で塗り分けます。黒は0〜3サイクル、赤は64〜127サイクル、黄は1024サイクル以上で、段階は指数的に増えます。水色は負荷不明のノードです。公式マニュアルは、Heatmapは最適化の出発点にする目安で、正確な計測には実機で動かす必要があると注記しています。Color ModeはShift+4で切り替えられます。

精度（Precision）は、Graph Settingsでグラフ全体をSingleかHalfに、Node Settingsでノード単位に設定します。デスクトップではSingleが32ビット、Halfが16ビットです。ワールド座標やUV・三角関数はSingle、短いベクトルや色はHalfが向いている、というのが公式の目安です。

## よくある質問

### Shader Graphの開き方は？

ProjectウィンドウでShader Graphアセットをダブルクリックするか、アセットを選んでInspectorの「Open Shader Editor」を押します。アセットが無い場合は、右クリックの「Create > Shader Graph」から作ります。メニューにShader Graphが出ないときは、URPかHDRPが入っているか、Built-inならPackage Managerでshadergraphを入れたかを確認してください。

### Stepノードで白と黒が逆になるのはなぜですか？

EdgeとInを逆につないでいる可能性が高いです。Stepは `step(Edge, In)` で、In（判定したい値）がEdge（しきい値）以上のときに1を返します。ノイズやUVはInへ、しきい値のプロパティはEdgeへつなぎます。反転させたいだけなら、One Minusノードを後ろに足す方法もあります。

### Shader GraphのTimeノードで速さを変えるには？

Timeの出力にMultiplyで係数を掛けます。点滅ならその結果をSineノードに通し、Remapで0〜1に直します。Sine Time出力はTimeそのものの正弦で周期を変えられないため、速さを調整する用途には向きません。

### Shader Graphの日本語マニュアルはありますか？

Unity公式の日本語版で確認できたのはShader Graph 10.0版だけです。11.0〜17.6のうち13通りの版番号で日本語ページのURLを試すと、すべて404でした（2026年9月30日確認）。Unity 6で使うなら、英語版マニュアルのURLの版番号を自分のShader Graphの版（Unity 6.3なら17.3）に合わせて読むのが確実です。

### Shader GraphとVFX Graphはどう違いますか？

Shader Graphは物体の表面の描き方（シェーダー）を作るツールで、VFX GraphはGPUでパーティクルを動かすエフェクト用のツールです。両者は連携でき、Graph Settingsの「Support VFX Graph」を有効にしたShader GraphはVFX Graphの出力に使えます。VFX Graph側の使い方は[Unity VFX Graphの使い方](/tech/details/6889/)にまとめています。

## 関連記事

- [Unity Shader Graphでステンシル（Stencil）を使う方法｜非対応の理由とURPでの実装手順](/tech/details/4554/)
- [Unity VFX Graphの使い方｜導入・基本操作からShuriken比較・URP対応まで【Unity 6】](/tech/details/6889/)
- [Unity 6.3 LTS（6000.3）の新機能と6.2からの変更点｜サポート期限・対応OS・移行の注意点](/tech/details/10417/)
- [Unityを日本語化する方法（Unity 6対応）とUnity 6の新機能・変更点](/tech/details/4881/)

---

出典: [Unity Shader Graphの使い方｜作成手順とStep・Timeノード、Custom Function【Unity 6.3対応】](<https://www.issoh.co.jp/tech/details/4903/>)（株式会社一創）