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

こんにちは。

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

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

今回は「基礎編.㉑」という事で、公式のサンプルシーンにある上の画像の色がグラーデションするシェーダーがどのように作られているかを解説します。

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

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

 シェーダーを開く

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

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

 全体の流れ

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

このシェーダーは、①でどのような遷移でグラデーションするかを設定し、②で必要なGチャンネルの値のみ抽出しています。

ここまでで得た数値を使い、③で2色間でグラデーションする設定を行っています。

この結果、最終的にこのようなシェーダーが完成します。

 重要ノード群の解説

さて、全体の流れを把握した所で、今回のシェーダーで重要な役割を持つノードを詳しく見ていきましょう。 
今回は新出のノードはありませんが、ちょっと理解するのに時間がかかったので解説していきます。

 ① グラデーションの遷移具合を設定

このシェーダーでは、最終的にLerpノードを使って0～1の範囲で線形補完（リニア）のグラデーションをさせたいので、0～1の範囲を持った数値を用意する必要があります。

そこで、ここではUVノードが使用しされています。

UVは、最小値0、最大値1とした2チャンネル分の数値を持っているため選ばれたのだと思います。

ところで、最終結果に表示されている絵をつくるだけなら、①ではUVノードだけで済みます。
ではなぜRotateノードが挟んであるかというと、グラデーションの方向を回転させるためです。

さらにRotateノードのRotationにVectorノードが繋いであるのは、Vectorをプロパティ化してマテリアルからグラデーションの方向を調整できるようにするためです。

 ② 必要なチャンネルのみ抽出

今回は上下にグラデーションする絵を作りたいので、ここでG(UVのV)チャンネルのみを抽出しています。

もし左右にグラデーションさせたい場合はR(UVのU)を選ぶ必要があります。

 ③ 2色間のグラデーションを設定

①②で上下にグラデーションする数値が出来ましたので、これをLerpノードのTポートに繋ぎ、UVのVが0の時はAのカラーを、1の時はBのカラーを使用し、その間を線形補完する絵が完成しました。

 完成！

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

と、ここまででこのシェーダーの解説は終了なのですが、ちょっと気になって調べた事があるので記しておきたいと思います。
解決していない問題なのでこそっと・・・。

～疑問～

LerpノードはAB間で線形補完（リニア）するノードなので、普通にいけばこのようなグラデーションになるんだろうと思っていました。。
（※変化が分かりやいようにグレースケールにしています）

これはPhotoshopで0～255でリニアにグラデーションを描いた状態です。
ところが、今回のシェーダーでカラーを白と黒にすると下図のようになります。

けっこう違いますよね？明るい部分の面積が広いです。

これはなんでかなーと思ってたんですが、よく見たらUVノードに表示されているカラーもちょっとおかしいですね。
Photoshopで0～255でリニアにグラーデションするRGのみの画像を作ってみたら下図のようになります。

でもシェーダーグラフ内のUVノードでは下図のように表示されてます。

んー、おかしい…。
UV座標のUVをRGで色として表示するなら上のPhotoshopで作成した画像になるはず。

なぜならUV座標をノード上に表示すると下図のようになり、UVの座標値の遷移はリニアなはずだからです。

この座標がそのままRG値になるので、UVノード上に表示されているカラーはおかしいはずなんですよね～…。

でもツールの方が間違ってる可能性は低いので僕が何か勘違いしてるのかもしれないです。

と、ここまで長々と疑問に思ってる事を書かせてもらいましたが、結局この疑問は残ったままです。

ググっても出てこなかったし、時間がかかりそうなのでこの件はここまま置いておきます。もし進展があったら追記しますね。

もしこの疑問にご指摘いただける方いましたら教えてください！お願いします！ 

 まとめ

今回は新出のノードはありませんでしたが、グラデーションさせるという新しい手法が登場しました。

色のグラデーションは絵作りには必須の表現ですので、必ず覚えたい手法かと思います。

さて、今回新しく覚えるべきノードはありませんので次へ進みましょう！