【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.⑪
こんにちは。
シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。
このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
今回は「基礎編.⑪」という事で、公式のサンプルシーンにある上の画像の回転する図形がどのように作られているかを解説します。
まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。
シーンは開けましたか？
それではシェーダーの解説に入ります。
シェーダーを開く
サンプルのシーンを開いたら、「Procedural-UV-AutoRotation」というファイルをダブルクリックして下さい。
するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
全体の流れ
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
このシェーダーで最も重要なノードは⓵Rotateです。
①でUVを回転させて、そのUVを使用して図形を回転させています。
最初のTimeとVerctorノードで時間当たりの回転角度を設定しています。
その後、回転している図形にColorノードから出力された緑カラーをMultiplyノードで乗算して、下記の絵が完成します。
重要ノードの解説
さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。
① Rotate
このノードは、UVを回転させるノードです。
Centerで回転の中心点を指定し、Rotationに入力された回転量で回転させます。
試しに上流にあるVectorノードの数値を上げてみると回転速度が上がると思います。
Centerは、試しに「X:0.5, Y:0」にしてみると、図形が表示エリアの下側を中心に回転すると思います。
このように回転の中心点を自由に変更できます。
ちなみに、Unitで回転角の単位を「Radians」と「Degrees」の2パターンから選べます。
この2つの違いは・・・、「何か回転速度が変わったな」くらいしか分かりませんでした・・・。
詳しい計算式が下記リンク先に書かれていますので、気になる方はそちらをお読みください。
完成！
これで今回のシェーダーは完成です！
まとめ
今回はUVを回転させるというノードが出てきました。
前回の基礎編.⑩でアニメーションの基本は覚えられたと思うので、今回は特別難しい事はなかったかなと思います。
さて、今回新しく覚えるべきノードは1つです。
- Rotateで回す！
この1つを覚えたら次へ進みましょう！
