コガネブログ

平日更新を目標にUnityやC#、Visual Studioなどのゲーム開発アレコレを書いていきます

【Unity】Shader Graph の触り方

はじめに

Unity 2018.1.0b2 からノードベースのシェーダエディタ
「Shader Graph」が使えるようになりました

https://forum.unity.com/threads/feedback-wanted-shader-graph.511960/

そして「Shader Graph」の使い方がこちらのフォーラムに記載されていたので、
このフォーラムの内容を一部翻訳して、この記事で紹介していきます

Shader Graph の触り方

Unity 2018.1.0b2 で「Shader Graph」を試すためには
専用のサンプルプロジェクトをダウンロードする必要があります

https://oc.unity3d.com/index.php/s/mWv6mGlHtCHfz7S

上記のページにアクセスして
「Download LightweightAndShaderGraph.zip」ボタンを押して
ダウンロードした「LightweightAndShaderGraph.zip」を展開して
中にある「LightweightAndShaderGraph」フォルダを Unity で開きます

f:id:baba_s:20180110224354p:plain

プロジェクトを開いたら、Project ビューの「Create」を押して
「Shader Graph」を選択します

f:id:baba_s:20180110224607p:plain

そして、作成した Shader Graph のファイルをダブルクリックするか、
Inspector の「Open Shader Editor」を選択すると、

f:id:baba_s:20180110224822p:plain

シェーダの編集ウィンドウが表示されます
最初は「マスターノード」のみが存在します

f:id:baba_s:20180110225452p:plain

f:id:baba_s:20180110225459p:plain

上記のスクリーンショットのように、マスターノードのパラメータを編集するだけでも
シェーダをカスタマイズすることが可能です

f:id:baba_s:20180110230123p:plain

ノードを追加したい場合は編集ウィンドウを右クリックして「Create Node」を選択します

f:id:baba_s:20180110230200p:plain

例えば、Color ノードを追加したい場合は、検索欄に「Color」と入力して
表示された「Color」を選択します

f:id:baba_s:20180110230240p:plain

これで、Color ノードが作成されました

f:id:baba_s:20180110230307p:plain

そして、Color ノードの色を設定して、マスターノードに接続することで

f:id:baba_s:20180110230347p:plain

Color ノードで設定した色が反映されます

f:id:baba_s:20180110230811p:plain

テクスチャを反映したい場合は、Sample Texture 2D ノードを使用します

f:id:baba_s:20180110232442p:plain

Shader Graph を保存したい場合は「Save」ボタンを押します

f:id:baba_s:20180110231641p:plain

作成した Shader Graph は通常のシェーダと同様に使用できます
Shader Graph のファイルを右クリックして「Create>Material」を選択すると

f:id:baba_s:20180110232013p:plain

作成した Shader Graph が割り当てられたマテリアルが作られます

f:id:baba_s:20180110231047p:plain

また、例えば、テクスチャをマテリアルの Inspector から設定できるようにしたい場合は
上記のように Texture 2D Asset ノードを作成して、
Texture 2D Asset ノードと Sample Texture 2D ノードを連結して

f:id:baba_s:20180110231230p:plain

Texture 2D Asset ノードを右クリックして「Convert To Property」を選択します

f:id:baba_s:20180110231327p:plain

すると、Texture 2D Asset ノードが Property ノードに変換され、
シェーダの Properties に追加されます

f:id:baba_s:20180110231509p:plain

マテリアルの Inspector を見てみると、
テクスチャのプロパティが追加されていることがわかります

f:id:baba_s:20180110232231p:plain

作成したプロパティの名前で上記の入力欄で変更できます