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

 

こんにちは。

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

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

今回は「基礎編.⑭」という事で、公式のサンプルシーンにある上の画像のなんかグルッとした図形がどのように作られているかを解説します。

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

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

 シェーダーを開く

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

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

 全体の流れ

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

このシェーダーは、基本的にはRectangle（長方形を作るノード）で図形を作って、Colorノードから出力された緑カラーをMultiplyノードで乗算するというシェーダーです。

新しいのはRectangleのUVに使用しているTwirlノードですね。
これは簡単に言うとUVを渦巻き状に歪めるノードです。

ここで設定した渦巻き状のUVをRectangleノードに繋げる事で、上図のようなグルッとした図形が出来上がります。

このTwirlノードについて、次の重要ノード解説でもう少し詳しく解説していこうと思います。

 重要ノードの解説

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

 ① Twirl

このノードは、前述したようにUVを渦巻き状に歪めるノードです。

「Center」は歪みの中心点を指定します。
「Strength」は歪める強さを指定します。
「Offset」はUVのオフセット値を指定します。 

このシェーダーの設定では、表示領域の中心をゆがみの中心として、10のパワーで渦巻き状に歪めています。

数値を変えるとどのように変化するかを少しだけ説明します。
CenterのYを0.25に変更すると、ゆがみの中心が下に少しずれるのでこのように図形が変化します。

ここからさらにOffsetのYを0.25にすると、図形が下に少しずれて、図形の中心とゆがみの中心がちょうど同じ位置になるので、下図のようにうずまきが少し下にずれた状態になります。

 完成！

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

 まとめ

今回はUVを歪めるという面白いノードが出てきました。
色んな表現につかえそうですね！

今回新しく覚えるべきノードは1つです。

1. TwirlでUVをうずまき状にゆがめる！

この1つを覚えたら次へ進みましょう！