こんにちわ、オオバです。

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

この記事の内容

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_0

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

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を選択

【Unity2019版】初心者向けUnity Shader Graphの始め方_1

今回はUnlitなシェーダーを作成するので Create > Shader > Unlit Graph からシェーダーを作成します。

【Unity2019版】初心者向けUnity Shader Graphの始め方_2

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

Timeでアニメーション

【Unity2019版】初心者向けUnity Shader Graphの始め方_3

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_4

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

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_5

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_6

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_7

表示されていない場合はShader Graph右上のBlackboardをクリックすると表示されます。

Texture2Dプロパティの追加

【Unity2019版】初心者向けUnity Shader Graphの始め方_8

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_9

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_10

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

Texture2Dをシェーダーに適用する

【Unity2019版】初心者向けUnity Shader Graphの始め方_11

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_12

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_13

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

【Unity2019版】初心者向けUnity Shader Graphの始め方_14

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

いろいろ遊んでみる

【Unity2019版】初心者向けUnity Shader Graphの始め方_15

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

ノードはこのような感じでSimple Noiseでノイズを作っています。

【Unity2019版】初心者向けUnity Shader Graphの始め方_16

最後に

基本的なShader Graphの使い方はわかりました。
ノードを繋げるだけでシェーダーが作成できるのは思った以上に簡単です。

ただし、簡単だと思うのはシェーダーを書いたことがあるエンジニア側の意見。
ノンプログラマーにとってはとても難しいことだと認識しています
(コードを直書きするよりは楽だと思うけど)。

今後の方針としては、数あるノードの把握、使い方を理解していこうと思います。
ネットには作例がゴロゴロ転がっているので、それらを参考に作っていく。

または今までShader Labで作ってきたシェーダーを
Shader Graphで置き換えてみるというのも良い勉強になりそうです。

ただし置き換えが完了したとしてもきになることが。

オオバの主戦場であるスマホ環境で
どのくらいパフォーマンスがでる
シェーダーを生成してくれるのかが気になりポイントです。

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

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

オススメ記事
検証環境