【ShaderGraph】デプスバッファを利用した霧の表現

## はじめに
今回はシェーダーグラフを使用して霧を表現する方法を紹介します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/df3cada8-828a-5887-4c8e-42acc2826e34.png)

霧の色を変えることで夜や砂嵐なども表現できます。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/d2d870ff-c654-d7f7-5bd6-694f06498eac.png" width = 320>  <img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/5fe145dc-68d7-6178-5106-ef4a04c4018a.png" width = 320>

## 環境
Unity2018.3.11f1
Lightweight RP - Version 4.1.0(Preview)

## シェーダーグラフ作成
今回は以下のシェーダーグラフを作成しました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/78d8eb6e-09fd-05a7-4b7a-ab0f07468b86.png)

カメラの目の前に置いた板ポリに、上記のシェーダーグラフから作成したマテリアルを適用することで霧がかかったような画面になります。
<img src = "https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/7d46bf74-dcc9-a828-87f8-77e9121382c2.png" width = 400> 

## シェーダーグラフ解説
### 1. 深度情報(Depthバッファ)の取得
Texture2Dパラメータを定義し、Reference = `_CameraDepthTexture` と指定するとカメラの深度情報をテクスチャとして取得できるようになります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/709294f7-31ba-3b1e-967e-209f27fab1f4.png)

#### 補足 : _CameraDepthTexturesを使用するための準備
`_CameraDepthTexture`を使用するためにはLWRPのパイプラインアセットにてDepth TextureのチェックをONにする必要があります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/026f16a7-c245-35c4-c65a-647bae36de4f.png)

#### 深度情報のサンプリング


深度情報のテクスチャはScreenPositionを使ってサンプリングして色を取得します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/eae0c879-ed35-82d0-3c3f-37319ce7e471.png)

### 2. 深度情報を画面に出してみる
ここで、Sample Texture 2Dの出力をUnlit MasterノードのColorと接続し、深度情報を画面に表示してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/9db9e304-466e-ab68-20b2-058550ccc916.png)

カメラから近いオブジェクトほど白く、遠いオブジェクトほど黒くなっていることが確認できます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/33aac1fb-85c1-9e1b-0a8b-b13eb10955a8.png)

### 3. 深度情報をアルファ値として使ってみる
ここで、深度情報をUnlit Masterのアルファ値として使用してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b78795f6-767a-5076-ce58-3aea03f37365.png)

若干分かりづらいですが、手前にあるオブジェクトが白っぽくなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/5c8fcca6-af13-bb7d-732b-29bccfb3674a.png)

深度情報をアルファ値として利用しながら白色が半透明描画されているため、このような見た目になっています。

### 4. Smoothstepを使って深度情報を加工してみる
Smoothstepを使って深度情報を加工してみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b0449eff-a15d-a731-ed3b-924a0515ba9a.png)

手前にある白色が濃くなりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/1aa80049-be65-b5bb-36d8-2d842cc6e825.png)

#### 補足 : smoothstepの出力値について
smoothstepは以下のようなグラフを描きます。
・入力値xが0~0.1で値0~1を出力
・入力値xが0.1より大きい部分では常に1を出力
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/6515cff6-bbc9-641a-48da-381489e521ea.png)

### 5. 深度情報を0~1反転させてみる
OneMinusノードを使って深度情報の0-1を反転させてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/b704462f-6156-b18d-febf-aecca2851c5f.png)

霧のような見た目になりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/f096dc97-e416-6894-e880-838bde657dc1.png)

### 6. Smoothstepのパラメータを変えてみる(完成)
これまではSmoothstepのパラメータとして、Edge1 = 0, Edge2 = 0.1を入力していましたが、
Edge1 = 0.02, Edge2 = 0.05 としてみます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/11a62bce-4243-99fe-d11e-d145be4bf404.png)

霧の濃淡の変化がシャープになりました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/9dd04de0-51e8-acd6-d8f5-9227682821c6.png)

smoothstepは以下のようなカーブを描いています。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/0aaf40b6-1775-5291-be9e-71419f295c51.png)

### 7. 色を変えてみる
Unlit MasterノードのColorに黒をすると夜っぽい雰囲気になります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/77a09a0d-1c49-c9d3-1c5a-2aee4f2f0bf0.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/d2d870ff-c654-d7f7-5bd6-694f06498eac.png)

茶色にすると砂嵐っぽくなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/a999a80f-ea23-2868-115f-3d622d78847d.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/5fe145dc-68d7-6178-5106-ef4a04c4018a.png)

### 8. 色を薄くする
アルファ値に入力している深度情報に1より小さい数値を乗算すると、霧が薄くなります。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/e4f2b199-10f2-0f68-fc31-dcfa553c7aa4.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/f5c4dfaa-0a72-07cc-08b2-a297bf5cd54c.png)

### 9. 色をパラメータ化する
実際に利用する場合、霧の色はプロパティとして定義しておいたほうが良いでしょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/529524f6-321c-46a9-7daf-0f6743ad0677.png)

![preview.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/44288/147f65b2-8236-c408-c0f1-ec83a4de3b12.gif)

## 使用アセット
Mega Fantasy Props Pack
https://assetstore.unity.com/packages/3d/environments/fantasy/mega-fantasy-props-pack-87811