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

こんにちは。

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

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

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

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

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

 シェーダーを開く

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

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

 全体の流れ

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

このシェーダーは、①で極座標UVをアニメーションさせ、グルグルが内側に移動する動きを作っています。

②ではChecerboardノードのリングの数を調整する用のRGチャンネルを作っています。

③のCheckerboardノードでそれらを合成し、最終的にこのようなシェーダーが完成します。

 重要ノード群の解説

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

 ① 極座標UVのアニメーション

このノード群では、極座標UVをTilling And Offsetノードでオフセットアニメーションをかけています。

ちょっと理解に躓いたので解説してきます。

まず、計算の流れを把握するためにPolar Coordinatesノードを外してみます。
すると下図のようになります。

Combineノードで「Rチャンネルがアニメーション、Gチャンネルが0」の数値をTilling And OffsetのOffsetに繋いでいるので、このように横方向に対してアニメーションするようになります。

次に、Checkerboardノードに極座標UVを繋いだ時の流れを確認してみます。
下図は極座標UVを繋いでいない場合。

下図は極座標UVを繋いだ場合。

これらを踏まえて、Tilling And OffsetノードのUVを極座標にしてみるとこうなります。

Polar CoordinatesノードのRadial Scaleが、Tilling And Offsetノードにつなぐ事でオフセットアニメーションされるためにこのような動きになるわけです。

 完成！

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

 まとめ

今回も新出ノードはありませんでしたが、ちょっと各ノード群での計算が分かり難い部分がありました。

今回解説した流れで僕はおおかた理解できたのですがみなさんはいかがでしょうか。

理解できたら次へ進みましょう！