皆さんこんにちは。イーソル エンジニアリング本部 Entertainment課のA.Tです。
イーソルではXR機器・ゲーム機器の開発や、それに関わるアプリケーション開発など、エンタテインメント領域のエンジニアリングサービスを幅広く提供しており多数の実績があります。
弊社では昨年、専門性の異なる複数の課の新人が中心となり各々の技術領域をコラボレーションしたデモプロダクトの開発を行うことになりました。そこで私たちは「ROS × XR」をテーマに掲げ、「ROSで制御される移動ロボットからのカメラ映像をHMDに映し出し、XRとしてのゲーム体験を生み出す」というコンセプトでプロダクトを開発しました(*1)。
本Blogでは、前編・後編に分けて、私が本プロジェクトで担当したXR技術領域におけるオクルージョンの実装方法とそれに伴って苦労した点や解決方法をお伝えします。前編となる本記事では、オクルージョンを実現するためにUnreal Engineで行った実装について、各コンポーネントをご紹介します。
*1…ROS部分の開発内容については本Blogでは触れませんが、ご興味がありましたらお気軽にお問い合わせください。
| 目次 1. 本プロジェクトにおけるXR技術領域とオクルージョンの要求 2-1. 開発環境 2-2. オクルージョンの実現 2-3. 現実世界の情報（RGB、深度）の取得 2-4. RGB映像の投影 2-5. 深度に合致した凹凸スクリーンの生成 2-6. 仮想世界のオブジェクト配置 3. 最後に |
1. 本プロジェクトにおけるXR技術領域とオクルージョンの要求
さて、私はこのプロジェクトでXR技術領域を担当しました。XRに関わる要求としては、「現実と仮想が混ざった世界をHMD（ヘッドマウントディスプレイ）に表示すること」でした。
より具体的なイメージとしては以下図1️にあるように、「ゲーム内のUIパーツ（スコア・残り時間ゲージなど）やお化けといった仮想のオブジェクトを、現実世界の映像に重畳してHMDに表示すること」になります。またお化けについては、「オクルージョンを適用して重畳表示することで、あたかも現実世界に存在しているかのようなリアルな体験を提供すること」も要求として挙げられました。
図1 HMD画面のイメージ図
ここで床や壁、くまのぬいぐるみなどは現実世界の物体で、お化けや炎、UIなどは仮想世界の物体。
XRにおける「オクルージョン」とは、仮想のオブジェクトと現実世界を同時に表示した上で、「仮想のオブジェクトが、手前にある現実の物体に遮られて隠れることにより、あたかも現実の空間に存在しているかのように見せる視覚効果」のことです。
私たちは今回このオクルージョンを実現するために、ゲームエンジンのひとつであるUnreal Engineを利用して実装を試みました。
結果として、HMD上で以下のようなゲームコンテンツを実現しました。仮想世界の物体であるお化けが、現実世界の映像に対して前後関係を持って表示されることで、消えたり現れたりしている様子や、現実世界の映像の後ろに隠れたときにはビームが当たらないことなどが確認できると思います。
図2 完成したコンテンツの映像（HMDのキャプチャ）
それでは次章で、具体的な実装方法についてご紹介していきます。
2-1. 開発環境
- ゲームエンジン: Unreal Engine 5.2
- HMD: PICO4 (AndroidベースのOSを搭載)
2-2. オクルージョンの実現
今回のデモプロダクト開発では、以下の図にあるような処理の流れでオクルージョンを実現しました（図3）。各項目の詳細について、順番に説明していきます。
図3 オクルージョン実現するための処理の流れ
2-3. 現実世界の情報（RGB、深度）の取得
まずは、現実世界からRGB映像を取得します。今回はRGBカメラとしてOAK-D S2 （Luxonis社）を用いました。
また、現実世界から深度情報（現実世界のオブジェクトとの距離）を取得します。深度情報の測定にはいくつかの方法がありますが、今回はステレオカメラの視差を用いて測定する方法をとりました。先ほどRGBカメラとして用いたOAK-D S2にはステレオカメラも搭載されているので、そちらを使用しました。測定した深度情報は、輝度に深度が対応したグレースケール映像として取得します。
これらの映像について、後の処理に用いるためにテクスチャとしてUnreal Engineに取り込みます。
今回はUnreal Engine のレベル内に用意した平面スクリーンにそれぞれの映像を表示し、そのスクリーンをScene Capture 2D コンポーネントを用いてキャプチャすることで、テクスチャを取得しました（図4）。
参考：USceneCaptureComponent2D | Epic Developer Community
図4 平面スクリーンをキャプチャし（図中左）、テクスチャを取得する（図中右）
2-4. RGB映像の投影
次に、RGB映像をプロジェクターの要領で投影する機能を実装します。
RGB映像のテクスチャをベースとしてマテリアルを作成します。マテリアルにはMaskパラメータを設定することで、RGB成分をマスクしたマテリアルインスタンスを生成できるようにしておきます（図5上）。このマテリアルからR、G、Bそれぞれの成分のみを持つマテリアルインスタンスを生成します（図5下）。
図5 （上）RGB映像のテクスチャをベースとしたマテリアルBase Materialの作成
（下）Base MaterialからマテリアルインスタンスR、G、Bを生成
次にこれらのマテリアルを光として投影するプロジェクターを作成します。プロジェクターは3つのSpot Light コンポーネントからなり、これらのSpot Lightコンポーネントに、Light Function Materialとして、先ほど生成したRGBのマテリアルインスタンスをそれぞれ設定します（図6）。
図6 Spot LightコンポーネントにLight Function Materialを設定する。
場合によってSpot Lightの円錐の角度や半径も調整する。
Light FunctionはLightコンポーネントの放つ光が投影する模様を、設定した任意のマテリアルに変更することができる機能です。これによって、スポットライトの光がプロジェクターのようにRGB映像を投影するようになります（図7）。
参考：Light Function | Epic Developer Community
図7 プロジェクターによる平面スクリーンへの映像の投影
スクリーン手前に立方体を置くなどすると、映像が遮られて立方体表面に投影される。
2-5. 深度に合致した凹凸スクリーンの生成
次に深度に合致した凹凸スクリーンを生成する機能を実装します。
まずはグレースケールの深度映像のテクスチャについて、ピクセルごとの輝度を取得します。今回使用したステレオカメラからの深度映像は、輝度が高いほど深度が低く（＝カメラから近く）、輝度が低いほど深度が高い（＝カメラから遠い）という設定ですので、輝度から深度が取得できます。
この深度をもとに、Unreal Engineのレベル内にスクリーンを生成します。スクリーンは、多数の細長い直方体によって構成され、それぞれの直方体が前後方向にずれることで凹凸のあるスクリーンとなります。直方体1つは深度映像の1ピクセルに相当し、前後方向のずれはそのピクセルの深度に対応しています。これにより、深度に合致した凹凸を持つスクリーンが生成できます。
深度映像を構成するピクセルと同じ個数の直方体を表示すると処理が重くなる場合があるので、深度映像を数ピクセルの正方形に分割し、その深度を平均化することで、「解像度の低い」深度を取得できるようにして、直方体の個数を変更することができるようにもしました。
図8 深度映像から生成された凹凸スクリーン
元とした深度映像の解像度は1280×720だが、「凹凸の解像度」は元の映像の8分の1に設定している。
2-6. 仮想世界のオブジェクト配置
2-4と2-5を結合すると、現実世界の深度に合致した凹凸スクリーンに、現実世界のRGB映像が投影できます。そしてそこに仮想のオブジェクトを表示することで、現実世界との「オクルージョン」が実現されます。
図9ではお化けのオブジェクトを表示していますが、ところどころでお化けがスクリーンに埋まっているのがわかります。まさにお化けが壁をすり抜けるようなイメージで、お化けがスクリーンに埋まっている部分は現実世界の物体がお化けよりも前にあることに、逆にお化けの姿が見えている部分は現実世界の物体がお化けよりも後ろにあることに相当します。
図9 （上）正面から見たスクリーン（下）ズームしたスクリーン
赤丸で示したお化けが床や手前にある椅子に埋まって表示されている。
実際に近くでスクリーンを見ると凹凸が目立つため、ゲーム中にプレイヤーが見る映像としては、凹凸スクリーンから非常に遠い位置からScene Capture 2D を用いてキャプチャした映像になります（図10）。こちらについて詳しくは後編でご紹介します。
図10 ゲーム中にプレイヤーが見る画面
凹凸スクリーンをキャプチャした映像に、車内を模したオブジェクト、
お化けの個数や制限時間などを示すUI、銃のオブジェクトがさらに重畳されている。
3. 最後に
本記事では前編としてオクルージョンの実装方法をご紹介しましたが、いかがでしたでしょうか。
次回の後編では、本プロジェクトで苦労した点および解決方法として「凹凸スクリーンの生成」「RGB映像の表示」「AndroidベースOSのHMDでの開発」といった点を取り上げます。
また冒頭でご紹介した通り、イーソルはエンタテインメント分野のエンジニアリングサービスを提供しており、多様な開発実績があります。
イーソルの強みであるOS、デバイスドライバはもちろん、アプリケーション、クラウドサービス開発などの豊富な経験を活かし、お客様に満足いただけるソリューションをご提供します。
「XR・ゲームなどエンタテインメント分野の開発で課題がある」、「開発の委託について詳しく知りたい」、という方はぜひお気軽にイーソルにご相談ください。
Entertainment課 A.T
