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

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

 

こんにちは。

 

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

 

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

 

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

 

 

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

 

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

 

 シェーダーを開く

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

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

 

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

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

  

 全体の流れ

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

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

このシェーダーは、前回の基礎編.㊹と同様ボロノイを使ったシェーダーです。
違いはアニメーションしているかどうかだけですね。

VoronoiノードのAngle Offsetの値をアニメーションさせる事で、このような動きのあるシェーダーになります。

それを基にLerpノードで2色を塗り分けて完成です。

 

 完成!

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

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

 

 まとめ

今回は前回作成したボロノイシェーダーにアニメーションを加えたものでした。
新たに解説するところもないので、今回の解説はこれで終わりになります。

さて、ちょうどこのシェーダーで45個!完了!
終わりました!

 

いやー、最初は1つのシェーダーを理解するのに何時間もかかったものですが、1個1個進めるにつれ理解が深まり、今では作ってみたかったエフェクトをどうすればシェーダーグラフで表現できるかがぼんやりイメージできるほどになりました。
このシェーダーセットを作った方は天才ですね。
徐々にステップアップできるように作られてます。

 

シェーダー初学習での解説だったので分かり難いところもあったかもしれませんが、初学習だからこそつまづく点も解説できたんじゃないかなと思います。
僕と同じようにシェーダー学習が初めての方の助けになれてたら嬉しいです。

 

次からはもっと実践的なシェーダーを学びながら解説をしようと思います。

 

とりあえず基礎編はここまで!
おつかれさまでした!