Deferred Decalsを使い、Overwatchのようなビルの角の制作方法

今回、Deferred Decal(ディファードデカール)のことを軽く紹介し、それを使ってOverwatchのようなビルの角の制作方法を紹介したいと思います。

この記事が、Unreal EngineやUnity、両方のエンジンユーザーに役立つよう、実際の例にはUnreal EngineとUnityを使用しています。

まず、Overwatchで使われているビルの角の分析から始めましょう。

Overwatchのビルの角について

ビルの角は、Overwatchスタイルの重要な部分です。 ゲームの中にビルの角は2種類あります。

  • 柔らかく見える角(新築ビル、一般的なビル)
  • 破損した角(古いビル、遺跡)

Deferred Decalとは

Deferred Decalとは、レンダリングが後段まで遅延されるデカールです。ディファードデカールの技術では、シーンのレンダリングを複数のパスに分割し、1 つのパスをデカールの処理専用にします。ディファードデカールのパスは、シーン内の他のオブジェクトをレンダリングした後、ポスト エフェクトが適用される前に発生します。

ディファードデカールの技術を使用すると、影響を与えたいレンダリングのパースだけを変更できます。Overwatchのようなビルの角を制作したい場合は、ビルの角の鋭さを隠すために、ワールドスペースノーマルのパスのみを変更するだけで十分です。ワールドスペースノーマルのパスのみに影響を与えるデカールは、様々なマテリアルで作られた壁に利用できることができ便利です。

ただし、必要な場合は、デカールのシェーダーの設定によって、ラフネスのパス、色のパスなどにも影響を与えることができます。

柔らかく見える角用のデカール制作

モデルやテクスチャの制作

壁やデカールのモデルを制作します。

重要:各角のデカールの頂点法線は、同じ方向へ向けるように頂点法線を調整する必要があります。

頂点法線の調整方法の一つに、アトリビュートの転送があります。(メッシュ > アトリビュートの転送)
このアトリビュートの転送を使うなら、ワークフローは下記のアニメーションのようになります。

アトリビュートの転送の設定は下記になります。

モデルのUV展開や利用するテクスチャは下記のようになります。

壁のテクスチャはSubstance Designerで制作されていますが、デカールのマスクテクスチャはPhotoshopで手で描いています。マスクテクスチャを自然な形にするために、指先ツール(Smudge Tool)を使うことをおすすめします。(アルファは四角い、強さは50~70%)

指先ツールの使い方は下記のようになります。

Unreal Engine

Unreal Engineは、ディフォルトでディファードのレンダリングが使われていますので、エンジンの中では何も設定せず、すぐにデカールの設定を行いましょう。

Unreal Engineでのデカールのマテリアル設定

マスクのテクスチャ設定で圧縮設定をMasks (no sRGB)にします。

マテリアルの設定は下記になります。

  • Material Domain: Deferred Decal
  • Blend Mode: Translucent
  • Cast Ray Traces Shadows: OFF

マテリアルのグラフは下記になります。

デカールのマテリアルはこれで以上となります。結果は、下記になります。

Unity

Unityは、ディフォルトでフォワードのレンダリングが使われていますので、ディファードデカールを使えるように、まずプロジェクトを設定しなければなりません。

Unityでのディファードシェーディングのレンダリングパスの設定

プロジェクトの設定のウィンドウを開きます。(Edit → Project Settings)
Scriptable Renderer Settingsで設定されている、レンダリング設定のファイル名を確認します。

プロジェクトでURPが使われている際、通常Assets/Settings/URP-HighFidelity.assetというファイルはレンダリングの設定のファイルとして、ディフォルトで使われています。そのファイルを選択したら、Renderer Listで設定されているファイルを確認します。いつも、それは同じフォルダにあるURP-HighFidelity-Renderer.assetというファイルです。

URP-HighFidelity-Renderer.assetのファイルを選択したら、設定を下記にしましょう:

  • Rendering Path: Deferredにします
  • Renderer Features: Decal(チェックを付けます)

Renderer Featuresのリストの中でDecalというタブが無ければ、一番下にあるAdd Renderer Featureのボタンを押してDecalを選択してください。

プロジェクトの設定は以上となります。これでディファードデカールが使えるようになります。

Unityでのデカールのマテリアル設定

マスクのテクスチャの設定でsRGBのチェックを外してください。

デカールのシェーダーを作るために、Create→Shader Graph→URP→Decal Shader Graphを選択してください。

Graph InspectorのウィンドウのGraph Settingsのタブでシェーダーを下記の設定にしましょう。

  • Material: Decal
  • Affect Normal(チェックを付けます)
  • Blend(チェックを付けます)
  • 他のチェックを外します

先に制作したマスクテクスチャをNormal Alphaに繋げます。マテリアルのグラフは下記になります。

デカールのマテリアルはこれで以上となります。結果は、下記になります。

破損した角用のデカールの制作

そのデカールを制作するために、ノーマルマップが必要です。
ノーマルマップをベイクするために、ZBrushでハイポリモデルを作りましょう。

ハイポリモデリング

私の経験によると、ZBrushで角をスカルプトするときにWarp Modeをうまく使えません。そのため、角をスカルプトをする時はタイリングを特に気にせず、ノーマルマップをベイクした後でSubstance Designer、またはPhotoshopを使ってノーマルマップをシームレスにします。

  • 石で作られた面をスカルプトする時は、四角いアルファが付いているTrimSmoothBorderというブラシを使うことをお勧めします。そのブラシは、Maxon ZBrush 2023\ZBrushes\Trimのフォルダにあります。
  • 石の面を丁寧に磨きたい時は、TrimSmoothBorderよりも四角いアルファが付いている、OrbFlatten_EdgeProtectというブラシを使うことをお勧めします。そのブラシはGumroadから無料でダウンロードすることが出来ます。
  • 凸凹の面を磨きたい時は、四角いアルファが付いているhPolishやアルファが付いていないPlanarというブラシを二つ使うことをお勧めします。

もし石のスカルプトに興味があるのであれば、Essential Rock Creation Techniques by Daniel Castilloというコースをお勧めします。

ノーマルマップのベイク

ローポリモデルとして、前のように頂点法線が同じ方向へ向けるように、調整されたメッシュを使ってください。

ノーマルマップをベイクした後でSubstance DesignerまたはPhotoshopを使い、ノーマルマップをシームレスにしオパシティマスクを描きます。テクスチャパッキングは、ノーマルマップ(RG), オパシティマスク(B)で行いましょう。テクスチャパッキングについて知りたい方はこちらをご覧ください。

Unreal Engineでのデカールのマテリアル設定

テクスチャの設定時に圧縮設定をBC7にし、sRGBのチェックを外します。

マテリアルのグラフは下記になります。

デカールのマテリアルはこれで以上になります。結果は、下記になります。

Unityでのデカールのマテリアル設定

テクスチャの設定でsRGBのチェックを外し、圧縮品質をHigh Qualityで設定してください。(テクスチャはサイズが小さいので、これはファイルのサイズに大きい影響を与えません)

マテリアルのグラフは下記になります。

デカールのマテリアルはこれで以上になります。結果は、下記になります。

まとめ

ディファードデカールを使い、Overwatchのようなビルの角の制作方法を紹介しました。紹介したデカールはどんな壁にも使えます。さらに、たった一つのドローコールでレンダリングになりますので、パフォーマンスにも優しいです。

上記の記事が皆様のお役に立てれば幸いです。 それでは、良い一週間をお過ごしください。

参考サイト

Unreal Engine – Decals

Unity – Decal Shader Graph

Pope Kim – Screen space decals in Warhammer 40,000: Space Marine

Wikipedia – Deferred Shading

関連記事

  1. 【Unity】UVスペースのディストーションシェーダー

    2023-07-10

  2. 【Unreal Engine】水の波紋のシェーダーを作って作品に雨を降らせよう

    2024-02-06

  3. 【Unreal Engine】気軽にコケや雪を生やそう

    2024-10-02

  4. 【Unreal Engine】動く雲の影を落とす地面シェーダーの作り方

    2023-12-13

ページ上部へ戻る