【Unity】Shader Graphの基本をわかりやすく!プログラミング不要でお手軽シェーダ作成

ノードベースで簡単にシェーダを作ることができるShader Graphの使い方をまとめました。

Unity2019.1.0

Shader Graphとは?

Shader Graphはノードベースでシェーダを作ることができる機能です。
ノードベースとは、下図のように「ノード」と呼ばれるブロックを線で繋げてシェーダを作っていく手法です。

f:id:halya_11:20190507230940p:plain:w500

ノードベースでシェーダを組み立てるため、シェーダプログラミングの知識がなくてもシェーダを作れます。
これにより、アーティストも簡単に自前のシェーダを作ることができます。

またShader Graphはこれまでプレビュー版という位置づけでしたが、Unity2019で晴れてProduction Readyとなりました。

blogs.unity3d.com

インストール

Shader Graphを使うにはScriptable Render Pipeline(SRP)の設定がされている必要があります。
これについてはLWRPの記事で説明していますのでこちらを参照してください。

light11.hatenadiary.com

LWRPはSRPのプリセットなので、ひとまずシェーダグラフを使ってみたいという方は上記の記事の通りLWRPを設定してみてください。
さてSRPの設定をしたら、次にShader GraphをPackage Manager経由でインストールします。

f:id:halya_11:20190506212911p:plain:w500

これでインストールは完了です。

ちなみにもしSRPを設定しないままShader Graphを使おうとするとプレビューがピンク色になってしまいます。

f:id:halya_11:20190507225828p:plain:w500

シェーダアセットの作り方

Shader Graphでシェーダを作るにはまずシェーダアセットを作ります。
Projectビューで右クリック > Create > Shader > PBR Graphを選択します。

f:id:halya_11:20190507225919p:plain:w500

これでシェーダが作られました。
InspectorのOpen Shader EditorボタンからShader Graphを開くとシェーダの中身を見ることができます。

f:id:halya_11:20190507225952p:plain:w500

まだ色などが設定されていないので、シンプルな見た目になっています。
ちなみにライティング計算なしのシェーダを作りたい場合はPBR GraphではなくUnlit Graphを使います。

f:id:halya_11:20190507230018p:plain:w500

NodeとPort

次にShader Graphで使われる用語を簡単に説明します。
まず、各処理単位を表す矩形をNodeといいます。

f:id:halya_11:20190507230248p:plain:w500

PBR Masterと書かれているものはMaster Nodeと呼ばれる特別なNodeです。
シェーダグラフでは色々なNodeを最終的にMaster Nodeにつなげることで効果を反映します。

Nodeの右側や左側にある小さい円はPortと呼ばれます。
ここからドラッグを行うことでNode同士を繋げることができます。

f:id:halya_11:20190507230816p:plain:w500

簡単なシェーダを作ってみる

それでは簡単にシェーダを作ってみます。
まずはアルベドの色をColor Nodeから取得します。

Nodeの作成メニューは右クリック > Create Nodeを選択するか、スペースを押下することで開けます。
Color Nodeを検索して作成します。

f:id:halya_11:20190507230903p:plain:w500

あとは好きな色を設定してAlbedoにつなぐだけです。

f:id:halya_11:20190507230940p:plain:w500

右下のプレビューを見ると、設定した色が反映されていることが確認できます。

次にノーマルマップを適用してみます。
Colorノードを作ったのと同じ要領でSample Texture 2Dノードを作成し、TypeをNormalに設定します。
作成出来たらTextureポートにノーマルマップを設定し、OutポートとMasterノードのNormalをつなぎます。

f:id:halya_11:20190507231356p:plain:w500

ノーマルマップが反映され、凹凸が表現できました。

最後に左上のSave Assetをクリックすれば、シェーダが保存されます。

Blackboardで変数を管理する

次にBlackboardという機能について説明します。
Blackboardとはこの部分のことです。

f:id:halya_11:20190507232317p:plain:w500

これを使うとマテリアルから設定するプロパティを作成できます。
ためしにBlackboard右上の+ボタンからColor型のプロパティを追加してみます。

f:id:halya_11:20190507232334p:plain

このシェーダをアサインしたマテリアルのInspectorを見てみると、プロパティが追加されていることがわかります。

f:id:halya_11:20190507232510p:plain

このプロパティをShader Graphで使うには、Blackboardからドラッグ&ドロップします。
これでNodeができるので、あとはPortを繋げればOKです。

f:id:halya_11:20190507232601p:plain:w500

ノードには色々な種類がある

Shader Graphでは前節で紹介した以外にもいろんなNodeがあらかじめ用意されています。
全部紹介すると長くなるので割愛しますが、ノードの一覧はこちらのページで見ることができます。

docs.unity3d.com

ノイズとかまであらかじめ用意されていて面白いです。

またカスタムのNodeを作ることもできますが、これは別の記事で紹介します。

Sub-graphで処理の一部をモジュール化する

Sub-graphを使うと処理の一部を別のAssetとして切り出してモジュール化できます。
Sub-graphを作るにはProjectビューで右クリック > Create > Shader > Sub Graphを選択します。

f:id:halya_11:20190507232653p:plain:w500

Asset名はExampleSubGraphとしておきます。
ダブルクリックで開くと次のような画面になります。

f:id:halya_11:20190507232718p:plain:w500

ここでAdd Slotを一回押すとOutputというスロットが追加されます。
ここに接続された結果がSub-graphのアウトプットとなります。
今回は試しに赤色のColor Nodeを接続してみます。

f:id:halya_11:20190507232814p:plain:w500

これを保存し、今度は前節で作ったシェーダを開きます。
スペースキーを押下し、先ほどのSub-graph名「ExampleSubGraph」を検索、作成します。

f:id:halya_11:20190507232910p:plain:w500

Sub-graphのアウトプットとして設定した通り赤色が得られていることが確認できました。

プレビューのメッシュを変更する

最後に小ネタとして、右下のプレビューのメッシュは変更することができます。
方法としてはプレビューウィンドウ内で右クリックして好きなメッシュを選択するだけです。

f:id:halya_11:20190507232951p:plain

また、Custom Meshを選ぶと組み込み以外のメッシュも選択することができます。

参考

docs.unity3d.com