Chapter 44無料公開

🍇 ParticleSystemとの連携(カメラ距離)

かもそば
かもそば
2022.06.02に更新

このチャプターでは、カメラ距離を利用したパーティクル表現を紹介します。

カメラに近づくと薄くなるパーティクル


カメラ距離に応じて色が変わるパーティクル


ソフトパーティクル

カメラ距離を利用するには、View DirecionノードやPositionノードを使用します。

View Direction

View Directionノードを利用すると、カメラからパーティクルへ向かうベクトルを取得できます。
View Directionの長さを計算すると、描画位置までの距離が求まります。

距離の可視化

カメラ距離はカメラを中心とした球状のグラデーションになります。

Position

Position(View Space)を利用することでも、パーティクルへ向かうベクトルを取得することができます。
Position(View Space)のZ成分にはパーティクルの深度情報が含まれます。

深度の可視化

カメラ深度は画面奥に向かう平行に進むグラデーションになります。

比較

View Directionを利用したカメラ距離(右)はカメラを中心とした球状のグラデーションになり、
Positionを利用したカメラ深度(左)は画面奥へ平行に進むグラデーションになります。

次に、カメラ距離やカメラ深度を利用した表現をご紹介します。

表現1: カメラに近づいたら薄くなるパーティクル

カメラからパーティクルまでの距離をアルファとして出力することで、距離に応じた不透明度を設定することができます。
View Directionの長さを取ると、距離を取得できます。



カメラに近づくと透明になる

Smoothstepを利用したフェードについて

Smoothstepを利用することで、フェードの開始位置終了位置を設定することができます。

アルファの最大・最小を調整する

パーティクルのアルファの最大値・最小値を設定したい場合、Lerpを使用します。

アルファの最小0.3, 最大0.8とするようなShaderGraph


遠くのパーティクルはアルファ0.8、近づくとアルファ0.3になる

表現2: カメラから離れたら色を変える

Lerpを利用することで、距離に応じて2色を混ぜることができます。


カメラから離れると色が変わる

表現3: ディザリング透過

ShaderGraphにはディザリング表現を行うためのDitherノードが用意されています。
これを利用することで、距離に応じた網かけ表現を作ることができます。(ディザリング透過)


カメラに近づくと網掛けになる

表現4: ソフトパーティクル

パーティクルが地面と交わった時、パーティクルが地面へ突き刺さっているように見えてしまいます。
ソフトパーティクルというテクニックを使うことにより、
パーティクルの交差部分をアルファフェードさせることができます。


地面との交差部分がフェードする

ソフトパーティクルの原理

ソフトパーティクルの実装には、パーティクル距離と、SceneDepth(画面の深度情報)を利用します。

距離の差分を使う

ここで、SceneDepthとパーティクル距離の差分を計算してみましょう。
地面に近づいたとき、距離の差分は0に近づきます。

この差分をパーティクルのアルファとして設定してあげれば、以下のようにソフトパーティクルになります。

ShaderGraph

以上を踏まえてShaderGraphを実装すると、以下のようになります。

Smoothstepを利用したフェードの調整

Smoothstepではフェードの開始位置・終了位置を調整しています。

その他 : Particle Systemの色の反映

Vertex Colorを利用すると、ParticleSystemの色を取得できます。
Base Colorとして出力すると、パーティクルの色として表示されます。