【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.⑳

f:id:Effect-Lab:20180503091751g:plain

 

こんにちは。

 

シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。

 

このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
 

 

今回は「基礎編.⑳」という事で、公式のサンプルシーンにある上の画像のチカチカ点滅するシェーダーがどのように作られているかを解説します

 

 

 まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。

 

シーンは開けましたか?
それではシェーダーの解説に入ります。

 

 シェーダーを開く

サンプルのシーンを開いたら、「Procedural-Color-RandomFlicker」というファイルをダブルクリックして下さい。

f:id:Effect-Lab:20180503091848j:plain

 

するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。

f:id:Effect-Lab:20180503094146j:plain

  

 全体の流れ

個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。

f:id:Effect-Lab:20180503102354j:plain

このシェーダーで重要なノードは⓵のRandom Rangeノードです。
Random Rangeノードで後のLerpノートで合成した2色の変化具合を設定しています。

※(Timeノードと一緒にMultiplyノードに繋げているVector1ノードで変化具合のスピードを編集できるようにもなっています。・・・が、値を変えてもどう変わってるのかは分かりませんでした・・・。すみません。)

 

で最終的にこのようなシェーダーが完成します。

f:id:Effect-Lab:20180503102936g:plain

 

  

 重要ノード群の解説

さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。 

 

 ① Random Range

f:id:Effect-Lab:20180503111128j:plain

このノードは、MinとMaxに入力された最小値、最大値を、Seedに入力された速度に基づいてランダムな値を出力します。 

 

今回の場合、Time(= _Time.y : 1 秒)に0.1を乗算した0.1秒という短い時間で、最小値0.8、最大値1.0のランダムな値を出力しています。

 

Min,Maxの差を大きくすればするほど振れ幅が大きくなりチカチカしますね。
0~1の範囲を超えた値を入力した場合は、強制的に0か1かに丸め込まれてしまいます。
例えばMax1.5としたら強制的に1.0の値になってしまいます。

値を調整する場合は0~1の範囲内で設定しましょう。

 

ちなみに、どういう計算式でランダムになっているのか調べてみましたがよく分かりませんでした。
ですので使われている計算式をそのまま貼っておきますね。

float randomno =  frac(sin(dot(Seed, float2(12.9898, 78.233)))*43758.5453)
Out = lerp(Min, Max, randomno)

 

まあとりあえず難しい事は置いといて、Random Rangeはその名前のとおり、最小値と最大値の間の値をランダムで出力する!と覚えておけば良さそうです。
とりあえずはね。

  

 完成!

f:id:Effect-Lab:20180503102936g:plain

これで今回のシェーダーは完成です!

 

 まとめ

今回はRandom Rangeという新しいノードが出てきました。

このランダムで細かく値を変えるノードは、テレビの砂嵐みたいなノイズのような表現をしたい時に使えそうかなーとか思います。

さて、今回新しく覚えるべきノードは1つです。

  1. Random Rangeでランダム値を出力!

この1つを覚えたら次へ進みましょう!