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

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

 

こんにちは。

 

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

 

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

 

今回は「基礎編.㉔」という事で、公式のサンプルシーンにある上の画像の2色の範囲が動くシェーダーがどのように作られているかを解説します

 

 

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

 

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

 

 シェーダーを開く

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

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

 

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

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

  

 全体の流れ

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

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

このシェーダーは、前回の基礎編.㉓のStepノードのEdgeに対してアニメーションをさせているシェーダーです。

①で0~1の範囲でアニメーションするカーブをつくり、②でUVのUだけ出力、それらを③Stepノードで合成しています。
0か1かの判定に使われるEdgeがアニメーションしますので、このノードのプレビュー画面ではU方向に白と黒の範囲が移動しています。

最後に④のLerpノードで合成し、今回のシェーダーの完成です。

 

   

 完成!

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

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

 

 まとめ

今回は前回のStepを使ったシェーダーにアニメーションを加えたものになります。

さて、今回は新出ノードもありませんので次へ進みましょう!