【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.⑯
こんにちは。
シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。
このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
今回は「基礎編.⑯」という事で、公式のサンプルシーンにある上の画像の円が変形しながら左右にアニメーションするシェーダーがどのように作られているかを解説します。
まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。
シーンは開けましたか？
それではシェーダーの解説に入ります。
シェーダーを開く
サンプルのシーンを開いたら、「Procedural-UV-SpherizedPingPong」というファイルをダブルクリックして下さい。
するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
全体の流れ
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
このシェーダーは、①②③で左右に動くUVアニメーションを作り、④でそのアニメー図形を歪める設定をしています。
そうして出来た値をEllipseノードのUVに使用する事で、左右に動きがら円が歪む動きが完成します。
最後に、Colorノードから出力された緑色をMultiplyノードで乗算して今回のシェーダーが完成します。
重要ノード群の解説
さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。
① 左右への振れ幅(最小値と最大値)を設定するノード群
このノード群では、図形が左右に動く振れ幅を設定しています。
次につなげる③のLerpノードは、A入力値を最小値、B入力値を最大値として、T入力値0～1の範囲で値を線形補完するノードです。
詳しくは こちらの記事のLerpの項目を参照。
Negateノードは入力された値の＋－を反転するノードです。
Negateノードから出力した値をLerpノードのA入力、Sliderノードから出力した値をLerpノードのB入力に繋いでいるので、最小値:－0.99、最大値:0.99という設定になります。
Sliderノードは、マテリアルから数値を変更する時にスライドバーで直感的に変更しやすくするために使っているので、直接数値入力で構わない時はVector1ノードでも代用できます。
② アニメーションのカーブを設定するノード群
このノード群では、図形の動きを決めるアニメーションカーブを設定しています。
シェーダー内でアニメーションさせるのに必要なTimeノードと、アニメーション速度の倍率を決めるVector1ノードをMultiplyノードで合成し、それをSineノードに繋ぐ事で、サインカーブの反復速度をVector1ノードで調整できるようにしています。
Remapノードでサインカーブの最小値と最大値を「－1～1」→「0～1」に置き換えてもいますね。
ここで作られたアニメーションカーブは下図のようになります。
Vector1ノードでこのカーブの周期に倍率をかける事で、アニメーション速度を速めたり遅めたり出来ます。
③ ①と②を合成したアニメーションをUVのUにだけ適用するノード群
このノード群では、まずLerpノードでアニメーションカーブが0の時に－0.99、1の時に0.99となるように合成しています。
ここから出力された値をCombineノードのRにだけつなぎ、Gを0のままにしてRG(2)から出力する事で、UVのUだけにアニメーションを適用する設定をしています。
④ Spherizeノード
このノードは、簡単に言うと魚眼レンズのような効果をUVに適用するノードです。
今回のシェーダーは、ただ円が左右に移動しているだけでなく、中心から離れるにつれ円が歪んでいきます。
この歪みの効果をこのノードで設定しているのです。
試しにStrengthに繋がっているVector1ノードの値を0にすると、歪みがなくなり、普通の円が左右に移動するだけになります。
このノードでは3つの項目を設定する事で、どのように歪み効果を与えるかを調整する事ができます。
Centerで歪みの中心座標を指定します。
Strengthで歪みの強度を指定します。
OffsetでUVのオフセット値を指定します。
完成！
これで今回のシェーダーは完成です！
まとめ
今回はUVを魚眼レンズのように歪めるというノードが出てきました。
ふと思いましたけど、アニメーションのノードの組み方はずっと同じような組み合わせですね。
そろそろ新しい組み合わせが出てくるんでしょうか？
アニメーションは数学的な考えが必要になるのでちょっと苦手です・・・。
さて、今回新しく覚えるべきノードは1つです。
- SpherizeでUVを魚眼レンズのように歪める！
この1つを覚えたら次へ進みましょう！
