【Unity】『シェーダーグラフ』の使い方

こんにちは。

シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。

このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。 

今回は「シェーダーグラフの使い方」という事で、エディターの使い方、ノードの基本機能など、シェーダーグラフを学ぶにあたって覚えておいた方が良い基本機能の解説をしていきます。

まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。

シーンは開けましたか？
それではシェーダーグラフの使い方を解説していきます。

 シェーダーファイルを作る

それではさっそくシェーダーを作ってみましょう！

Projectタブからシェーダーを作りたいフォルダー内で「右クリック→Create→Shader」と進んで行くと、「PBR Graph」「Sub Graph」「Unlit Graph」という項目が出てきます。

3つのうちのどれかを選ぶとシェーダーが作成され、シェーダーグラフのエディターが立ち上がります。

PBR Graphとは？

PBR Graphは、基本的にキャラクターや背景などの3Dモデルに使われるシェーダーです。

アルベド、ノーマル、スペキュラー、メタルネス、ラフネス、オクルージョン、アルファ等々、物理ベースレンダリングを前提としたシェーダーを作りたい時はこちらを使用します。

エフェクトで使うとしたら岩とか氷とか、物理的なモデルを作る時に使用するイメージです。

Sub Graphとは？

Sub Graphを簡単に言うと、複数のノードを1つにまとめたシェーダーファイルです。
概念としては下図を参照して下さい。

このように、ある機能を持ったノード群を1つのシェーダーファイルとしてまとめて、それを別のシェーダーにノードの1つとして再利用する事ができます。

複雑な機能を持ったノード群を別のシェーダーでも使いたい場合に重宝する機能ですね。

Unlit Graphとは？

Unlit Graphは、基本的にライティングを必要としないパーティクルや2D用のシェーダーとなります。

カラーとアルファのテクスチャがアサイン可能で、ブレンドモードも複数備えています。

エフェクトで使うシェーダーは主にこのシェーダーになりますので、これからの解説はこのUnlit Graphをベースに進めていきたいと思います。

 GUIの説明

Unlit Graphシェーダーを作るとこのようなエディターが立ち上がります。
まずは各機能の解説をしようと思います。

①マスターノード

シェーダーの基本属性を決めるノードとなり、シェーダー内の全てのノードがここに集約されます。

このノードが持つ機能は下記になります。

• Color：カラーチャンネルの入力
• Alpha：アルファチャンネルの入力
• Alpha Clip Threshold：この値以下のアルファを持つフラグメントを破棄します。この機能を有効にするにはここにノードを繋ぐ必要があります。
• Opaque：不透明シェーダーになる
• Transparent：透明シェーダーになる
• Alpha：アルファブレンド（Alphaチャンネルが使える）
• Premultiply：事前にアルファチャンネルをカラーチャンネルに乗算するブレンド方法（Alphaチャンネルを使える乗算）
• Additive：加算ブレンド（Alphaチャンネルは無視される）
• Multiply：乗算ブレンド（Alphaチャンネルは無視される）
• Two Sided：両面描画になる

エフェクト経験者ならなんとなく出来る事が分かるかと思います。
分からない方はとりあえず読み飛ばしましょう。
 

②プロパティウィンドウ

あるノードのパラメーターを外部（マテリアル）から変更したい時にノードをプロパティ化するのですが、そのプロパティ化した項目がここに並んでいきます。

プロパティ化する方法は後ほど解説します。

③シェーダーの完成形を映すウィンドウ

沢山ノードを繋げて出来上がったシェーダーのビジュアルがここにリアルタイムに表示されます。

このウィンドウ上で右クリックすると表示タイプを色々選べるので、お好みで選んで下さい。
個人的にQuadが見やすくてオススメです。

④Save Asset

エディター内で変更した内容を保存します。

⑤Show In Project

今開いているシェーダーファイルがどのディレクトリに存在するかをハイライトして教えてくれます。

 ノードを使ってみる

それでは実際にノードを使って下記のような図形を作ってみましょう。

エディター内の空いてるスペースを右クリックして、「Create Node」を選択して下さい。
するとこのようなポップアップウィンドウが開いたと思います。

ここから様々な機能を持ったノードを呼び出す事ができます。
今回は「Ellipse」と検索ボックスに入力して、Ellipseを選択します。

するとこのようなノードが作られます。

このノードは円を作るノードです。
Widthで円の幅を、Heightで円の高さを設定できます。

同様の操作で「Color」「Multiply」の2つのノードを作ってみましょう。
Colorは色を設定するノード、Multiplyは2つのノードを乗算合成するノードです。

ColorノードをMultiplyノードのA入力、EllipseノードをMultiplyノードのB入力に繋いでみると、このような結果になります。
（※Colorノードでは緑色を設定しています）

ここからMultiplyノードをUnlit MasterノードのColorに繋ぐと目的の図形が完成です！

このようにシェーダーグラフでは、多種多様な機能を持ったノードを繋ぎ合わせて、様々なシェーダーを作る事ができます。

 右クリックメニューの説明

• Create Node：新たにノードを作成
• Copy shader：選択しているノードのシェーダーコードをクリップボードにコピー。（テキストファイル等にコピペすると対象のノードがどういうコードで書かれているか見る事ができます。）
• Disconnect all：選択中のノードを繋がっている全てのノードから外す
• Cut：選択中のノードを切り取り
• Copy：対象中のノードをコピー
• Paste：「Cut」or「Copy」したノードを張り付
• Delete：選択中のノードを削除
• Duplicate：選択中のノードを複製
• Collapse Previews：全てのノードのプレビュー画面を閉る
• Expand Previews：全てのノードのプレビュー画面を開く
• Convert To Sub-graph：選択中のノードをSub-graphファイルにまとめる
• Convert To Inline Node：プロパティ化されているノードを元の状態に戻す
• Convert To Property：選択中のノードをプロパティ化する
• Open Documentation：選択中のノードのドキュメントを開く（英語）

 ノードのプロパティ化について

作成したシェーダーは、マテリアルにアサインする事でパーティクルやキャラクターなどに適用されます。

ただし、1つのシェーダーを複数のマテリアルで流用するケースもあります。
ゲーム開発のように大量のアセットを作成する場合、1つのシェーダーを各キャラクター事に用意したマテリアルにアサインし、マテリアルからテクスチャの変更や各種パラメーターの調整を行う事が多いです。

そうする事で大量のシェーダーファイルを読み込む無駄を省けますし、後々シェーダーに変更を加える場合に1つのファイルを変更すれば一発で全てのマテリアルに変更が反映されるので開発効率が良くなります。（※他にも理由はあると思いますがあまり詳しくないので割愛）

この「マテリアルから各種パラメーターの調整」を実現するためには、シェーダー内部のパラメーターを外部（マテリアル）から直接編集できるように設定しておく事が必要です。
これをノードのプロパティ化と言います。 

それでは先ほど作った緑色の円のシェーダーを利用して、プロパティ化からマテリアルで直接編集する流れを解説していきます。

まず、新たに「Vector1」というノードを作り、下図のようにEllipseノードのWidthとHeightの両方に繋いで下さい。
その際Vector1の値は0.5として下さい。

Vector1ノードを右クリックして、「Convert To Property」を選択して下さい。
すると下図のように、「Vector1」ノードが「Property」という名称に変わり、プロパティウィンドウにVecotr1という項目が追加されます。

追加されたVector1の項目を展開すると、「Default」と「Mode」という項目があります。
Defaultは数値を入力する欄、Modeは下記の3種類から変更できます。

• Default：基本のモード。小数点以下の値も入力可能。
• Slider：最小値と最大値を設定して、その範囲でスライドバーを使って数値変更する事が出来る。
• Integer：入力値を整数のみにする。

Vector1の項目をダブルクリックすると名前も変更できます。
マテリアルから数値変更する際に、分かりやすい名称にしておくと便利です。
ここでは「Ellipse Size」としておきます。

ついでにColorもプロパティ化してマテリアルから色変更できるようにしておきましょう。

最終的にこのようなシェーダー設定になりました。

赤枠のところが今回追加されたプロパティです。
このシェーダーをマテリアルにアサインしてみましょう。

Projectのどこでもいいので「右クリック→Create→Material」でマテリアルを作成します。
作成したマテリアルを選択して、Inspectorに先ほど作成したシェーダーをドラッグ&ドロップして下さい。

するとマテリアルの表示がこのように切り替わります。
「test」というマテリアルに、作成した「New Shader Graph」というシェーダーファイルがアサインされました。

さきほどシェーダー内で設定したように、Ellipse Sizeがスライドバーで調整可能、Ellipse Colorがカラーピッカーで調整可能になっています。
試しに数値をいじってみるとマテリアルのプレビュー画面に映っている円の大きさが変わったり色が変わったりすると思います。

このようにシェーダーを作成する際には、マテリアルから調整したい内容も視野にいれて作業する必要があります。

 ※ちなみにプロパティ化したノードは、「Convert To Inline Node」でプロパティ化を解除する事ができます。

 便利なショートカット

最後にシェーダーグラフの便利なショートカットをいくつか紹介しておきます。

• Ctrl + X：ノードの切り取り
• Ctrl + C：ノードのコピー
• Ctrl + V：ノードのペースト
• F：全ノードをフォーカスor選択中のノードをフォーカス
• Spacebar：ノード作成ウィンドウを開く

 まとめ

いかがだったでしょうか。

いきなり長めの記事になってしまいましたが、シェーダーファイルを作るところから実際にノードを組んでみるまで、シェーダーグラフの基本的なところは解説できたかなと思います。

次回からは公式のサンプルデータを元に、各シェーダーがどのように作られているかを紐解きながら、シェーダーの理解を深めていきたいと思います。