UnityのOrthographicでもShaderGraphでVertical Fogを作りたい

どうもnattuhanです。

皆さんVertical（Height） Fogというものををご存知でしょうか？下の方にガスがたまっているような表現をすることで、空間の広がりや、幻想的な雰囲気を演出してあげることができます。Monument Valleyという有名なゲームでもこういった表現がよく使われているのを見ることができます。

こういった表現はUnity Asset Storeでそれ用のアセットを購入することでも実現可能ですが、Shader Graphを使える環境さえあれば、だれでも簡単にこの表現ができます。

今回カメラの投影法によって作り分けていくのですが、Perspective（透視投影）とOrthographic（正投影）の順に作っていってみましょう。（ShaderGraphのインポートや基本的な使い方などは割愛させていただきます。）

Orthographicで作ることが決まってるぞ、って方も、上から順に追って読んでいただけると助かります。

シーンのセッティング

まずは共通の作業工程としてシーンに簡単なキューブを配置していきましょう。縦に長～いCubeをざっと並べて、そしたら大きめのPlaneを配置します。地面に置いてあるように見えますが、Y軸の位置はCubeもPlaneも同じなため下半分が見えていない状態になっています。

カメラの位置も適当なところに配置したら、これで準備は完了です。

Perspective（透視投影）

CreateからUnlitGraphを作成します。作成したShaderGraphを開き、マスターノードの設定を開いてSurfaceを"Opaque"から"Transparent"に変更します。これで半透明な描画が可能になりました。

次に、下の画像の通りノードを出し、マスターノードのAlphaにつないでみましょう。

ノードを出し終えたら、SaveAssetを忘れずに押したのち、そのShaderGraphをもとにマテリアルを作成してPlaneにアタッチしてゲームビュー側で確認してみてください。

たぶんこんな感じになると思います。次にあなたが思うのは

”この霧のかかる深さと、霧の色を変更してえなあ～～～～”

だと思うので、さっそくShaderGraphに手を加えてマテリアル側から変更できるようにしてあげましょう。ShaderGraphに戻り、ノードを追加してつなぎ直します。ノードを新たに出した部分はグループで囲ってみました。

左上のBlackboardで色（Color）と深さ（Vector1）のプロパティを定義しています。深さはスライダーにしておくとインスペクターで調整がしやすいでしょう。

マテリアル側の設定はこんな感じ。Colorのアルファのデフォルト値が0なので気をつけましょう。

これで色と深さを自由に変えることができるVerticalFogを表現することができました。

これで一件落着。じゃあカメラのモードをOrthographicに切り替えるだけで、MonumentValleyみたいな見た目が作れますね。

あれ？？？？？？霧どこいった？？？？？？？？？？？？

これは困りました。いくらマテリアル側の値を変更しても変わるのは色だけ。やっぱり僕たちにOrthographicの素敵な見た目のゲームを作ることはできなかったのでしょうか…

Orthographic（正投影）

先ほどまでのShaderGraphの状態を見返してみましょう。少し整理するためにも左側の部分をグループ化してみます。（Perspectiveという名を付けた箇所）

こいつを工事してあげる必要があります。グループ化しておいたやつはいったん脇に置いておいて、新しくノードを出していき以下のように組み替えます。

左下にCustomFunctionノードがありますが、画像の通りに設定します。

Body部分には下の文を貼り付けてください。

Out = float2(
UNITY_NEAR_CLIP_VALUE,
UNITY_RAW_FAR_CLIP_VALUE
);

全体図はこうなりました。

これでSaveAssetして、ゲームビューで結果を確認してみましょう。

できました！

それでは素敵なOrthographicライフを！

この記事はCyanさんの以下の記事を参考に書かれています。なぜこういう組み方が必要なのか、理由などがこちらに書いてあるため、詳しく知りたい方はこちらを参照ください。

Orthographic Depth