【Unity】初めて『シェーダーグラフ』でシェーダーを学んでみる 基礎編.㉞
こんにちは。
シェーダーを一度も触った事のないデザイナーが、Unityの「シェーダーグラフ」を使ってシェーダーを学んでみるシリーズ。
このシリーズでは、公式のサンプルシーンを元に僕がシェーダーグラフで学んだ事を解説していきます。
シェーダー学習初という事もあり、たくさんの方のブログを拝見し、勉強させていただきました。
このシリーズには僕が参考にさせていただいたブログのリンクを貼らせていただいておりますので、そちらも併せて読んでいただくとより一層理解が深まるかと思います。
今回は「基礎編.㉞」という事で、公式のサンプルシーンにある上の画像のグルグルシェーダーがどのように作られているかを解説します。
まずはこちらの記事で紹介したサンプルシーン「Shader Graph Example Library」を開いてください。
シーンは開けましたか？
それではシェーダーの解説に入ります。
シェーダーを開く
サンプルのシーンを開いたら、「Procedural-Pattern-Spiral」というファイルをダブルクリックして下さい。
するとシェーダーグラフのエディターが立ち上がります。
※Propertyにコンバートされていたノードは「Convert To Inline Node」で元に戻してあります。
※各種パラメーター値はマテリアルの値に変更しています。
全体の流れ
個々のノードを見ていく前に、このシェーダーが何をしているのか、全体の流れを軽く把握していきましょう。
このシェーダーは、①でStepノードのEdgeに使う値を、②でStepノードのInに使う渦巻き状の値をそれぞれ作っています。
③のStepノードでそれらを基に渦巻きを黒と緑に二値化し、Replace Colorノードで緑部分を白に置き換えています。
最後にLerpノードで色をのせて今回のシェーダーが完成します。
重要ノード群の解説
さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。
② StepノードのIn入力用の渦巻きの設定
ここでは、TwirlノードのStrengthの値を変更する事で渦巻きの巻き数を変更する事ができます。
Polar CoordinatesノードのUVにTwirlノードを繋ぐ事でプレビュー結果のような緑と黒の渦巻きができますが、どのような計算でこのようになっているかは分かりませんでした・・・。
③ Stepノードで渦巻きカラーを二値化
Polar Coordinatesノードの時点では、渦巻きのエッジが若干ボケていました。
次のReplace Colorノードで緑色部分を白に置き換える予定になっているため、ボケている(RGB値が複数ある)と全ての緑色部分が指定できないので、このStepノードで二値化して緑色のRGB値を1つにしています。
Stepノードの機能について、新たに分かった事があったので解説しておこうと思います。
Stepノードは基礎編.㉓で初めて登場し、以下のように説明しました。
Stepノードは、Inの入力値がEdgeの入力値以上の場合は1を、未満の場合は0を出力するノードです。
この時点では白と黒のモノクロ2階調化するノードだと思っていました。
ところが今回のシェーダーでは黒と緑になっていたのでなんでかなーと思って色々試した結果、モノクロ2階調ではありませんでした。
説明した1と0は、白と黒ではなく、Inに入力された各チャンネルの最小値と最大値だったんです。
よく見たらIn(2)となっていますね。Edgeも(2)になってます。
これはチャンネルが2つ入力されているよーって事を表します。
という事は、このシェーダーでのStepノードはRGの2チャンネルをそれぞれのEdgeのしきい値に基づいて二値化しているという事になります。
文章だけだと分かり難いかもしれませんので、検証に使ったノードで説明していきます。
まず、1チャンネル(R)のみ繋いだStepノードがこちらです。
0.3のしきい値を境に白黒(0, 1)に分かれていますね。
では次に、2チャンネル(RG)繋いだ状態を見てみましょう。
Inポートに2チャンネル繋がれた事で、Edgeポートも2チャンネルの入力ボックスに変わりました。
RGそれぞれのしきい値は1チャンネルの時と同じ「0.3」です。
これにより、Stepノードのプレビュー画面が4色になりました。
プレビュー画面に表示される計算結果のRG値は下図のようになります。
Rチャンネル、Gチャンネルのそれぞれが0か1かをしきい値0.3で切り分けています。
1チャンネルのみだと白黒ですが、RGの2チャンネルになるとこのようにカラーを持つようになります。
以上のように、Stepノードは1チャンネルだけではなく、最大4チャンネルの値をしきい値を境に二値化するノードという事が分かりました。
④ Replace Colorで色を置き換え
このノードは入力された色を別の色に置き換えて出力するノードです。
百聞は一見に如かず。テスト用に用意したデータでモノクロの黒い部分を別の色に置き換えてみましょう。
（ちょっと画面乱れてますがあしからず・・・）
各種パラメーターの説明は以下になります。
- From : 置き換えたい部分の色を指定
- To : 置き換え後の色を指定
- Range : 色を置き換える範囲をFromよりも広げる
- Fuzziness : Fromで指定した範囲の輪郭をボカす
今回のシェーダーでは、Inに入力された緑グルグルの緑部分をFromで指定し、Toに白いカラーを指定して色を置き換えていますね。
完成！
これで今回のシェーダーは完成です！
まとめ
今回のシェーダーも理解するのに苦労しました・・・。
（というか理解できてない部分ある・・・。）
でもStepの気づかなかった仕様と色を置き換える方法を学べたので良かったです。
さて、今回新しく覚えるべきノードは1つです。
- Replace Colorで色を置き換え！
この1つを覚えたら次へ進みましょう！
