【Unity】Unity の色々な Fog について

本記事は Unity #2 Advent Calendar 2020 18 日目の記事です。

【17 日】『[【Unityネタ】Unityでスコープや監視カメラを作る](https://raspberly.hateblo.jp/entry/UnityAdventCalendar2020_17)』（[@Raspberly](https://qiita.com/Raspberly) さん）
【18 日】本記事
【19 日】『[【Unity(C#),Bolt】Boltでタイマーの実装](https://qiita.com/OKsaiyowa/items/1c52f0720aba4e25019b)』（[@OKsaiyowa](https://qiita.com/OKsaiyowa) さん）

# はじめに

Unity の 3D 空間において **Fog**（霧表現）は遠近感を出したり世界の端を隠したりするために重要です。
はい知っています Lighting ウインドウから付けられるんですよねぽちっとな。
あれ、なんか思ってたのと違う…。

ということで今回は Unity の Fog について、無料で使える範囲で調べたので共有します。
あまりキレイにまとまっていなくて申し訳ないですが何かの参考になれば幸いです。

なお、添付の画像は効果を分かりやすくするため、Unity ユーザーの皆様が大好きな**マゼンタカラー**にてお送りいたします。（色を付けられる Fog に限ります。）

# 環境

Unity 2019.4.15f1

# Fog

![fog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/9d5156a9-ec87-41ef-6299-2d1b81de076f.png)

まずは Unity にもともと用意されている Fog です。**別途何かを用意する必要はなく**、簡単に使うことができます。
かつては Post Processing Stack にあったらしいですが、いつからか Lighting ウインドウで設定するようになりました。
Skybox には適用されないので注意です。うまく Skybox に馴染むよう、色の調整が必須かと思います。

## 使用方法

1. メニューから「Window」→「Rendering」→「Lighting Settings」を選択して Lighting ウインドウを開きます。
1. Scene タブ Other Settings の項目の中に「Fog」があるのでチェックを入れます。各パラメータについては[マニュアル](https://docs.unity3d.com/Manual/lighting-window.html)を参照ください。

![fog_parameter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/a679ffc3-d9ea-ecc0-cb1e-12955d2656f2.png)


# Deferred Fog

![deferredfog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/0259a449-3d11-2ed0-3472-067101256e3a.png)

Post Processing（Post Processing Stack v2）のエフェクトの１つとして扱われている Fog。
その名の通りレンダリングパスが Deferred でないと使えませんが、**Skybox 含めてかけることができます**。

## 使用方法
※前提として、[Post Processing](https://docs.unity3d.com/Packages/com.unity.postprocessing@3.0/manual/index.html) が必要です。

1. Post Processing を導入、セットアップします。（[こちらの記事](https://ekulabo.com/post-processing)などが参考になります。）
1. （まだ付けていなければ）Camera に Post-process Layer コンポーネントを付けます。
1. Camera の Rendering Path を Deferred にします。
![deferredfog_camera.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/71f795a7-b10f-1ff8-1609-1722daa73598.png)

1. Post-process Layer に Deferred Fog の項目が現れるので Enabled にチェックを入れます。
また、Exclude Skybox のチェックを外せば Skybox にも適用されるようになります。
![deferredfog_pplayer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/e6791c7c-c37e-2cdf-6909-0aa67d4378b8.png)

基本パラメータはデフォルトの Fog に準拠しており、Lighting ウインドウの設定が反映されます。詳しくは[マニュアル](https://docs.unity3d.com/Packages/com.unity.postprocessing@2.1/manual/Deferred-Fog.html)を参照ください。
なお、Exclude Skybox のチェックを外す場合、**かなり弱めに調整しないと Skybox が見えなくなるレベル**で効きます。逆に言えば、空が見えないくらいの深い霧や暗闇などの表現に向くのかも。




# Ultra Skybox Fog

![ultraskyboxfog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/8abf71d6-6d96-ce6b-f354-29eb7140fc36.png)

オブジェクトに対してではなく、**Skybox に Fog をかける**無料のシェーダーアセットです。上で紹介したデフォルトの Fog など、別途オブジェクトにかかる Fog と合わせて使うことを想定しているようです。
また、疑似的なミー散乱効果も使えます。（なおよく分かっていない模様）

## 使用方法
1. [Asset Store の該当ページ](https://assetstore.unity.com/packages/vfx/shaders/ultra-skybox-fog-115414)からダウンロード・インポートします。
1. 「Galactic Studios/Ultra Skybox Fog」のシェーダーで Material を作成します。
![ultraskyboxfog_parameter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/003ad937-974a-8a0d-ac3a-b82732a45ff6.png)

1. 作成した Material を Skybox として設定します。 
![ultraskyboxfog_set.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/3a21b8f6-c2d8-d791-9f7c-1b80f6826638.png)

パラメータについては Cubemap (HDR) までは通常の Skybox 向けシェーダーと同じで、それより下は次のような意味みたいです。


| パラメータ | 意味 |
| ---- | ---- |
| Fog Colour | Fog の色 |
| Fog Begin | 薄くなり始める位置（高さ方向） |
| Fog End | 消える位置（高さ方向） |
| Fog Density | 濃さ |
| Mie Intensity | ミー散乱の強さ |
| Mie Tint | ミー散乱の色合い |
| Mie Size | ミー散乱の大きさ |
| Sun Direction | ミー散乱に使う太陽の方向 |
| Apply Fog To The Bottom Of The Sky? | Skybox の下全体まで適用するか（次の画像参照） |

![ultraskyboxfog_applyfogtothebottomofthesky.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/10ceb18d-ecbb-2e10-a299-046d6ee65cf0.png)


# Global Fog

![globalfog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/275a8504-dcd9-c0b1-0d73-a8fe5149791d.png)

かつて StandardAssets に含まれていた Fog で、**高さに応じた Fog**（Height Fog）があるのが特徴です。…が、ImageEffects の消滅とともになくなってしまったようです。
[Asset Store からも撤退しており](https://assetstore.unity.com/packages/essentials/legacy-image-effects-83913)、残念ながら**現在では普通に入手することはできません**。

一応 Unity のアーカイブを漁れば見つかりますが少し古めなので、参考用とか自身で改造するとかでなければ、積極的には使わない方がいいのかもしれません。

## 使用方法

1. [Unity ダウンロード アーカイブ](https://unity3d.com/jp/get-unity/download/archive)からダウンロードして入手します。
おそらく Unity 5.5.6 辺りのものが現在入手可能な最終版ではないかと思います。
![global_fog_dl.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/b40d5822-f1d1-cee0-a328-70e26a08d7bd.png)

1. ダウンロードした exe ファイルを実行してインストールします。
1. インストール時に指定したフォルダに Standard Assets というフォルダができ、その中に「Effects.unitypackage」があるのでそれをエディタにインポートします。Global Fog として必要なものは下記だけです。
    - Effects\ImageEffects\Scripts\GlobalFog.cs
    - Effects\ImageEffects\Scripts\PostEffectsBase.cs
    - Effects\ImageEffects\Shaders\GlobalFog.shader
1. Camera に「Image Effects > Rendering > Global Fog」コンポーネントを付与します。
![globalfog_parameter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/8aa58116-021e-3216-fdcf-893d5f97bc2b.png)

基本パラメータはデフォルトの Fog に準拠で Lighting ウインドウの設定が反映されます。
インスペクタに表示されるパラメータは[マニュアル](https://docs.unity3d.com/550/Documentation/Manual/script-GlobalFog.html)参照…としたかったのですが、なんかパラメータが違うんですよね。
触ってみた感じとツールチップ表示から、下記の意味だと思います。

| パラメータ | 意味 |
| ---- | ---- |
| Distance Fog | 距離による Fog を適用 |
| Exclude Far Pixels | 遠方（Skybox or クリアカラー）への適用を除くか |
| Use Radial Distance | カメラからの放射距離を使うか |
| Height Fog | 高さによる Fog を適用 |
| Height | 高さ Fog の高さ（Y 値） |
| Height Density | 高さ Fog の濃さ |
| Start Distance | Fog 効果を開始する距離 |

## 余談

ちょっと話は逸れますが、高さ Fog っぽいのを[すごく簡単な方法で実現している人がいた](https://qastack.jp/gamedev/143382/how-can-i-create-a-height-based-volumetric-fog)ので紹介しておきます。
こういう Material の Plane を作って置いたらそれっぽいよというお話。…なるほどぉ。
![digression.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/327f4b28-ce62-1d35-cd9f-90a38e2fdfbd.png)



# KinoFog

![kinofog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/5a800287-a1e1-1692-4a59-48079204436c.png)

ユニティ・テクノロジーズ・ジャパンの Keijiro Takahashi 氏が公開されている Fog。
**Skybox にフェードする**機能をもっており、色を調整せずとも自然な遠景を得られるという特長があります。
プロジェクトのバージョンが 5.1.1p2 と古めなのが気になるかもしれませんが、当環境で問題なく動作しました。
たまに**シェーダプロパティの関係でフェードできない Skybox がある**のでその点は注意です。エラーが出ます。その場合は Skybox のシェーダーを変えてみるなどしてみましょう。
![kino_fog_unappliable.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/f2fa034c-bfcc-485c-eff8-01ea19c693d5.png)


## 使用方法

1. [GitHub の該当ページ](https://github.com/keijiro/KinoFog)にアクセスし、 「KinoFog.unitypackage」をダウンロードして入手します。
1. ダウンロードした unitypackage をエディタにインポートします。
1. Camera に「Kino Image Effects > Fog」コンポーネントを付与します。
![kinofog_parameter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/11f1168a-7de3-2483-13b8-2efcb67f2095.png)

触ってみた感じ、パラメータは下記の意味でいいかと思います。

| パラメータ | 意味 |
| ---- | ---- |
| Start Distance | Fog 効果を開始する距離 |
| Use Radial Distance | カメラからの放射距離を使うか |
| Fade To Skybox | Fog 効果を Skybox にフェードさせるか |



# URP（Universal Render Pipeline）の Fog

![urp_fog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/60cb47bf-c826-39c3-8b8a-5d4b18a08e65.png)

URP はデフォルトのレンダリングパイプライン（ビルトインレンダリングパイプライン）と異なり、Post Processing を内包しています。
ですが Fog の使い方がほぼ変わらないように作られているようで、同じ感覚で使えます。
…ので使用方法は割愛します。
![urp_fog_parameter.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/dc12149a-9c36-f5ca-9fb3-8021360f3287.png)


# HDRP（High Definition Render Pipeline）の Fog

![hdrp_fog.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/483690/2b2852e8-74a6-f4e6-363b-4d43b154dc06.png)

最近 preview が外れた HDRP ですが、独自の Fog をもっています。
特に高品質のグラフィックスをターゲットにしているということもあって、最初から**ボリューメトリックな Fog** を合わせて使うことができます。
ただ、HDRP はサポートされている[**プラットフォームが限られている**](https://docs.unity3d.com/Packages/com.unity.render-pipelines.high-definition@8.2/manual/System-Requirements.html)ので注意です。


では使用方法を…と思いましたが、筆者は完全なる HDRP エアプということに加え、HDRP において Fog だけにフォーカスしてもあまり意味ないんじゃないかと感じたので割愛します。
というのも、調べるほど HDRP における Fog はライティングの一要素に過ぎないように思え、
HDRP での絵作りフロー全体の中で語るべきことなのかな…と。（という名の力尽き）


# おわりに
お疲れ様でした。読んでくださった方ありがとうございます。
その他、紹介はできませんが、有料のものも選択肢に入るという場合は、Asset Store で Fog で検索するとたくさん出てきますので、検討してみるのもいいと思います。
それではよい Fog ライフを！