【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.㊱
こんにちは。
シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。
このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
今回は「基礎編.㊱」という事で、公式のサンプルシーンにある上の画像のチェッカー柄に魚眼レンズのような効果を加えるシェーダーがどのように作られているかを解説します。
まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。
シーンは開けましたか？
それではシェーダーの解説に入ります。
シェーダーを開く
サンプルのシーンを開いたら、「Procedural-Pattern-FishEye」というファイルをダブルクリックして下さい。
するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
※各種パラメーター値はマテリアルの値に変更しています。
全体の流れ
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
このシェーダーは、①で+U方向にアニメーションする値を出力し、②でUVに魚眼レンズの効果＆+U方向にアニメーションを加えています。
ここまで出来たUVを③に使って、チェッカー柄が魚眼レンズのように歪みつつ、横方向に動くシェーダーができます。
最後にLerpノードで色を加えて今回のシェーダーが完成します。
重要ノード群の解説
さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。
② Spherize
このノードは、UVに魚眼レンズのような歪み効果を与えるノードです。
各パラメーターの機能はこちら。
- UV : 歪み効果を加えたいUVを入力
- Center : 歪みの中心座標を指定
- Strength : 歪めるパワーを指定
- Offset : U方向、V方向へのオフセット値を指定
③ チェッカー柄を歪ませる
ちょっとだけ理解に躓いたので、どうやってこのような効果になるか流れを解説していきます。
まず、Checkerboardノード単体だけだと下図の見た目になります。
ここに、オフセットアニメーションのかかっていないSpherizeノードをつなぐと歪み効果だけ加わります。
ここにさらにUVのオフセットアニメーションを加えると今回のシェーダーでの結果と同じになります。
完成！
これで今回のシェーダーは完成です！
まとめ
今回は魚眼レンズのように歪ませるノードが新出しました。
なかなか面白いシェーダーが出来そうですね。
さて、今回新しく覚えるべきノードは1つです。
- Spherizeで魚眼レンズのように歪ませる！
この1つを覚えたら次へ進みましょう！
