Kilimanjaro Warehouse

WEBとかゲーム開発のことについて書きます。

Unity: Shader Graph使ってみた

Unity 2018.1の新機能、シェーダーを簡単に作成できるShadeGraphを使ってみました!
使ってみて、自分なりにわかったことをメモしておきます。
不正確な情報が含まれる場合があります。

情報源は公式のGitHubWikiです。
今回の記事に書いてある内容は、このWikiに全て載っているものなので、
正確な情報を知りたい方は、こちらを参照してください。
github.com

追記: 2018年6月2日

新しいバージョンだと、描画パイプラインを変更しないと正しく動作しないようです。
kiliware.hateblo.jp


Shader Graphを使うための準備

まずは、Shader Graphを使うための準備をしましょう。
まずはUnity 2018.1を起動して、WindowからPackage Managerを開きます。
f:id:kilimanjaro-a2:20180421180459p:plain
Package Managerを開いたら、
①Allを押し、
②Shader Graphを選択、
③右上のInstallを押します。
これでShader Graphが使えるようになります。

Shader Graph Windowの説明

f:id:kilimanjaro-a2:20180425221925p:plain

基本的な使い方

それでは、以下のチュートリアル動画を見てください。

GraphAndLightweight
動画の長さは4分ほどで、動画内では、キャラクターの目を一定間隔で点滅させるシェーダーを作っています。
この動画を見ればShader Graphの使い方が大体わかると思います。

チュートリアル動画の解説

これ以降は、動画で作られたシェーダーが具体的にどういうことを行なっているのか、
各Nodeで行う処理を追いながら、解説してみようと思います。

Multiply

f:id:kilimanjaro-a2:20180421175955p:plain
MultiplyはAにBを掛けて返すNodeです。
AにはTimeを受け取り、BにはPulseの値を受け取っています。
Timeは経過した時間を返します。
Pulseの値はマテリアルから変更できるようになっています。
Pulseの数値を大きくするほど、output Portから渡す値の増加速度が速くなりますね。

Sine

f:id:kilimanjaro-a2:20180421180258p:plain
次にSine Nodeで、Multiply Nodeから受け取った値を、
サイン関数で処理して、-1から1の範囲で返します。
f:id:kilimanjaro-a2:20180421180507p:plain
横軸は時間、縦軸はサイン関数が返す値です。
時間の経過に応じて-1から1までの範囲で、
値が波のように変化していることがわかると思います。

Remap

f:id:kilimanjaro-a2:20180421180309p:plain
そしてRemap NodeでIn Min Maxで設定した幅をOut Min Maxで設定した幅に変換します。
今回の場合、-1から1までの数値の幅を、0.3から3までの幅に変換します。
f:id:kilimanjaro-a2:20180421180510p:plain

Multiply

f:id:kilimanjaro-a2:20180421180413p:plain
その後、Multiply Nodeで、マテリアルから設定したEyeColorというVector4型の値へ、
先ほどのRemap Nodeから出力した値を掛け合わせます。
例えばEyeColorに(83,0,0,0)を設定している場合、
時間の経過に応じて、(25.5, 0, 0, 0)から(255, 0, 0, 0)の範囲で、Vector4型の値を返すようになります。

完成

f:id:kilimanjaro-a2:20180421175951p:plain
最後にMaster NodeのEmissionにMultiply Nodeで処理した値を渡すことで、
点滅するシェーダーのできあがりです!


できあがったシェーダーは、通常のシェーダーと同じようにマテリアルに設定して使います。
マテリアルをCubeにつけると、点滅するCubeを見ることができると思います。
f:id:kilimanjaro-a2:20180421180246g:plain


Propertyに設定した値は、マテリアルから変更することができます。
今回の場合は、PulseとEyeColorが変更可能ですね。
f:id:kilimanjaro-a2:20180421175948p:plain
Pulseの値をデフォルトの2から増やせば、点滅の間隔が速くなります。
スクリプトから操作すれば、状況によって速さが変わる、心臓の鼓動みたいなものを表現できたりしそうですね。
EyeColorをいじれば好きな色に点滅させることができます。

以上が、ShaderGraphチュートリアル動画の解説でした!
間違っている点や疑問点などあれば、コメントお願いします!