# Shader Graph

## プロジェクト設定

ShaderLabの自由度が高く、とてもパワフルなシェーダの作り方であるが、やや難しいところもある。複雑で高速なシェーダが必要なら、ShaderLabの方が良いと思われるが、単純なシェーダなら、Shader Graphの方が楽で、作るのも速くなる。

 Shader Graphは言語ではなく、「ノード」というブロックを紐でつなげることにより、視覚的にシェーダを作成ができる。

 まず、Shader Graphをインストールしましょう。Unityの Package Manger から Shader Graph をインストールしてください。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/NQBimage.png)

## 初めてのシェーダーグラフ

まず、空のシェーダを作成しましょう。「Project」の中に、専用の「Shader」フォルダーを作成し、その中に「Lit Shader Graph」を作成してください。このシェーダーは後ほど使うので名前を「Chessboard」にしてください。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Yzaimage.png)

新しく作ったシェーダーグラフをダブルクリックすると、シェーダーエディタが開く：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Ylpimage.png)

各部品を理解しましょう：

#### 頂点シェーダー（Vertex）

頂点シェーダーは、<span style="color: rgb(186, 55, 42);">**メッシュの各頂点**</span>の位置、または法線ベクトルを変えることができるシェーダーである。マテリアルを設定するだけで、3Dモデルの変形ができるシェーダー：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/6Wiimage.png)

#### フラグメントシェーダー（Fragment）

フラグメントシェーダーは、<span style="color: rgb(186, 55, 42);">**メッシュの各ピクセル**</span>の色、法線ベクトル、金属性などを変えることができるシェーダーである。マテリアルを設定するだけで、3Dモデルの見え方を変えれるシェーダー：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/kZqimage.png)

#### ブラックボード（Blackboard）

パラメータを作成ができるところ。Unityのインスペクターで変えることができる数値をここに追加する。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/FDhimage.png)

#### グラフ・インスペクター（Graph Inspector）

普通のインスペクターと同様に、現在選択されているものに関する情報や数値を確認し、変えることができるパネル：

<table border="1" id="bkmrk-%E3%83%8E%E3%83%BC%E3%83%89%E8%A8%AD%E5%AE%9A%EF%BC%88%E3%83%8E%E3%83%BC%E3%83%89%E3%81%AB%E3%82%88%E3%81%A3%E3%81%A6%E5%A4%89%E3%82%8F%E3%82%8B%EF%BC%89-%E3%82%B0%E3%83%A9" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td class="align-center">ノード設定（ノードによって変わる）</td><td class="align-center">グラフ設定（全般設定）</td></tr><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/xYQimage.png)

</td><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Bigimage.png)

</td></tr></tbody></table>

#### プレビュー（Main Preview）

<span class="c5">シェーダの結果のプレビュー</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/BNrimage.png)

## <span class="c35">様々なシェーダを作ろう！</span>

<span class="c35">Shader Graph で使える「ノード」を紹介しながら、いろんな効果を再現し、3Dモデルの見せ方を変えてみましょう。</span>

### <span class="c38">無限チェスボード</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Bblimage.png)

<span style="text-decoration: underline;">**考え方**</span>：「XZ平面の位置により、白いコマ、または黒いコマを表示したい」

ならば、3D平面の各ピクセルは3D空間の中にどこにあるのかを求める必要がある。その場合は、以下のノードを使える：

##### Positionノード

<table border="1" id="bkmrk-position%E3%83%8E%E3%83%BC%E3%83%89-vertex%E3%81%A8%E7%B9%8B" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>[![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/nDkimage.png)](https://class.illogic.games/uploads/images/gallery/2026-06/nDkimage.png)

</td><td>Positionノード

- Vertexと繋ぐと：各頂点の位置
- Fragmentと繋ぐと：各ピクセルの位置

入力

- なし

設定

- Space：どの位置を使う？ 
    - World：3Dシーンの絶対位置
    - Object：GameObject内の相対位置
    - View：カメラから見た位置

出力

- Out(3)：XYZの位置

</td></tr></tbody></table>

Positionノードを Base Color（Fragment）と繋ぐと：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/S2Uimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/Tddimage.png)

ってどういうこと？実は、「位置」を「色」に書き換えた。元々の位置はXYZとして表現していたものを、そのままRGBに書き換えて、表示しているだけ。つまり：

- X＝R→X軸の位置が大きくなると、色が赤くなる
- Y＝G→Y軸の位置が大きくなると、色が緑になる
- Z＝B→Z軸の位置が大きくなると、色が青くなる

<span style="color: rgb(22, 145, 121);">確認：平面の位置を変えて、色がどう変わるのか、確認してみてください。  
</span><span style="color: rgb(224, 62, 45);">※ポイント：色はいつも０～１の間で表現するので、位置は「1」を超えると最大値になり、それ以上色が変わらない</span>

 Positionノードで位置を取れることが分かったが、なかなかチェスボードにならない。問題を分けて、少しずつ解決してみましょう。まず、Ｘ軸だけで白黒の「しましま」のパターンを作成しましょう。YとZは要らないので、新しいノードが必要：

##### Split ノード

<table border="1" id="bkmrk-split%E3%83%8E%E3%83%BC%E3%83%89-%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%82%92%E6%88%90%E5%88%86%E3%81%AB%E5%88%86%E5%89%B2%E3%81%99" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-06/scaled-1680-/CJrimage.png)

</td><td>Splitノード

- ベクトルを成分に分割する

入力

- In(1)：2D, 3Dまたは4Dのベクトル

設定

- なし

出力

- R(1)：赤色、またはX軸
- G(1)：緑色、またはY軸
- B(1)：青色、またはZ軸
- A(1)：アルファ値、または4Dの４つ目の成分（W）

</td></tr></tbody></table>

<span class="c5">グラフを直して、Position→Split(R)→Base Colorをつなげてみましょう：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Lufimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/image.png)

<span class="c5">X軸の数値だけしか残らないので、Xの位置が大きいほど、白くなる！（RGBはすべてXの数値になる）。ちょっと近づいた気がしますが、しましまのパターンになっていない。何か周期的に繰り返すものがないか？</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/8viimage.png)

<span class="c5">この図は「sin(θ)」のグラフであり、2πごとになみのように繰り返す関数である！x軸はどれだけ大きくなっても、出力は必ず-1～1の間になるので、次のノードを追加しましょう：</span>

##### Sine ノード

<table border="1" id="bkmrk-sine%E3%83%8E%E3%83%BC%E3%83%89-%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%82%92%E6%88%90%E5%88%86%E3%81%AB%E5%88%86%E5%89%B2%E3%81%99%E3%82%8B" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/0UXimage.png)

</td><td>Sineノード

- ベクトルを成分に分割する

入力

- In(1)：角度（ラジアン）

設定

- なし

出力

- Out(1)：サイン関数の結果

</td></tr></tbody></table>

<span class="c5">Position→Split(R)→Sine→Base Colorにすると：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/M6gimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/W8Uimage.png)

<span class="c5">しましまのパターンが現れた！…が、色がなめらかに変わる。確かに、Sinのグラフを見ると、-1〜1の間にゆっくり変わる。「白→黒→白→黒」の２色だけがほしい、以下のように：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/YNgimage.png)

つまり、「sin」が「0以上」だったら、「1」にし、「0未満」の場合は、「0」とする（青い線）。これは、「Step」ノードで実現できる！

##### Step ノード

<table border="1" id="bkmrk-step%E3%83%8E%E3%83%BC%E3%83%89-%E5%85%A5%E5%8A%9B%E3%81%97%E3%81%9F%E5%80%A4%E3%82%92%E3%80%8C%E3%81%97%E3%81%8D%E3%81%84%E5%80%A4%E3%80%8D" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/tOBimage.png)

</td><td>Stepノード

- 入力した値を「しきい値」以上だと「1」を返す、以下だと「０」を返す

入力

- Edge(1)：しきい値
- In(1)：入力値

設定

- なし

出力

- Out(1)：「０」か「１」

</td></tr></tbody></table>

<span class="c5">Sineの後にStepノードを挟んで、確認しましょう。Edge は「0」にしてください。</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/ME3image.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/x1Qimage.png)

<span class="c5">かなりよくなった！ただし、１つの「ストライプ」はUnityのグリッドと比べると、サイズが合わない。なぜなら、Unityのグリッドの間隔は「1単位」なのだが、***sin*** の周期は ***π***（約3.1416）である。これは簡単に解決できる。***sin*** の周期は Unity の1単位にすれば良いでしょう。つまり、1つの単位をπ倍数にすれば良いということです。掛け算のノードは：</span>

##### Multiply ノード

<table border="1" id="bkmrk-multiply%E3%83%8E%E3%83%BC%E3%83%89-%EF%BC%92%E3%81%A4%E3%81%AE%E6%95%B0%E5%80%A4%E3%81%AE%E6%8E%9B%E3%81%91" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/i00image.png)

</td><td>Multiplyノード

- ２つの数値の掛け算を返す

入力

- A(1)：<span class="c5">１つ目の数値、またはベクトル</span>
- B(1)：２<span class="c5">つ目の数値、またはベクトル</span>

設定

- なし

出力

- Out(1) 
    - <span class="c5">数値と数値：A × B </span>
        - <span class="c5">10 x 4 = 40</span>
    - <span class="c5">数値とベクトル：数値と各成分でできる新しいベクトル</span>
        - <span class="c5">3 x \[1, 2, 3\] = \[3, 6, 9\]</span>
    - ベクトルの場合は、各成分の掛け算を返す 
        - 例：<span class="c5">\[1, 2, 3\] × \[4, 5, 6\] = \[4, 10, 18\]</span>

</td></tr></tbody></table>

<span class="c5">Split → Multiply → Sine を繋ぎ、「B」は「3.1416」にしておいてください：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/xCXimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/OGJimage.png)

<span class="c5">Sineの周期をUnityの単位に合わせたので、１つのストライプはグリッドにぴったり！</span>

<span class="c5">これで、チェスボードの半分ができた！Z方向の処理は同じになるので、ノードを重複してもOK！（Splitノードの（R）の代わりに（B）を使ってください）</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/rRtimage.png)

<span class="c5">では、ZとXどう合成すれば良いでしょう？Zは「黒」の場合は、Xのストライプはそのままにして、Zは「白」になったら、Xの色を反転してほしい（白↔黒）</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Ljlimage.png)

<span class="c5">色は「白：1」「黒：0」というのを分かっているので、XとZの差分（X-Z）を計算してみましょう：</span>

<table border="1" class="align-center" id="bkmrk-x%E6%96%B9%E5%90%91%E3%81%AE%E5%80%A4%EF%BC%88%E8%89%B2%EF%BC%89-z%E6%96%B9%E5%90%91%E3%81%AE%E5%80%A4%EF%BC%88%E8%89%B2%EF%BC%89-x-" style="border-collapse: collapse; border-width: 1px;"><colgroup><col style="width: 33.3585%;"></col><col style="width: 33.3585%;"></col><col style="width: 16.6792%;"></col><col style="width: 16.6792%;"></col></colgroup><tbody><tr><td>X方向の値（色）</td><td>Z方向の値（色）</td><td>X-Z</td><td>期待</td></tr><tr><td>１（白）</td><td>０（黒）</td><td>１（白）</td><td>１：✓</td></tr><tr><td>０（黒）</td><td>０（黒）</td><td>０（黒）</td><td>０：✓</td></tr><tr><td>１（白）</td><td>１（白）</td><td>０（黒）</td><td>０：✓</td></tr><tr><td>０（黒）</td><td>１（白）</td><td>-1（？）</td><td>１：×</td></tr></tbody></table>

最後だけは「1」ではなく、「-1」になってしまうので、絶対値を取れば直せる。以下の２つのノードで「X」と「Z」を合成しましょう：

##### Subtract ノード

<table border="1" id="bkmrk-subtract%C2%A0%E3%83%8E%E3%83%BC%E3%83%89-%EF%BC%92%E3%81%A4%E3%81%AE%E6%95%B0%E5%80%A4%E3%81%AE%E5%BC%95" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/oT1image.png)](https://class.illogic.games/uploads/images/gallery/2026-07/oT1image.png)

</td><td>Subtract ノード

- ２つの数値の引き算を返す

入力

- A(1)：<span class="c5">１つ目の数値、またはベクトル</span>
- B(1)：２<span class="c5">つ目の数値、またはベクトル</span>

設定

- なし

出力

- Out(1) 
    - <span class="c5">数値と数値：A - B </span>
        - <span class="c5">10 - 4 = 6</span>
    - <span class="c5">数値とベクトル：数値と各成分でできる新しいベクトル</span>
        - <span class="c5">3 - \[1, 2, 3\] = \[2, 1, 0\]</span>
    - ベクトルの場合は、各成分の引き算を返す 
        - 例：<span class="c5">\[1, 2, 3\] - \[4, 5, 6\] = \[-3, -3, -3\]</span>

</td></tr></tbody></table>

##### Absolute ノード

<table border="1" id="bkmrk-absolute-%E3%83%8E%E3%83%BC%E3%83%89-%E7%B5%B6%E5%AF%BE%E5%80%A4%E3%82%92%E8%BF%94%E3%81%99-" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/zMmimage.png)

</td><td><span class="c5">Absolute </span>ノード

- <span class="c5">絶対値を返す</span>

入力

- In(1)：<span class="c5">数値、またはベクトル</span>

設定

- なし

出力

- Out(1)：<span class="c5">数値、また各成分の絶対値</span>

</td></tr></tbody></table>


<span class="c5">X方向とZ方向の差分＋絶対値を計算し、Base Colorと繋ぐと：</span>

[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/QD6image.png)](https://class.illogic.games/uploads/images/gallery/2026-07/QD6image.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/9i1image.png)

### レインボーキューブ

![image143.gif](https://class.illogic.games/uploads/images/gallery/2026-07/image143.gif)

このシェーダは、オブジェクトのUVを変えて、テクスチャをアニメーションするシェーダである。まず、「rainbow」のテクスチャをドラッグドロップでシェーダに追加する。自動的に、Sample Texture 2Dのノードを作成される：

##### Sample Texture ノード

<table border="1" id="bkmrk-sample-texture%C2%A0%E3%83%8E%E3%83%BC%E3%83%89-%E3%83%86" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/eG0image.png)](https://class.illogic.games/uploads/images/gallery/2026-07/eG0image.png)

</td><td>Sample Texture ノード

- テクスチャの色データを読み込む

入力

- Texture(T2)：<span class="c5">テクスチャ画像</span>
- <span class="c5">UV(2)：読み込むべきのUV座標。</span>
    - <span class="c5">初期値としてメッシュのUV座標が使われるが、上書きができる。</span>
- <span class="c5">Sampler(SS)：（高級）色の補完方法</span>

設定

- <span class="c5">Type：画像の種類</span>
    - <span class="c5">Default：色テクスチャ（模様）</span>
    - <span class="c5">Normal：法線マップ</span>
- <span class="c5">Space：（高級）ノーマルマップの空間（TangentでOK）</span>

出力

- RGBA(4)：画像から取得したRGB色とアルファ値（透明度）
- R(1)：赤の成分のみ
- G(1)：緑の成分のみ
- B(1)：青の成分のみ
- A(1)：アルファ値の成分のみ

</td></tr></tbody></table>

<span class="c5">このままで「RBGA」を「Base Color」と繋いでみましょう：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/reuimage.png)


UnityのCubeの各面のUVは（0, 0）～（1, 1）になっているため、各面が同じテクスチャをそのまま貼っている！

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/O49image.png)

<span class="c5">このままだと、エフェクトを作れないので、MeshのUVを上書きしましょう。Meshデータの代わり、オブジェクトの相対位置を使って、UをXに一致し、VをYに一致しましょう、つまり：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/mHmimage.png)

「Position」から位置を取得し「Space」は「Object」（相対位置）にする。それをUVとして使えば

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/6p1image.png)

テクスチャの縦（V座標）はY座標と一致しているので、上から下の方向でテクスチャを読み込んで貼り付ける。テクスチャ横（U座標）はX軸に従うので、思い通り貼り付けることができた。

 ただ、これが動いていないので、時間に従って、縦方向の「V座標」だけ動かしましょう。このため、この３つのノードが必要

##### Time ノード

<table border="1" id="bkmrk-time-%E3%83%8E%E3%83%BC%E3%83%89-%E6%99%82%E9%96%93%E3%82%92%E8%BF%94%E3%81%99-%E5%85%A5%E5%8A%9B-%E3%81%AA%E3%81%97" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/CPtimage.png)

</td><td>Time ノード

- <span class="c5">時間を返す</span>

入力

- なし

設定

- <span class="c5">なし</span>

出力

- Time(1)：シェーダ開始してからの時間
- Sine Time(1)：Timeのサイン
- Cosine Time(1)：Timeのコサイン
- Delta Time(1)：前のフレームから過ごした時間

</td></tr></tbody></table>

##### Vector2 ノード

<table border="1" id="bkmrk-vector2%C2%A0%E3%83%8E%E3%83%BC%E3%83%89-2d%E3%83%99%E3%82%AF%E3%83%88%E3%83%AB%E3%82%92%E4%BD%9C" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/MSmimage.png)

</td><td>Vector2 ノード

- <span class="c5">2Dベクトルを作成</span>

入力

- X(1)：<span class="c5">X成分</span>
- <span class="c5">Y(1)：Y成分</span>

設定

- <span class="c5">なし</span>

出力

- <span class="c5">Out</span>(1)：<span class="c5">出力のベクトル</span>

</td></tr></tbody></table>

##### Add ノード

<table border="1" id="bkmrk-add-%E3%83%8E%E3%83%BC%E3%83%89-%EF%BC%92%E3%81%A4%E3%81%AE%E6%95%B0%E5%80%A4%E3%81%AE%E8%B6%B3%E3%81%97%E7%AE%97%E3%82%92%E8%BF%94%E3%81%99" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/H0cimage.png)

</td><td>Add ノード

- ２つの数値の足し算を返す

入力

- A(1)：<span class="c5">１つ目の数値、またはベクトル</span>
- B(1)：２<span class="c5">つ目の数値、またはベクトル</span>

設定

- なし

出力

- Out(1) 
    - <span class="c5">数値と数値：A + B </span>
        - <span class="c5">10 + 4 = 14</span>
    - <span class="c5">数値とベクトル：数値と各成分でできる新しいベクトル</span>
        - <span class="c5">3 + \[1, 2, 3\] = \[4, 5, 6\]</span>
    - ベクトルの場合は、各成分の足し算を返す 
        - 例：<span class="c5">\[1, 2, 3\] + \[4, 5, 6\] = \[5, 7, 9\]</span>

</td></tr></tbody></table>

完成シェーダグラフ

[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/syIimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/syIimage.png)

### 魔法巻物を燃やす

![image142.gif](https://class.illogic.games/uploads/images/gallery/2026-07/image142.gif)

まず、シーンを設定してください（scroll.fbx を追加し、空のシェーダを作成、Materialも準備しましょう）そして、「scroll」のテクスチャをシェーダに追加し、そのまま「Base Color」と繋げてみる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/uVrimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/YFeimage.png)

テクスチャがちゃんと貼り付けられたことが分かる。もう一つの「progress」追加し、「Base Color」とつなげてください

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/UhXimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/ikKimage.png)

「progress」は<span class="c41"><span style="color: rgb(186, 55, 42);">**色テクスチャではなく、「データテクスチャ」**</span>という。</span>このテクスチャは<span class="c5">表示するべきではなく、シェーダの計算のために使うテクスチャである。今回は穴が開くようなエフェクトを作るので、「progress」はアニメーションの進歩のために使い、０（黒）から１（白）まで徐々に開けていく。 </span>

<span class="c5"> 色テクスチャではないため、Unityにその旨を伝えないといけない。「progress」を選択し、Inspectorで「sRGB (Color Texture)」のチェックを外してください</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Leiimage.png)

また、今回のエフェクトでは、巻物が消えていくので、シェーダが透明度に対応するようにしなければならない。透明度の処理は主に２つある

- Alpha Blending（アルファ・ブレンディング）：半透明のものに使う（グラス、PETボトルなど）アルファ値は透明度を表し、0の場合は透明になり、1の場合は不透明で、その間に透明度を調整できる。
- Alpha Clipping（アルファ・クリッピング）：半透明ではなく、「見える・見えないか」のしかない。クリッピングのしきい値があり、アルファ値はそのしきい値を超えるか超えないかにより、透明・不透明が切り替わる

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/pr9image.png)

今回のエフェクトでは「Alpha Clipping」は適切であり、シェーダの設定でAlpha Clippingを有効化しよう。「Graph Inspector」で「Alpha Clipping」のチェックを付けてください。これでシェーダが２つの新しい出力ができる：

<table border="1" id="bkmrk--39" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/1w6image.png)

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Unpimage.png)

</td></tr></tbody></table>

<span class="c5"> 「Alpha」はアルファ値（透明度）であり、0〜1の間に設定できる。「Alpha Clip Threshold」は「見える・見えない」のしきい値である。これで、「progress」の（R）を「Alpha」と繋ぎ、いくつかのしきい値を試してみましょう：</span>

<table border="1" id="bkmrk-%E3%81%97%E3%81%8D%E3%81%84%E5%80%A4%EF%BC%9A0.25-%E3%81%97%E3%81%8D%E3%81%84%E5%80%A4%EF%BC%9A0.5-%E3%81%97" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/D9pimage.png)

しきい値：0.25

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/rFLimage.png)

しきい値：0.5

</td></tr><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/yNmimage.png)

しきい値：0.7

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/irVimage.png)

しきい値：0.9

</td></tr></tbody></table>

<span class="c5">何度もしきい値を変えて確認するのは大変なので、Materialのプロパティとして自由に変えられるようにしましょう。「Blackboard」で新しいパラメータ「Progress」の「Float」を作成し、「Alpha Clip Threshold」とつなげてみましょう：</span>

<table border="1" id="bkmrk--40" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/8iSimage.png)

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/S7vimage.png)

</td></tr></tbody></table>

<span class="c5">そして、Materialを選択すると、編集できるパラメータが現れる。この数値を変えれば、すぐその効果を確認できる。</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/cjKimage.png)

<span class="c5"> ただし、Alpha Clippingは0〜1の間だけしか効かないので、-100や100にしても意味がない。Progressに制限を付けましょう。「Blackboard」でパラメータを選択し、「Node Settings」で範囲を設定しましょう。「Mode」を「Slider」にし、少し余裕があるため -0.2～1.2の間の制限を設定：</span>

<table border="1" id="bkmrk-%E2%9E%A1-%E3%82%92%E3%81%99%E3%82%8B%E3%81%A8%E3%80%81material%E3%81%AE%E8%A6%8B%E3%81%88%E6%96%B9%E3%81%8C" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/aQQimage.png)</td><td style="border-width: 0px;"><span class="c5">➡ をすると、Materialの見え方が変わる：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/xMCimage.png)

</td></tr></tbody></table>

<span class="c5">つぎに、巻物が消える領域の周りに光るエフェクトを実現しましょう。つまり、「しきい値のちょっと手前」の領域を求めないといけない。</span>

<span class="c5"> 一旦、すべてのノードを外して、各領域を可視化しましょう。「progress」テクスチャの（R）をStepノードを通して、「Progress」しきい値で白黒の範囲を「Base Color」で確認しましょう</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/0ltimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/pNiimage.png)

<span class="c5">きい値未満の値は「黒」になり、しきい値以上の値は白になる。「少し手前」を求めたいなら、基本的には、「<span style="color: rgb(186, 55, 42);">**Progress値 + 少し**</span>」で新しいしきい値を作れば良いでしょう。</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Pz6image.png)

<span class="c5">そして、この２つの<span style="color: rgb(186, 55, 42);">**領域の差分**</span>だけ残せば、<span style="color: rgb(186, 55, 42);">**リングを作成する**</span>ことができる：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/gDLimage.png)

<table border="1" id="bkmrk-%E2%86%90%E3%80%8Cprogress%E3%80%8D%E3%81%A8%E3%80%8Cprogres" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 32.8765%;"></col><col style="width: 17.1622%;"></col><col style="width: 15.1308%;"></col><col style="width: 34.908%;"></col></colgroup><tbody><tr><td colspan="3" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/ifkimage.png)

</td><td style="border-width: 0px;"><span class="c5">←「Progress」と「Progress＋少し」の差分で残った領域</span></td></tr><tr><td style="border-width: 0px;"><span class="c5">このリングの厚さをパラメータとしてBlackBoardで作ってください。名前は「Edge Size」にしましょう。</span></td><td colspan="3" style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/XcFimage.png)

</td></tr></tbody></table>

<span class="c5">これを「光る」輪郭のために使うので、「Emission」出力と繋げば良いでしょう。ただし、色も選択したいので「黒（０）：光らない／白（１）：光る」光る色とリングを掛け算すれば良いでしょう。</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/TMRimage.png)

<span class="c5">なお、光る強さを調整できるようにするため、EdgeColor のパラメータを「HDR 対応」にしないといけない。EdgeColor を選択し、Node Settings で「Mode:HDR」にしてください。これをすることにより、Inspectorで「Intensity」（強度）を調整ができる。</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Bzmimage.png)

<span class="c5">さて、「Scroll」テクスチャを「Base Color」にし、「Emission」は今まで通りで、「Alpha」と「Clip Threshold」を元に戻せば、以下のように見える：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/WdLimage.png)

はこうなる ↓

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/W55image.png)

<span class="c5">これで燃えるエフェクトが近づいてきたが、円の形が不自然で、中央から広げてもちょっと揺れる境界線を再現したい。これを実現できるため、Shader Graphは「Noise」ノードを提供する：</span>

##### Simple Noise ノード

<table border="1" id="bkmrk-simple-noise-%E3%83%8E%E3%83%BC%E3%83%89-%E3%83%A9%E3%83%B3%E3%83%80" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1639%;"></col><col style="width: 72.9136%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Tf0image.png)

</td><td>Simple Noise ノード

- ランダムノイズを生成

入力

- UV(2)：<span class="c5">UV座標。デフォルトとしてモデルのUVを使用</span>
- Scale(1)：ノイズサイズ（拡大・縮小）

設定

- なし

出力

- Out(1)：2Dのノイズ画像。数値は０～１の間にランダムの数値になる

</td></tr></tbody></table>

<table border="1" id="bkmrk-%C2%A0%E3%81%93%E3%81%AE%E3%83%8E%E3%82%A4%E3%82%BA%E3%82%92%E3%80%8Cprogress%E3%80%8D%E3%83%86%E3%82%AF%E3%82%B9" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/7kMimage.png)

</td><td style="border-width: 0px;"><span class="c5"> このノイズを「progress」テクスチャと組み合わせれば良いでしょう。これで進歩テクスチャのタイミングを多少ずらすことができる。例えば、Progressは「0.5」（進歩の半分）であったところがランダムノイズを追加するので「0.6」や「0.8」になる可能性があり、リングのしきい値がランダムに変わる。</span>

<span class="c5">ただし、これで試してみると、２つの問題が現れる：</span>

- <span class="c5">ノイズが強すぎ、調整できない。</span>
- <span class="c5">Progressを1.2にしても、エフェクトが途中で</span><span class="c5">終わってしまう。</span>

<span class="c5">なっぜなら、最大のランダム数値は「1」であり、progressテクスチャの最大数値も「1」であるため、２つの数値を足せば、可能な最大数値は「2」になってしまうので、1.2を超えず、途中で終わってしまう。</span>

</td></tr></tbody></table>

<span class="c5">このため、ノイズの強さを調整できれば良いでしょう。０〜１ではなく、例えば、-0.1〜0.1の間にすれば、progressの範囲は -0.1〜1.1の間になる。Unityは便利な「Remap」ノードを提供する。</span>

##### Remap ノード

<table border="1" id="bkmrk-remap-%E3%83%8E%E3%83%BC%E3%83%89-%E3%81%82%E3%82%8B%E7%AF%84%E5%9B%B2%E3%82%92%E5%88%A5%E3%81%AE%E7%AF%84%E5%9B%B2%E3%81%B8" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1639%;"></col><col style="width: 72.9136%;"></col></colgroup><tbody><tr><td>[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/r2rimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/r2rimage.png)

</td><td>Remap ノード

- ある範囲を別の範囲へ変換

入力

- In(1)：<span class="c5">変換すべきの数値</span>
- In Min Max (2)：<span class="c5">入力数値の範囲</span>（最小値・最大値）
- Out Min Max(2)：<span class="c5">希望の出力範囲（最小値・最大値）</span>

設定

- なし

出力

- Out(1)：「In」 を変換した後の結果

例

- In Min Max（入力範囲）0~1
- Out Min Max（出力範囲）-0.1～0.1
- In（変換すべき）：0.8
- Out（変換のあと）: 0.06

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Xveimage.png)

</td></tr></tbody></table>

<span class="c5">今回のノイズの強さを調整したいので、Addする前に、Remapで範囲を調整しましょう。</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/44Himage.png)

<span class="c5">これでシェーダは完成。Simple Noise の Scale や Remap の範囲をパラメータとして調整できるようにすれば、Materialでいつでも簡単に調整ができる。</span>

<span class="c5">完成したシェーダーグラフ：</span>

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/3MFimage.png)

### ランダム地形を作成

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/zwBimage.png)

今まで、フラグメントシェーダーで、3Dモデルの各ピクセルの色を調整してきたが、次「頂点シェーダー」を使い、メッシュの頂点をGPUで変えましょう。

まず、シーンに「terrain」メッシュを追加してください。このメッシュが真平に見えるが、実はたくさんの三角形で分割されている：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/laWimage.png)

頂点がたくさんあるので、頂点シェーダーで弄ってみましょう。新しいシェーダ「Terrain」を作成し、頂点の位置を編集するので、[Positionノード](#bkmrk-position%E3%83%8E%E3%83%BC%E3%83%89)を追加してください。なお、それぞれの頂点の高さ（Y軸の位置）を変えるので、「Height A」パラメータを追加しましょう。Positionノードから得た位置を [Split ノード](#bkmrk-split-%E3%83%8E%E3%83%BC%E3%83%89) で分解し、頂点のY軸を「Height A」で上書きしましょう。

ただし、分解したベクトルをもう一度3Dベクトルに合体しないといけないので、Splitノードの逆「Combine ノード」を使いましょう：

##### Combine ノード

<table border="1" id="bkmrk-combine-%E3%83%8E%E3%83%BC%E3%83%89-%E6%9C%80%E5%A4%A7%E3%81%AB%E3%80%81%EF%BC%94%E3%81%A4%E3%81%AE%E6%95%B0" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/eXyimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/eXyimage.png)

</td><td>Combine ノード

- 最大に、４つの数値を１つのベクトルにする

入力

- R(1)：赤色、またはX軸
- G(1)：緑色、またはY軸
- B(1)：青色、またはZ軸
- A(1)：アルファ値、または4Dの４つ目の成分（W）

設定

- なし

出力

- RGBA(4)：４つの成分のベクトル
- RGB(3)：３つの成分のベクトル
- RG(2)：２つの成分のベクトル

</td></tr></tbody></table>

以下のようになる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Fazimage.png)

Inspector で Height A の値を変えて、効果を確認してください。たしかに、すべての頂点のXとZが変わらず、Y軸だけ高くなったり、低くなったりするが、すべての頂点が全く同じ高さになってしまう！

ランダムに高さを変えるには、またノイズを使いましょう。山の形やそのた自然な効果を再現できる「Voronoi」ノイズを紹介：

##### Voronoi ノード

<table border="1" id="bkmrk-voronoi-%E3%83%8E%E3%83%BC%E3%83%89-%E8%87%AA%E7%84%B6%E3%81%AA%E5%8A%B9%E6%9E%9C%E3%82%92%E7%9C%9F%E4%BC%BC" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/4X0image.png)

</td><td>Voronoi ノード

- 自然な効果を真似するノイズ

入力

- UV(2)：<span class="c5">UV座標。デフォルトとしてモデルのUVを使用</span>
- AngleOffset(1)：黒い中心点を揃えるランダム性 
    - 0：縦横できれいに揃える
    - 大きくなると：だんだん混ざっていく
- CellDensity(1)：黒い中心点の数（ノイズ拡大縮小）

設定

- Hash Type：ノイズを生成方法

出力

- Out(1)：ノイズの値（０～１）
- Cells(1)：（高級）各ピクセルの黒い中心点までの距離

</td></tr></tbody></table>

ノイズの出力を Height A との掛け算し、新しい頂点の高さにしましょう。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/FYvimage.png)

は以下のようになる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/JjLimage.png)

一応、頂点の高さはランダムに変わり、山っぽいものができたが、<span style="color: rgb(186, 55, 42);">**陰がおかしい**</span>。なぜなら、頂点の変更で三角形の向きが変わったが、<span style="color: rgb(186, 55, 42);">**方法ベクトルの向きは更新されていない**</span>から。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/bf5image.png)

この問題を解決するには、Shader Graph は以下のノードがある：

##### Normal From Height ノード

<table border="1" id="bkmrk-normal-from-height-%E3%83%8E-1" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/J5cimage.png)

</td><td>Normal From Height ノード

- 高さ（Heightmap）から法線マップを作成

入力

- In(1)：高さ
- Strength(1)：法線ベクトルの強さ（長さ）

設定

- Output Space：方法ベクトルの向き 
    - Tangent：（標準）各三角形に相対に作る
    - World：3D空間に対して、絶対位置を使い作る

出力

- Out(3)：各ピクセルの方法ベクトル

</td></tr></tbody></table>

Voronoi ノードから高さを取れるので、グラフを分岐し、高さを Normal From Height の In(1) と繋ぎ、方法ベクトルをフラグメントシェーダーの「Normal」と接続。

[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Ti5image.png)](https://class.illogic.games/uploads/images/gallery/2026-07/Ti5image.png)

これで陰が直る：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/jByimage.png)

Voronoi の「AngleOffset」と「CellDensity」で山の頻度の分配をコントロールできるので、Blackboard で２つのパラメータ（Randomness, Density）を追加し、繋いでみましょう。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/E20image.png)

これで、マテリアル側で山の頻度とランダム性を調整ができる！

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/Ulsimage.png)

これで単純な山を作成できたが、とてもシャープで、きれいすぎるので、２つのノイズをまぜて、もう少しデコボコの現象を再現してみましょう。また「[Simple Noise](#bkmrk-simple-noise-%E3%83%8E%E3%83%BC%E3%83%89)」を追加し、すでにある高さとの加算してください。なお、２つののノイズの高さは「Height B」で調整できるようにしてください：

[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/irUimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/irUimage.png)

以下のようになる：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/LFzimage.png)

もう少し改善できたが、ノイズが細かすぎるので、「Scale」パラメータを Blackboard に追加し、お好みに調整してみてください：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/zZKimage.png)

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/OHVimage.png)

次に色を付けましょう。「Ground」テクスチャをシェーダーに追加し「Base Color」と接続すると。ついでに、表面が輝きすぎるので、Smoothness を 0 にしましょう：

<table border="1" id="bkmrk--67" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/EzRimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/EzRimage.png)

</td><td style="border-width: 0px;">[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/iSvimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/iSvimage.png)

</td></tr></tbody></table>

これで地形っぽくなったが、頂上周りには雪が欲しくて、残りは「Ground」のままにしたいので、テクスチャを混ぜるノードが必要。Shader Graph で2種類があるが、最も単純なのは：

##### Lerp ノード

<table border="1" id="bkmrk-lerp-%E3%83%8E%E3%83%BC%E3%83%89-linear-inte" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 27.1669%;"></col><col style="width: 72.9105%;"></col></colgroup><tbody><tr><td>[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/wQzimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/wQzimage.png)

</td><td>Lerp ノード

- <span style="text-decoration: underline;">**L**</span>inear Int<span style="text-decoration: underline;">**erp**</span>olation（線形補間）を計算する

入力

- A(1)：1つ目の数値、またはベクトル
- B(1)：2つ目の数値、またはベクトル
- T(1)：補間パラメータ（０～１）

設定

- なし

出力

- Out(1)：補間した数値、また各成分。

線形補間は２つの数値の間に線形的に変えてゆく関数である。

- T は 0 の場合は、Lerp が A を返す。
- T は 1 の場合は、Lerp が B を返す。
- その間には、A と B を混ぜて返す。

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/LOvimage.png)

例えば、

- A：20
- B：40
- T：0.5
- Lerp（20, 40, 0.5）⇒ 30（T は 0.5＝AとBのちょうど真ん中）

</td></tr></tbody></table>

２つの画像を Lerp で補間すると：

<table border="1" id="bkmrk-t-%3D-0-t-%3D-1-t-%3D-0.5" style="border-collapse: collapse; width: 100%; border-width: 0px;"><colgroup><col style="width: 33.3333%;"></col><col style="width: 33.3333%;"></col><col style="width: 33.3333%;"></col></colgroup><tbody><tr><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/z8cimage.png)

T = 0

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/HNYimage.png)

T = 1

</td><td style="border-width: 0px;">![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/DX3image.png)

T = 0.5

</td></tr></tbody></table>

それぞれのピクセルの色を補間し、混ぜる。まず、雪と地面のテクスチャを Lerp で 混ぜましょう：

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/2U2image.png)

これで：

- T は 0 の時 ⇒ 地面
- T は 1 の時 ⇒ 雪

の切り替えができる！そうすると、「ある高さ（しきい値）以上１，それ以下０」を返す [Step ノード](#bkmrk-step-%E3%83%8E%E3%83%BC%E3%83%89)をを使い、Lerpノードの T と接続しましょう：

[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/w5Jimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/w5Jimage.png)

これで、高さは「4」以上だったら「雪」にする処理になっている！

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/0pOimage.png)

雪の高さを Blackboard で調整できるようにすれば完成！

![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/zn4image.png)

完成したグラフ（クリックで拡大）：

[![image.png](https://class.illogic.games/uploads/images/gallery/2026-07/scaled-1680-/CnTimage.png)](https://class.illogic.games/uploads/images/gallery/2026-07/CnTimage.png)