渋谷ほととぎす通信

新しいこと、枯れたこと問わず大庭が興味を持ったものを調査、生活の効率を求める完全趣味の技術ブログ。基礎を大事にしています。

初心者向けUnity Shader Graphの始め方


f:id:esakun:20150730215258g:plain:w450

ノードを繋げてシェーダを作成することができる、Unity純正のShader Graphを始めてみました。

環境セットアップ(Unity2019.1.10f1の場合)

f:id:esakun:20190918020203p:plain:w450 新規プロジェクトで始める場合、Unity HubからLightWeight RPを選んだ状態でプロジェクトを作成するとスムーズにShader Graphを始められます。


参考 : UnityHubが過去バージョンのUnityをインストールできるようになっていた - 渋谷ほととぎす通信


Shader Graphを利用するためにはScriptable Render Pipeline(以下:SRP)を利用する必要があります。
そこでLightWeigh Render Pipeline(以下:LWRP)を使用します。

LWRPはUnityが提供する汎用性の高いSRPです。基本はこれを使ってカスタマイズしていくのが良いでしょう。LightWeightという名前とは裏腹にそこそこの絵作りが可能で高機能です。


ちなみに、先日のCEDEC2019のセッションでも発表されていましたが、Unity2019.3ではLightWeightというキーワードはUniversalという名前にリライトされUniversal Render Pipeline (以下:URP)になる予定です。

シェーダファイルの作成 CreateからUnlit Graphを選択

f:id:esakun:20190918021515p:plain 今回はUnlitなシェーダを作成するので Create > Shader > Unlit Graph からシェーダを作成します。

f:id:esakun:20190918021745p:plain

作成したシェーダファイルをダブルクリックするとShader Graphが起動します。

Timeでアニメーション

f:id:esakun:20190918022216g:plain Create Node > Input > Basic > TimeからTimeノードを追加します。
こんな感じでTimeのサイン波プロパティをカラーに適用するとこんな感じで白と黒を行き来するシェーダができます。


f:id:esakun:20190918024135g:plain

シェーダにテクスチャを追加する方法

シェーダのインプット情報として任意のテクスチャを追加する方法の説明です。

f:id:esakun:20190918032531p:plain

外部からテクスチャをセットする場合はShaderGraph左上のBlackboardから追加します。

f:id:esakun:20190918024313p:plain

Blackboardが表示されていない場合

f:id:esakun:20190918024332p:plain 表示されていない場合はShader Graph右上のBlackboardをクリックすると表示されます。

Texture2Dプロパティの追加

f:id:esakun:20190918024522p:plain プラスボタンをクリックすると、追加可能なプロパティが表示されるのでテクスチャを追加する場合はTexture2Dを選択します。

f:id:esakun:20190918024720p:plain

D&Dでプロパティノードを追加

f:id:esakun:20190918024854g:plain

BlackboardからD&DするとTexture2Dのノードが追加されます。

Texture2Dをシェーダに適用する

f:id:esakun:20190918030344j:plain:w120

こちらのテクスチャをフェッチして表示させてみます。

f:id:esakun:20190918025656p:plain まずはサンプルとなるテクスチャをBlackboardにセットしておきます。ここでセットしたテクスチャはあくまでシェーダの確認用になります。Materialにセットする際は再度テクスチャをセットする必要があります。

f:id:esakun:20190918025753g:plain

このようにTexture2Dノードから何もないところへD&Dするとノード作成メニューが出てくるので、Input > Texture > Sample Texture2Dを選択します。

f:id:esakun:20190918030308p:plain

Sample Texture2DノードのRGBAプロパティをUnlit Masterのカラーへ繋げればテクスチャのカラーをそのまま反映することができます。

いろいろ遊んでみる

f:id:esakun:20190918031228g:plain

Shader Graphには様々なノードが実装されています。最後に何も考えずに遊んでみました。

ノードはこのような感じでSimple Noiseでノイズを作っています。 f:id:esakun:20190918032735p:plain

最後に

基本的なShader Graphの使い方はわかりました。ノードを繋げるだけでシェーダが作成できるのは思った以上に簡単でした。 ただし、簡単だと思うのはシェーダを書いたことがあるエンジニア側の意見であって、ノンプログラマーにとってはとても難しいことだと認識しています(コードを直書きするよりは楽だと思うけど)。


今後の方針としては、数あるノードの把握、使い方を理解していこうと思います。ネットには作例がゴロゴロ転がっているので、それらを参考に作っていく、または今までShader Labで作ってきたシェーダをShader Graphで置き換えてみるというのも良い勉強になりそうです。


ただし置き換えが完了したとしても、僕の主戦場であるスマホ環境でどのくらいパフォーマンスがでるシェーダがジェネレートされるのかが気になりポイントです。

実戦投入する上で、この辺りは慎重に計測していく必要があるかなと思います。


とはいえLWRP(URP)の時代は来そう(現にポストモーテムがCEDEC2019で発表されている)ですし、Shader Graphを使いこなすことでクリエーターとの協業ができるようになり、プロダクトのクオリティを上げられるかもしれないので頑張って勉強していこうと思います。

環境

  • Unity2019.1.10f1
  • macOS Mojave 10.14.5