Shader Graph

プロジェクト設定

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

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

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

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

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

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

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

頂点シェーダー（Vertex）

頂点シェーダーは、メッシュの各頂点の位置、または法線ベクトルを変えることができるシェーダーである。マテリアルを設定するだけで、3Dモデルの変形ができるシェーダー：

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

フラグメントシェーダーは、メッシュの各ピクセルの色、法線ベクトル、金属性などを変えることができるシェーダーである。マテリアルを設定するだけで、3Dモデルの見え方を変えれるシェーダー：

ブラックボード（Blackboard）

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

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

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

ノード設定（ノードによって変わる）	グラフ設定（全般設定）

プレビュー（Main Preview）

シェーダの結果のプレビュー

様々なシェーダを作ろう！

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

無限チェスボード

考え方：「XZ平面の位置により、白いコマ、または黒いコマを表示したい」

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

Positionノード

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

入力

なし

設定

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

出力

Out(3)：XYZの位置

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

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

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

確認：平面の位置を変えて、色がどう変わるのか、確認してみてください。
※ポイント：色はいつも０～１の間で表現するので、位置は「1」を超えると最大値になり、それ以上色が変わらない

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

Split ノード

Splitノード

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

入力

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

設定

なし

出力

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

グラフを直して、Position→Split(R)→Base Colorをつなげてみましょう：

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

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

Sine ノード

Sineノード

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

入力

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

設定

なし

出力

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

Position→Split(R)→Sine→Base Colorにすると：

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

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

Step ノード

Stepノード

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

入力

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

設定

なし

出力

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

Sineの後にStepノードを挟んで、確認しましょう。Edge は「0」にしてください。

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

Multiply ノード

Multiplyノード

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

入力

A(1)：１つ目の数値、またはベクトル
B(1)：２つ目の数値、またはベクトル

設定

なし

出力

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

Split → Multiply → Sine を繋ぎ、「B」は「3.1416」にしておいてください：

Sineの周期をUnityの単位に合わせたので、１つのストライプはグリッドにぴったり！

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

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

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

X方向の値（色）	Z方向の値（色）	X-Z	期待
１（白）	０（黒）	１（白）	１：✓
０（黒）	０（黒）	０（黒）	０：✓
１（白）	１（白）	０（黒）	０：✓
０（黒）	１（白）	-1（？）	１：×

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

Subtract ノード

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

入力

A(1)：１つ目の数値、またはベクトル
B(1)：２つ目の数値、またはベクトル

設定

なし

出力

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

Absolute ノード

絶対値を返す

入力

In(1)：数値、またはベクトル

設定

なし

出力

Out(1)：数値、また各成分の絶対値

X方向とZ方向の差分＋絶対値を計算し、Base Colorと繋ぐと：

レインボーキューブ

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

Sample Texture ノード

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

入力

Texture(T2)：テクスチャ画像 UV(2)：読み込むべきのUV座標。

初期値としてメッシュのUV座標が使われるが、上書きができる。 Sampler(SS)：（高級）色の補完方法

設定

Type：画像の種類

Default：色テクスチャ（模様） Normal：法線マップ Space：（高級）ノーマルマップの空間（TangentでOK）

出力

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

このままで「RBGA」を「Base Color」と繋いでみましょう：

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

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

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

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

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

Time ノード

時間を返す

入力

なし

設定

なし

出力

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

Vector2 ノード

2Dベクトルを作成

入力

X(1)：X成分 Y(1)：Y成分

設定

なし

出力

Out(1)：出力のベクトル

Add ノード

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

入力

A(1)：１つ目の数値、またはベクトル B(1)：２つ目の数値、またはベクトル

設定

なし

出力

Out(1)

数値と数値：A + B

10 + 4 = 14 数値とベクトル：数値と各成分でできる新しいベクトル

3 + [1, 2, 3] = [4, 5, 6] ベクトルの場合は、各成分の足し算を返す

例：[1, 2, 3] + [4, 5, 6] = [5, 7, 9]

完成シェーダグラフ

魔法巻物を燃やす

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

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

「progress」は色テクスチャではなく、「データテクスチャ」という。このテクスチャは表示するべきではなく、シェーダの計算のために使うテクスチャである。今回は穴が開くようなエフェクトを作るので、「progress」はアニメーションの進歩のために使い、０（黒）から１（白）まで徐々に開けていく。

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

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

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

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

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

しきい値：0.25

しきい値：0.5

しきい値：0.7

しきい値：0.9

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

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

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

➡ をすると、Materialの見え方が変わる：

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

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

きい値未満の値は「黒」になり、しきい値以上の値は白になる。「少し手前」を求めたいなら、基本的には、「Progress値 + 少し」で新しいしきい値を作れば良いでしょう。

そして、この２つの領域の差分だけ残せば、リングを作成することができる：

←「Progress」と「Progress＋少し」の差分で残った領域このリングの厚さをパラメータとしてBlackBoardで作ってください。名前は「Edge Size」にしましょう。

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

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

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

はこうなる ↓

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

Simple Noise ノード

ランダムノイズを生成

入力

UV(2)：UV座標。デフォルトとしてモデルのUVを使用 Scale(1)：ノイズサイズ（拡大・縮小）

設定

なし

出力

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

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

ただし、これで試してみると、２つの問題が現れる：

ノイズが強すぎ、調整できない。 Progressを1.2にしても、エフェクトが途中で終わってしまう。

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

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

Remap ノード

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

入力

In(1)：変換すべきの数値 In Min Max (2)：入力数値の範囲（最小値・最大値） Out Min Max(2)：希望の出力範囲（最小値・最大値）

設定

なし

出力

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

例

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

今回のノイズの強さを調整したいので、Addする前に、Remapで範囲を調整しましょう。

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

完成したシェーダーグラフ：