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

 

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

 

こんにちは。

 

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

 

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

 

今回は「基礎編.⑮」という事で、公式のサンプルシーンにある上の画像のなんかグルッとした動く図形がどのように作られているかを解説します

 

 

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

 

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

 

 シェーダーを開く

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

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

 

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

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

 

 全体の流れ

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

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

このシェーダーは、前回新出したTwirlノードにアニメーションを加えたシェーダーです。

①ではSineカーブのアニメーションを設定し、図形を歪めるスピードを調整できるようにしています。

②では歪める力の最小値と最大値を設定しています。

③のRemapで①と②を合成し、①のアニメーションの最小値:-1と最大値:+1を、②で出力した最小値:0と最大値:+10に変換しています。
ここまでのノード群で最小値:0、最大値:+10の幅を持ったサインカーブが作成され、それをTwirlノードのStrengthに繋ぐ事で、渦巻き状に歪める力がサインカーブを元に時間によって変化するようになります。

最後に、Colorノードから出力された緑カラーをMultiplyノードで乗算して、今回のシェーダーが完成します。

 

  完成!

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

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

 

 まとめ

今回は今までに覚えたアニメーション、リマップ、UVの歪みを掛け合わせたシェーダーとなっていました。
今回新しく覚えるべきノードはありませんので次へ進みましょう!