【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.㉚
こんにちは。
シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。
このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
今回は「基礎編.㉚」という事で、公式のサンプルシーンにある上の画像の放射状に広がる柄のシェーダーがどのように作られているかを解説します。
まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。
シーンは開けましたか？
それではシェーダーの解説に入ります。
シェーダーを開く
サンプルのシーンを開いたら、「Procedural-Pattern-Shatter」というファイルをダブルクリックして下さい。
するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
※RotateノードのRotationの値は0にしてあります。
全体の流れ
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
このシェーダーは、①でUVを回転させ、②でUVを極座標にしています。
③で②から受け取った極座標のUVを繋ぎ、このような画像が完成します。
重要ノード群の解説
さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。
② Polar Coordinates
このノードは、入力されたUVの値を極座標に変換するノードです。
Centerで極座標の中心点を設定できます。
Radial Scaleは中心点から外側に向かう距離の値を、Length Scaleは中心点を基点に回す角度の値をそれぞれ設定できます。
Radial ScaleとLength Scaleがどう影響するかは下図のイメージです。
もう少し具体的に見てみましょう。
まずはRadial Scaleの実例から。
Frequency(1, 0)のCheckerboardノードを用意します。
ここにPolar Coordinatesノードを繋いでみます。
リング状の図形ができましたね。
この状態でPolar CoordinatesノードのRadial Scaleの値を「2」にしてみます。
リングの数が増えました！
これは、「中心点から外側に向かう距離の値」が増えた（プレビュー画面に表示される距離が1から2に増えた）ためにこのようになります。
次はLength Scaleの実例です。
Frequency(0, 1)のCheckerboardノードを用意します。
ここにPolar Coordinatesノードを繋いでみます。
縦に分割されましたね。
この状態でPolar CoordinatesノードのLength Scaleの値を「2」と「5」の2種類を試してみます。
プレビュー画面の中心を起点に縦のスプライト模様が回転し、集中線っぽい形になってきました！
値を極端に増やすと、より集中線ぽくなりますよ。
どうでしょう？
「UVの値を極座標に変換する」とはこういうイメージになります。
今回のように色々試してみるとどういう計算がされてるかが飲み込みやすいと思います。
僕も計算だけで分かり難いところはいろいろ弄りまくってイメージで覚える事が多いです(笑)
③ Checkerboard
このノード自体の機能は既に解説済みですので、今回のシェーダーでの使われ方だけを解説したいと思います。
先ほどの②Polar Coordinatesの項目で解説したように、Length Scaleの値を増やせば今回の最終結果に似た絵が導かれます。
ただし、今回はLength Scaleではなく、CheckerboardノードのFrequencyの値で調整しています。
ここでどのような計算が行われているか見ていきたいと思います。
まずFrequency(0, 8)のCheckerboardノードを用意してみます。
上下に対して白黒が8回繰り返されたボーダーができました。
この状態で極座標にするので下図のようになります。
この状態でPolar CoordinatesのLength Scaleの値を増やしてみると下図のようになります。
計算する個所は違いますが、結果的に似たような事をしていますね。
完成！
これで今回のシェーダーは完成です！
まとめ
今回のシェーダーはちょっと仕組みを理解するのに時間がかかったので詳しく解説してみました。
解説の中で、似たような結果を求めるのに複数のやり方があることも分かりました。
シェーダーは奥が深いですね。
さて、今回新しく覚えるべきノードは1つです。
- Polar Coordinatesで極座標！
この1つを覚えたら次へ進みましょう！
