Shader Graphの超入門レシピ その7～輪郭を明るくする２つの方法～
前回の記事
今回の記事作成の参考とさせていただきました！
今回作成するもの
図のようにSphereの輪郭を光らせバリアっぽいエフェクトを作成します。赤色と青色がありますが２つは異なる方法でシェーダーを作成しています。 非常にシンプルにノードが組める&カッコいいエフェクトを作るのにはうってつけの方法で、リムライト的な表現も作れるようになります。
シーンの中身は単純にスフィアの中に板ポリを置いてるだけです。シェーダーとポストエフェクトでここまで見た目が変わるのはやっぱり面白いですね。
輪郭を明るくする方法１～フレネルエフェクトノードを使用する～
フレネルエフェクトノードを使用すると僅かなノード数で先ほど見たエフェクトを作る事ができます。
フレネルエフェクト = フレネル反射とは入射する角度が平行であればあるほど反射率が高く、垂直なほど反射率が低くなる・・・超ざっくり言うとそのような反射を表現するものです。
ちょうど水面を思い浮かべるとなんとなくイメージできると思います。水面を真上から見ると底まで透き通って見えますが、目線を平行にすると底ではなく周りの背景が水にうつり込むはずです。
(↑京都は嵐山、天龍寺の池です)
実際に作ってみる
マスターノードのSurfaceを「Transparent」に変更しておきましょう。これで完成です。
一点の問題点・・・
非常にシンプルに作れるのですが、実はFresnel Effectは「両面描画を行った際、裏側も計算されてしまう」という細かな問題があります。実際に確認してみましょう。
マスターノードのTwo Sidesにチェックを入れることで両面描画ができます。
すると・・・
裏側も計算されてしまいました。状況によってはハマってしまうかもしれません。
輪郭を明るくする方法２～視線ベクトルと法線ベクトルの内積で計算する～
両面描画の問題を解消するにはこちらの方法を使います。モデルの法線ベクトルと視線ベクトルの内積を計算しその結果をフレネル反射として扱います。自前でライティングの計算をした方には馴染みのある方法ではないかと思います。
View Directionノードはオブジェクトまでの視線ベクトルを取得します。取得する値はそのまま距離が入ってくるので計算するために正規化をしてあげます。
この視線ベクトルと法線ベクトルの内積を計算します。正規化したベクトルの内積は「お互いのベクトルの近似度」を表すので向きが同じ場合1、逆向きの場合-1、垂直に近づくにつれ0となります。
普通に内積を使用してしまうと垂直寄りの方が0となってしまいますが欲しい値のはこの逆（垂直の方が1になってほしい）なので「OneMinusノード」で値を変換しましょう。OneMinusノードは「1 - In」を返すノードです。
というわけでガチャガチャ色々書いてますがこちらの動画の12:30～見た方が多分わかりやすいと思います。
さっそく作ってみましょう。実際のノードグラフがこちら。
この手法なら「Two Sides」にチェックを入れてもおかしいことにはなりません。無事完成です！
ちょっと色々いじってみる
これまでの記事で紹介したUVスクロール + 頂点アニメーションと組み合わせると少し動きのある表現ができるようになります。（ノイズはまだ紹介していませんが・・・
ざっくりと説明すると法線ベクトルにノイズの値を掛け合わせ、その値を頂点の座標に加算しています。
機会があったらこの辺りも紹介できたらと思います。 というわけでここまで！
