『Marvel’s Spider-Man』でも使われた、ビルの窓から“内側を覗き込む”室内表現はどう作る？インテリアマッピングの基本をトイロジックが解説

トイロジックは、「HoudiniとUnrealEngineで始めるインテリアマッピング入門」と題した記事を、同社技術ブログ「トイログ」にて公開しました。同記事は前編と後編に分かれており、インテリアマッピングの基礎や実装について解説しています。

開発ブログ【#トイログ📝】を更新しました。

今回は #Houdini と #UE マテリアルでの実例を交えながら、前編と後編に分けて「インテリアマッピング」の基礎について解説します。
興味ある方はぜひチェックしてください！

▼記事はこちら
前編 https://t.co/96S6YdSTUE
後編 https://t.co/R1EKZntRiS

— トイロジック (@Toylogic_Inc) August 15, 2024

「インテリアマッピング」は、シェーダーを用いて窓から室内を覗いたような見た目を表現する技術です。モデリングをすることなく低コストにリアルな室内を表現でき、PlayStation 4用ゲーム『Marvel’s Spider-Man』にて同技術が用いられたことから知名度が向上しました。

記事内では、正方形の平面（Plane）の中に立体的な部屋が見えるような表現を目標とした工程を解説。下図を例に説明すると、立方体の手前にある赤い面をPlaneとして、その奥にある5つの面について、その内側だけがPlane越しに見えるという表現を目指します。

（画像はブログ記事より引用）

視線ベクトルの計算はHoudiniで行い、得られた計算式をUEシェーダーノードでも展開することで、HoudiniとUEの両方でインテリアマッピングを表現しています（記事中で使用しているHoudiniは19.5.640、UEは4.27.2）。

視点を持つSphereとその視線ベクトルの2次元的なイメージ（画像はブログ記事より引用）

Houdiniを利用している理由については、@Pや@Nのアトリビュートを使うことで頂点ごとの計算結果を可視化できること、ベクトルの計算がしやすいことが挙げられています。

記事前編では、視線ベクトル計算における考え方の基本から、視線ベクトルが立方体の各面のどれかに衝突する距離の求め方などを解説。視点位置によっては視線ベクトルが逆向きになってしまうなどの問題についても、解決法とともに説明しています。

Sphereの場所によっては視線ベクトルが逆を向いてしまっている（画像はブログ記事より引用）

後編では、Planeの中心を通るベクトルのほか、Plane上のどの点からでも成り立つような拡張方法を解説しています。

UEシェーダーノード画像（画像はブログ記事より引用）

完成したインテリアマッピング。視点によって見た目が変わっていることがわかる（画像はブログ記事より引用）

その他、記事ではさらにノード数を削減した構成の紹介や、「テクスチャを貼る」「部屋の数を増やす」といった実用的な使い方の解説なども行われています。詳細は、ブログ記事（前編・後編）をご確認ください。