春日部つむぎ no ゲーム作ってみよう!【UE5/UE4】 - CustomDepth(カスタム深度)【UE5/UE4】


https://youtu.be/9lOQbQSJlYU?si=OrEbnJS4gsejhzwK

00:00 オープニング
00:29 1.対象のアクタを設定
00:43 2.ポストプロセスボリュームの作成
01:29 3.ポストプロセスマテリアルの作成
01:54 4.ポストプロセスマテリアルの適用
02:17 5.マテリアル表現式の作成
02:24 5-1.SceneDepthとCustomDepthの比較
03:27 5-2.SceneDepthとCustomDepthは何を比較しているのか?
04:50 ちょっと検証!
06:07 5-1.SceneDepthとCustomDepthの比較(続き)
08:04 5-3.CustomDepthと100000000を比較
10:09 6.適用後
10:17 ざっくりまとめ!
10:30 設定ファイル
10:39 エンディング

1.対象のアクタを設定 00:29

オブジェクトの後ろにいる時、色を変えたいアクターを選択します。
詳細パネル>レンダリング設定>[Render CustomDepth Pass]を有効にします。

2.ポストプロセスボリュームの作成 00:43

新しくポストプロセスボリュームを作成します。

[Place Actors(アクタの配置)]タブ > [Visual Effects] > [Post Process Volume]
をドラッグアンドドロップでビューポートに配置します。
名前を「PPV_Depth」にします。

[ポストプロセスボリューム設定] > [Enabled]を有効にします。
[Infinite Extent(Unbound))]を有効にしてレベル全体に適用されるようにします。

今回は明暗順応だけ設定します。
(細かい設定は別動画で)
明暗順応を無効にします。
[Lens] > [Exposure]を展開します。
[Min EV100(最小輝度)]と[Max EV100(最大輝度)]で
両方を有効にして同じ値を設定します。
今回は「1」にします。

3.ポストプロセスマテリアルの作成 01:29

右クリック > [Material(マテリアル)]
名前を「PPM_BackColor」にします。
ファイルを開きます。

[詳細]タブの[Material] > [Material Domain]で[Surface]を[Post Process]に変更します。

[Blendable Location] を [Before Translucency] に変更します。

一旦、保存して閉じます。

4.ポストプロセスマテリアルの適用 01:54

ポストプロセスマテリアルをポストプロセスボリュームに追加します。

ポストプロセスボリュームを選択。
レンダリング機能>ポストプロセスマテリアル>Array
「+」で追加します。
メニューでマテリアルリファレンスを選択します。
「PPM_BackColor」マテリアルを追加します。

5.マテリアル表現式の作成 02:17

準備ができたのでマテリアル表現式を作成します。

5-1.SceneDepthとCustomDepthの比較 02:24

SceneDepthとCustomDepthを比較します。
SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[SceneDepth]を選択します。

ComponentMaskノードを配置します。
緑ベクターをオフにして、赤チャンネルだけにします。

SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[CustomDepth]を選択します。

ComponentMaskノードを配置します。
緑ベクターをオフにして、赤チャンネルだけにします。

Ifノードを配置します。
Ifノードは、[A]ピンと[B]ピンを比較します。
比較結果に基づいて値を返します。

SceneDepth側を[A]ピンにつなぎます。
CustomDepth側を[B]ピンにつなぎます。

Ifノードを[Emissive Color]につなぎます。

SceneDepthがCustomDepthより大きい場合と小さい場合で
オブジェクトの後ろにいるかを判断して、色を変えます。

5-2.SceneDepthとCustomDepthは何を比較しているのか? 03:27

さて、SceneDepthとCustomDepthでは、何を比較しているでしょうか?
それは、プレイヤーのカメラからオブジェクトまでの距離 (cm UE単位) を比較しています。

CustomDepthは、Render CustomDepth Passが有効になっているアクタまでの距離です。
SceneDepthは、表示されている(手前の見えている)アクタまでの距離です。

また、Render CustomDepth Passが無効になっている場合、
CustomDepthのカメラからオブジェクトまでの距離は100000000cm(1000km)だそうです。

ここに、Render CustomDepth Passが有効になっているアクターとそうでないアクターがあります。
例えば、
カメラからアクターまでの距離 がともに800で
手前の立方体の距離は500だとすると、

Render CustomDepth Passが有効になっているアクターのCustom DepthはScene Depthはともに等しく800となります。
Scene Depth=Custom Depth

手前の立方体の距離は500なので、Scene Depthは500です。
Render CustomDepth Passが無効になっているので、100000000です。
また、有効になっているアクターのCustom Depth800よりScene Depthは手前にある分小さい値になります。
Scene Depth < Custom Depth

Render CustomDepth Passが無効になっているアクターの距離は800なので、Scene Depthは800です。
Render CustomDepth Passが無効になっているので、手前の立方体と同様にCustom Depthは100000000です。
Scene Depth < Custom Depth

ちょっと検証! 04:50

ホントに100000000cmなの?

Ifノードを使って、
CustomDepthを100000000を境にして色を変えてみましょう。
CustomDepthの方が大きいの時は、緑色。
CustomDepthと同じ時は、青色。
CustomDepthの方が小さい時は、赤色にします。

色を変えたいアクターをだけ[Render CustomDepth Pass]は有効にしています。

99999992の時、ビューポートが緑色になりました。
CustomDepthの方が大きいということです。
※99999999は設定できませんでした。

100000000の時、ビューポートが青色になりました。
CustomDepthと同じということです。

100000008の時、赤色になりました。
CustomDepthの方が小さいということです。
※100000001〜7は設定できませんでした。

ビューポートが100000000を境にして色が変わりました。
どうやら、
Render 3CustomDepth Passが無効になっている場合、
CustomDepthのカメラからオブジェクトまでの距離は100000000cm(1000km)のようです。

5-1.SceneDepthとCustomDepthの比較(続き) 06:07

ということで、

SceneDepthとCustomDepthを比較して
SceneDepthが大きい場合は、緑色。
SceneDepthと同じ場合は、青色。
SceneDepthの方が小さい場合は、赤色にします。

Render CustomDepth Passが有効になっているアクターは青色で表示され、
Render CustomDepth Passが無効になっているアクターと手前の立方体は赤色で表示されます。

※SkySphereもScene Depth=Custom Depthですね。
さっきCustomDepthを100000000を境にして色が変わっていたし、
Render CustomDepth Passを有効にしていないので、Scene Depthは100000000ということですね。

東京から九州または、北海道ぐらいまでの距離になります。韓国ソウルまでの距離みたいです。

[A==B]の青色をはずすと、
青色の所が緑色になります。
つまり、[A==B]に設定しなければ[A==B]は[A>B]に含まれるようです。(A≧B)

緑色のところは通常の色を表示したいので、

SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[PostOrocessInput0]を選択します。

ComponentMaskノードをつなぎます。
赤青緑ベクターを有効にして、A>BとA==Bピンにつなぎます。

保存します。

緑色の所が通常の色になりました。

5-3.CustomDepthと100000000を比較 08:04

次は赤色の所です。(A<B)

Render CustomDepth Passが有効になっているアクターと
Render CustomDepth Passが無効になっているアクターを区別します。

SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[CustomDepth]を選択します。

ComponentMaskノードを配置します。
緑ベクターをオフにして、赤チャンネルだけにします。

IFノードを配置します。

CustomDepth側を[A]ピンにつなぎます。
[B]ピンには1
1キーを押しながらクリック
または、Sキーを押しながらクリックしてスカラーパラメータをつなぎます。

Default Valueを「100000000」にします。

最初のIfノードのA<Bピンにつなぎます。

CustomDepthが100000000より大きい場合と小さい場合で
Render CustomDepth Passが有効、無効を判断して、色を変えます。

CustomDepthが100000000を比較して
CustomDepthの方が大きい場合は、緑色。
CustomDepthと同じ場合は、青色。
CustomDepthの方が小さい場合は、赤色にします。

Render CustomDepth Passが無効になっている箇所は青色で表示され、
Render CustomDepth Passが有効になっている箇所は赤色で表示されます。

A==Bの青色をはずすと、
青色の所が緑色になります。

緑色のところは通常の色を表示したいので、

SceneTextureノードを配置します。
[Details]タブ > [SceneTexture ID(シーンテクスチャID)]で
[PostOrocessInput0]を選択します。

ComponentMaskノードをつなぎます。
赤青緑ベクターを有効にして、A>BとA==Bピンにつなぎます。

[Color(カラー)]ピンを[Emissive Color]につなぎます。

オブジェクトと重なっている箇所だけ赤色になりましたね。

6.適用後 10:09

ざっくりまとめ! 10:17

設定ファイル 10:30

全体


一つ目のIfノード


二つ目のIfノード