Unreal Engine 4でのリアルで高品質な窓ガラス

ContentsPAGE

1. メッシュ構造 4

2. マテリアル デザイン 8— マテリアル 1:反射 8— マテリアル 2: 色合い 10

3. メッシュとマテリアルの割り当て 13

4. 透過処理のソート 13

5. 結論 14

2

Unreal Engine 4 でのリアルで高品質な窓ガラス

Unreal Engine 4でのリアルで高品質な窓ガラス

自動車のガラスは、自動車のリアルタイム レンダリングにとって特に難度の高い要素です。

現実の世界では、車の窓は物理的性質の異なる複数のマテリアルの階層構造を成しており、通過する光に複雑な相互作用をもたらします。そのため、物理的なリアリティと必要なフレームレートの速さのバランスについて許容できるレベルを保ちながら、これをリアルタイム レンダラで再現することは困難となる場合があります。また、車の窓 (特にフロントガラス) は、見ている人にとって自然と目に入る部分であるため、状況はより難しいものとなります。レンダリングは高品質でもアーティファクトや反射が非現実的なために、エフェクトが全体的として台無しになってしまうことがあります。

このドキュメントでは、リアルタイムでフォトリアルなレンダリングが可能な Unreal Engine 4 で、フロントガラスを設計する方法について説明します。

図 1: The Human Race のシーン

このテクニックの成果については、受賞歴のある短編映画 The Human Race で確認できます。

3

Unreal Engine 4 でのリアルで高品質な窓ガラス

https://www.youtube.com/watch?v=-PKejX4A7vg

メッシュ構造このテクニックでは、まず最初にフロントガラスをモデル化します。

フロントガラスは、 4 つの独立したメッシュまたはメッシュ グループで構成されており、これら 4 つのメッシュはそれぞれ片面である必要があります。

次の図は、メッシュのレイアウトをまとめたものです。

• フロントガラスの外側の 2 つのレイヤーである｢Mesh 1｣と｢Mesh 2｣は、法線が車両の外側を向いています。｢Mesh 1｣は赤色、｢Mesh 2｣は黄色で表しています。

• 内側にはレイヤーが｢Mesh 3｣と｢Mesh 4｣の 2 つあり、それらの法線は車両の内側を向いています。｢Mesh 3｣は緑色、｢Mesh 4｣は青色で表しています

この詳細な図は、これら 4 つのメッシュが 3D 空間でどのように相互に関連して配置されているかを示しています。

図 2: メッシュレイアウト

図 3: 3D空間上のメッシュの配置

4

Unreal Engine 4 でのリアルで高品質な窓ガラス

外側の反射レイヤーである Mesh 1 は、フロントガラスの外側スキンを形成します。車の外側から見える反射は、このレイヤーによって作られます。法線は車両の外側を向いています。

図 4: オレンジ色でハイライトされた Mesh 1

図 5: オレンジ色でハイライトされた Mesh 2

フロントガラスの厚さの合計の半分の距離では、外側の色合いレイヤーである Mesh 2 があります。このレイヤーは、フロントガラスを外側から見た際に、ガラスの色に応じて車内の色合いを付けます。法線は Mesh 1 と同じ方向である外側を向いています。

5

Unreal Engine 4 でのリアルで高品質な窓ガラス

Mesh 2 と背中合わせに、内側の色合いレイヤーである Mesh 3 があります。このレイヤーは、車の内側からフロントガラスを通して外側を見るとき、ガラスの色に応じて外側周辺の色合いを付けます。法線は内側を向いています。

図 6: オレンジ色でハイライトされた Mesh 3

図 7: オレンジ色でハイライトされた Mesh 4

最後に、フロントガラスの最も内側にある Mesh 4 は、内側から見たときの車内の反射を提供します。法線は内側を向いています。

6

Unreal Engine 4 でのリアルで高品質な窓ガラス

次の画像は、Unreal Editor の [World Outliner (ワールド アウトライナー)] における、これら 4 つのメッシュのスタティックメッシュ アクタを示しています。

以下では、4 つのレイヤーすべてが Unreal Editor の [Viewport (ビューポート)] に、[Wireframe (ワイヤーフレーム)] モードと [Lit(点灯)] モードで表示されています。

図 8: ワールドアウトライナーでのスタティックメッシュアクタ

図 9: ビューポートでの4つのレイヤーの表示

7

Unreal Engine 4 でのリアルで高品質な窓ガラス

マテリアル デザインこのテクニックには、次の通り 2 つの異なる半透明のマテリアルが必要となります• 反射マテリアル。これはフロントガラスの外面と内面に適用されます。• 色合いマテリアル。これはガラスを通して見る物の色付けのみ行います。

マテリアル 1:反射

このマテリアルの目的は、ガラスから反射される光のみを処理することです。このフロントガラスのレイヤーについて、まっすぐ見たときには完全に透明にして、グレージング角で見たときには反射率を高くなるようにします。

これを Unreal Engine でモデル化するには、translucent (半透明) のマテリアルから始める必要があります。マテリアル エディタでマテリアルの出力ノードを選択したら、[Details (詳細)] パネルで次の値を設定します。• [Blend Mode (ブレンド モード)] を [Translucent (半透明)] に設定します。• [Lighting Mode (ライティング モード)] を [Surface TransparencyVolume]に設定します。• [Screen Space Reflections (スクリーン空間の反射)] を有効にします。

図 10: マテリアルエディタの詳細パネルでの反射マテリアル

8

Unreal Engine 4 でのリアルで高品質な窓ガラス

300

0

0.1

0.2

0.3

0.4

0.5

0.6

0.7

0.8

0.9

1

400 500 600 700 800 900 1000

Wavelength (nm)

Athermic

Standard

Refl

ecti

on c

oeffi

cien

t

1100 1200 1300 1400 1500

マテリアル グラフでは、鏡のようなクロムとして設定しましたが、Fresnel ノードを使用して、そのオパシティをカメラの視野角に結合します。• [Base Color (基本色)] を 白 にします。• [Metallic (メタリック)] 入力と [Specular (スペキュラ)] 入力を 1.0 に設定します。• [Roughness (ラフネス)] 入力を 0.0 に設定します。• 通常、白く、完全に反射し、完全にメタリックな表面は、滑らかなクロムのように見えます。ただし、Fresnel ノードもマテリアルの

出力ノードの[Opacity (オパシティ)] 入力にアタッチします。これにより、ガラスの曲率によって、Fresnel 関数がオパシティに影響を与え始め、その変化が十分にわかる角度となる場所にのみ、これらの鮮明な反射が現れるようになります。視野角がメッシュの法線に近い場所であれば、ガラスは透明のままです。

図 11: マテリアルグラフ

図 12: 画像の参照元 https://www.eclat-digital.com/visualization-of-car-windshields/

車のフロントガラスは一般的に athermic (非熱伝導) ガラスを使用しています。次の図は、非熱伝導のマテリアルの反射率が入射光の波長ごとにどのように変化するかを示しています。

9

Unreal Engine 4 でのリアルで高品質な窓ガラス

https://www.eclat-digital.com/visualization-of-car-windshields/

この物理的特性をシミュレートし反射をシーンにより正確に合わせるために、Fresnel ノードに渡す [Exponent] 入力と [BaseReflectFraction] 入力の値を調整できます (上記のマテリアルではそれぞれ EXP と Intensity と呼ばれます)。これにより、反射の強度と、ガラスの曲率に対して反射がどのようにフェードするかについて制御できるようになります。

図 13: 入力値によるフレネルの効果の違い

マテリアル 2: 色合い

このマテリアルの目的は、ガラスを通過する光のみを処理することです。フロントガラスにあるこのレイヤーが反射を完全に無視する一方で、フロントガラスの色合いに応じてガラスを通過する光に色を付けるようにします。

10

Unreal Engine 4 でのリアルで高品質な窓ガラス

これを Unreal Engine でモデル化するには、もう一つ別な半透明のマテリアルが必要になります。マテリアル エディタでマテリアルの出力ノードを選択したら、[Details (詳細)] パネルで次の値を設定します。• [Blend Mode (ブレンド モード)] を [Translucent (半透明)]

に設定します。• [Lighting Mode (ライティング モード)] を [Surface

TransparencyVolume]に設定します。• 今回は、[Screen Space Reflections (スクリーン空間の反

射)]を無効にします。このマテリアルでは、スペキュラおよび反射の影響をすべて避けるようにします。

このマテリアルのグラフを設定する簡単な方法は、 [Opacity] 設定で定数を使用することです。• [Base Color] をガラスの色にします。• 常に 0.0 のスペキュラ入力を使用します。これにより、光がガ

ラスを均一に通過できるようになります。• 常に 1.0 の Roughness 入力を使用します。• オパシティ チャンネルを使用して、ガラスの暗さ、つまり外側

から見た車内の暗さを制御します。この値を自由に変えて、必要なだけ色合いの効果を強くすることができます。

図 15: 色合いマテリアルのマテリアルグラフ

図 14: マテリアルエディタ詳細パネルでの色合いマテリアル

11

Unreal Engine 4 でのリアルで高品質な窓ガラス

もう少しこなれた設定にするには、上の反射マテリアルで行ったように、カメラの視野角に基づいてガラスのオパシティを変えてください。反射マテリアルでは、オパシティを上げると反射が強くなります。ただし、色合いマテリアルでオパシティを上げると、光がガラスをより鋭い角度で通過する際に吸収度合が大きくなります。結果として、視野角が大きくなるにつれてガラスを透過する光が減り、反対側のオブジェクトが見えにくくなります。

上記の [absorption] パラメータの値を上下させることで、効果の強さを制御できます。ただし、これは控えめに使用する場合に最も効果的となります。使用する場合は、値が 0.1 未満となるようにしてください。

図 16: 吸収を含む色合いマテリアルのマテリアルグラフ

12

Unreal Engine 4 でのリアルで高品質な窓ガラス

メッシュとマテリアルの割り当てスタティックメッシュ アクタと 2 つのマテリアルが用意できたので、次のように正しいマテリアルを正しいアクタに割り当てる必要があります。• Mesh 1 (外側の反射レイヤー):反射マテリアルを割り当てます。• Mesh 2 (外側の色合いレイヤー):色合いマテリアルを割り当てます。• Mesh 3 (内側の色合いレイヤー):色合いマテリアルを割り当てます。• Mesh 4 (内部反射レイヤー):反射マテリアルを割り当てます。

透過処理のソートこのテクニックを使用する際の最後のステップは、4 つのスタティックメッシュ アクタに対して [Translucency Sort Priority (透過処理ソートの優先順位)] を設定することです。

Unreal Engine が、カメラ ビュー内で重なっている複数の半透明のオブジェクトをレンダリングする必要がある場合、前面のオブジェクトを描写する前に背面のオブジェクトを描写する必要があります。描画順序を把握するために、カメラから各オブジェクトのバウンディング ボックスの原点までの距離を比較します。ほとんどの場合これでうまくいきますが、完璧ではありません。それにより、たまに背面のオブジェクトが前面に描写されることがあります。

この問題を回避するには、レベル内の 4 つのスタティックメッシュ アクタのそれぞれに対して [Translucency Sort Priority] オプションを設定してください。これでエンジンが正しく判断できるようになります。

このオプションを見つけるには、 [Viewport (ビューポート)] または [World Outliner (ワールド アウトライナー)] でフロントガラスの各部分に対してスタティックメッシュ アクタを選択し、[Details (詳細)] パネルで[Rendering (レンダリング)] セクションまでスクロールして、詳細プロパティを展開します。

アクタが次の値を使用するように設定します。

Mesh 1: 1Mesh 2: 0Mesh 3: 0Mesh 4: 1

このように設定することで、エンジンは常にフロントガラスの内側のレイヤーを、対応する外側のレイヤーの後ろでレンダリングするようになります。そのため、カメラが車の中や外のどちらにいたとしても、フロントガラスのレンダリングの順序が正しく保持されます。

図 17: Mesh 1 と 4 の詳細パネル

13

Unreal Engine 4 でのリアルで高品質な窓ガラス

結論上記のように設定された 4 つのスタティックメッシュ アクタと 2 つのマテリアルを使用することで、Unreal 上のあらゆる自動車のレンダリング プロジェクトにて、高品質で、リアリティがあり、高性能なガラスを実現できます。

14

Unreal Engine 4 でのリアルで高品質な窓ガラス

このドキュメントについて

著者

Min Jie Wu

編集者

Robb Surridge

15

Unreal Engine 4 でのリアルで高品質な窓ガラス

Button 2: