Shader Graph 作ってみた
環境
Unity2018.2f
関連記事はこちら
作ってみるテスト
前回は基本的な機能を探るだけで終わってしまったので、
今回は参考サイトみながら、流れを把握してみようかな、と。
参考にしたのはUniteの高橋 啓治郎さんの講演動画。
まずはこの中の Unlit Graph の箇所。
縦方向にぶつ切りされるのはおいといて、
x（u）方向に揺れるのを作ってみようと。
とりあえず Unlit Graph の作成。
結果が見やすいように、previewのところを右クリックしてQuadに変更。
で、外部からテクスチャ貼り付けたいので、デフォルトからあるノードにTextureプロパティを追加。
TextureプロパティからSampleTexture2Dノードを作成。
一旦、SampleTexture の RGBA を MasterノードのColorに引っ張って、これで普通のUnlitのshaderが作成されますね。
次にノイズを作成します。Gradient Noise ノードを作成。
また、ＵＶノードも新規作成します。
揺れはx方向のみにしたいので、Gradient Noise の UV input には v のパラメータのみをつなげます。
ここが少し直感的ではないかもしれませんが（僕は結構悩みました）、
出来上がったサンプルみるとなんとなくわかるかもしれません。
要はこの白黒の強さ分、横にずれるわけですね。
横にずらすために、元のuv情報に出来上がったNoiseノードのOutをAddさせます。
Add ノードを作成し、元のUVノードの u と Noise ノードの Out を加えます。
最後にこのままだとv方向がほとんど一定のuv情報になってしまうので、
Combineノードを作成し、RにAddノードのOutを、GにSplitノードのGをつなげます。
Combineノードの Out を作ってあったSampleTexture2DノードのUVにつなげると、揺らぎが生まれました。
Gradient Node は０～１を出力するらしく、このままでは揺らぎ幅が大きいですね。
揺らぎ幅を調整するために Remap ノードを使用します。
Gradient Noise の Out を Remap の In につなげ、
In Min Max を 0～１、Out Min Max を -0.1 ～ 0.1 にし、Remap の Out を Add の In にします。
これで揺らぎ幅が小さくなりました。
次に揺らぎを縦方向にずらします。
Gradient Noise の UV に元のUVの v をそのまま入力していましたが、
これを時間でずれるようにします。
Add ノードを作成し、その Input に UV の v と Time ノードの Time を入力し、
Out を Gradient Noise の UV に入力させます。
こうすることで、Y方向にいい感じにずれますね。
ただこれ、個人的に疑問なのは、縦方向にずらすっていうよりは
ノイズを再生成させているので、同じ揺らぎを縦方向にスクロールさせるっていう感じではないですね。
実際、モバイルで毎フレーム、ノイズを生成するコストっていうのはどれぐらいのもんなんでしょうか。
揺らぎの部分だけをスクロールさせる方法を数時間検討したけど、思いつかず・・・
さて、最後にこのままですと、常に揺らいでいる状態になるので揺らぎ自体に頻度を付けます。
Time ノードを作成し、Multiply ノードのAにつなげます。
Multiply ノードのBを適当にセットし、新しく作成した Gradient Noise ノードのUVにつなげます。
そうすると明滅するだけの効果が見えると思います。
このノードを Remap の Out と Mutliplay ノードで合成し、もともとRemap の Out をつなげていた箇所につなげます。
そうすると、揺らぎの頻度を調整できました。
まとめ
今回はUniteの動画を参考にShader Graphで実際につくってみました。
まだ各ノードが何を入力とし、何を出力させるのかっていうのが意識できていないので大変でしたが、
慣れてくるというか、やりたいことをするための手段をちゃんと身につければ、大きく役に立ちそうな気がしました。
今回のキニナル
Gradient Noise の Output がベクトルじゃなく、value ってのが気になりますね。
Gradient Noise Node · Unity-Technologies/ShaderGraph Wiki · GitHub
何を出力しているんでしょう。
