LoginSignup
16
18

More than 3 years have passed since last update.

@r-ngtm

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

Last updated at Posted at 2019-07-22

はじめに

今回はシェーダーグラフを使用して霧を表現する方法を紹介します。
image.png

霧の色を変えることで夜や砂嵐なども表現できます。

環境

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

シェーダーグラフ作成

今回は以下のシェーダーグラフを作成しました。
image.png

カメラの目の前に置いた板ポリに、上記のシェーダーグラフから作成したマテリアルを適用することで霧がかかったような画面になります。

シェーダーグラフ解説

1. 深度情報(Depthバッファ)の取得

Texture2Dパラメータを定義し、Reference = _CameraDepthTexture と指定するとカメラの深度情報をテクスチャとして取得できるようになります。
image.png

補足 : _CameraDepthTexturesを使用するための準備

_CameraDepthTextureを使用するためにはLWRPのパイプラインアセットにてDepth TextureのチェックをONにする必要があります。
image.png

深度情報のサンプリング

深度情報のテクスチャはScreenPositionを使ってサンプリングして色を取得します。
image.png

2. 深度情報を画面に出してみる

ここで、Sample Texture 2Dの出力をUnlit MasterノードのColorと接続し、深度情報を画面に表示してみます。
image.png

カメラから近いオブジェクトほど白く、遠いオブジェクトほど黒くなっていることが確認できます。
image.png

3. 深度情報をアルファ値として使ってみる

ここで、深度情報をUnlit Masterのアルファ値として使用してみます。
image.png

若干分かりづらいですが、手前にあるオブジェクトが白っぽくなりました。
image.png

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

4. Smoothstepを使って深度情報を加工してみる

Smoothstepを使って深度情報を加工してみます。
image.png

手前にある白色が濃くなりました。
image.png

補足 : smoothstepの出力値について

smoothstepは以下のようなグラフを描きます。
・入力値xが0~0.1で値0~1を出力
・入力値xが0.1より大きい部分では常に1を出力
image.png

5. 深度情報を0~1反転させてみる

OneMinusノードを使って深度情報の0-1を反転させてみます。
image.png

霧のような見た目になりました。
image.png

6. Smoothstepのパラメータを変えてみる(完成)

これまではSmoothstepのパラメータとして、Edge1 = 0, Edge2 = 0.1を入力していましたが、
Edge1 = 0.02, Edge2 = 0.05 としてみます。
image.png

霧の濃淡の変化がシャープになりました。
image.png

smoothstepは以下のようなカーブを描いています。
image.png

7. 色を変えてみる

Unlit MasterノードのColorに黒をすると夜っぽい雰囲気になります。
image.png
image.png

茶色にすると砂嵐っぽくなります。
image.png

image.png

8. 色を薄くする

アルファ値に入力している深度情報に1より小さい数値を乗算すると、霧が薄くなります。
image.png

image.png

9. 色をパラメータ化する

実際に利用する場合、霧の色はプロパティとして定義しておいたほうが良いでしょう。
image.png

preview.gif

使用アセット

Mega Fantasy Props Pack
https://assetstore.unity.com/packages/3d/environments/fantasy/mega-fantasy-props-pack-87811

16
18
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
16
18