こちらは、2023年2月1日に公開された以下のドキュメントを翻訳したものとなります。
PlayCanvas now supports Microsoft volumetric video playback
Microsoft Mixed Reality Capture Studios (MRCS) ボリュメトリックビデオ技術に対応したショーケースデモをリリースしました。
PlayCanvasはMRCSボリュメトリックビデオに対応し、またMicrosoftが自社スタジオで撮影した動画の再生ライブラリについても提供を開始しました。デスクトップ、AR対応モバイル、WebXR対応のVRヘッドセットに関わらずすべて1つのURLから見ることができます!
ライブラリはPlayCanvasプロジェクトに簡単に追加でき、すばらしい没入型MR体験の作成に使用できます。
Microsoft Mixed Reality Capture Studiosについて
MRCSはホログラフィック映像を記録します - 人間やパフォーマンスの動的なホログラムです。オーディエンスはAR、VR、2D画面内でホログラムとのインタラクションが可能です。
Microsoftはホログラフィック映像撮影のエキスパートとして先進的な撮影技術を活用し、2010年以降に関連アプリケーションをリリースしています。
Microsoft Mixed Reality Capture Studiosの詳細はこちらを参照ください。
どのように作成したのか?
このデモはPlayCanvas Developer Siteにある複数のチュートリアルとキット、MRCS再生ライブラリと自由に利用できるオンラインアセットを組み合わせて作成しました。
デモのパブリックプロジェクトはこちらを参照ください。ボリュメトリックビデオファイル(配布権の都合上)とMRCS devkit専用ライブラリへのURLは弊社にて削除しました。ライブラリとサンプルビデオへのアクセスはMRCSにお問合せください。
Microsoft映像再生ライブラリ
ボリュメトリックビデオの再生に必要なスクリプトやアセットは「holo video」フォルダにあります。インテグレーションを完了させて動画を再生するには、MRCSから提供されるdevkitライブラリファイル名「holo-video-object-umd.js」を追加する必要があります。
動画のデータファイルは、サイズと配置の関係から個別のウェブサーバーにホスティングしなければなりません(Microsoft AzureのようなCDNサービスの背後にあるのが理想的です)。
「holo-video-player.js」スクリプトは任意のEntityに追加可能で、.hcapファイルへのURLを付与することができます。このスクリプトはボリュメトリックビデオのレンダリングと再生に必要なメッシュやマテリアルなどを実行時に作成します。
完全なドキュメントは近日中にPlayCanvasサイトにて公開予定です!
マルチプラットフォームのAR/VR体験を作成
動画にあるとおり、私たちは標準ブラウザで表示できる体験を作成しました。WebXR対応のモバイルデバイス上でのAR(Android)と、Oculus Questなどのデバイス上のVRです。WebXR対応のiOSのサポートについては弊社のWebKitチームが対応中です。
これは弊社の複数のWebXRサンプルプロジェクトや「webxr」フォルダのスクリプトおよびアセットを組み合わせて作成されました:
「xr-manger.js」はXR体験をどのように管理し、また体験全体の処理方法を制御しています:
- AR/VRへの入退場
- 実行中のデバイスのXR機能をもとに、どのUIボタンを表示するか(例:ARが利用可能またはVRが利用可能でない場合にVR UIボタンを非表示)
- 各体験固有のEntityの表示/非表示
- ARでは特定のEntityをユーザーの前に移動し、ユーザーが移動せずに動画を見やすくする
ARの追加
WebXR UI Interactionチュートリアルの「xr-manager.js」スクリプトをベースに、まずARモードが追加されました。プロジェクトに追加済みの変更点は以下のとおりです:
- プロジェクトレンダリングの設定で「Transparent Canvas」が有効化されている点を確認する。
- ARに特化した第2カメラを作成し、ARに必要なレイヤーのレンダリングを設定して(つまり、スカイボックスレイヤーを除く)ビデオパススルー用の透過クリアカラーを採用する。
「xr-manager.js」をチュートリアルプロジェクトからデモプロジェクトにコピーアンドペーストした後にAR に入るためのUI要素とボタンをフックし、AR /非AR体験のEntityを無効化および有効化する機能を追加しました。
これはユーザーがXR体験を開始および終了する際にマネージャーが検出して無効化/有効化するEntityにタグを追加することで処理されました。
たとえば、ARで利用できるAR再生コントロールエンティティのみがほしい場合には、タグ「ar」を追加します。
また、ARで床が検出された際にユーザーの前にエンティティを移動するには「ar-relative」タグを追加します。これによって、ユーザーはコンテンツを見つけるために移動したり、周りを見回す必要がなくなるため、体験がさらに向上します。
ユーザーがARセッションを退出すると、Entityはユーザーが入場した際に保存された元の位置に戻ります。
VRの追加
これは必要な機能の完全なサンプルがなかった点や既存のAR機能と連動させる必要があった点から、予想よりも若干厄介でした。
目標はユーザーがホログラム映像の中を自由に移動できることと、使用されているVR入力デバイスに合致するコントローラーを表示することでした。
弊社のStarter Kit: VRはオブジェクトとのインタラクション、テレポートや環境内での移動をおこなうためのスクリプトと機能があります。シーン内のエンティティに「pickable」タグをつければ、VR入力デバイスが動いたり選択ボタンが押された際に、object-picker.js内のVRオブジェクトピッカーロジックに対してテストが可能です。
オブジェクトがテレポート可能かインタラクション可能かは、エンティティ上の別のタグに依存します。
この場合は映像内でテレポートできるようにするため、ボックス型のレンダリングメッシュを持つEntityを追加して領域を表示し、また「pickable」タグと「teloportable」タグも追加しました。
次は、VRでコントローラーがどのように見えるかの処理でした。スターターキットでは開発者が別のものに置き換えることを想定し、キューブでコントローラーを表示しています。
今回は、VRコントローラーの表現としてスキン付きの手を使用したいと思っていました。Max(PlayCanvas WebXRインテグレーションを構築を担当しました)が作成したこちらのプロジェクトを使用し(WebXR Controller/Hand Models)、コードとアセットをマージするだけで実装できました。
投影したスカイボックス
スカイボックスはPoly Havenから取得し、弊社のテクスチャツールでキューブマップに変換しました。またDonovanはキューブマップを投影して、ユーザーが動き回れる平らな床を生成するシェーダーを書きました。
これはモデルやジオメトリを構築せずに同様のシーンに適用できる、簡単ですばらしいエフェクトです。エフェクトを適用していないシーン(左)と適用したシーン(右)を以下で確認ください:
シェーダーコードは、アプリケーション起動時にprojected-skybox-patch.json内のグローバルエンジンチャンクをオーバーライドして適用します。
VRでのワールド空間UI
VRでは「スクリーン空間」の概念がないため、ワールドのどこかに再生/終了のコントロールを追加する必要があります。
コントロールは、ホログラム映像の近くで常にユーザーの方を向いた状態で設置することにしました。これはその状態がユーザーの焦点に合いやすいためです。
単純にUIボタンを「ピボット」Entityのオフセットされた子Entityとしてワールド空間に配置することで実現しました。ピボットEntityはホログラム映像の足元に配置され、VRカメラに向くように回転できます。
ピボットEntityにはVRカメラの位置のコピーを取得し、Y値をピボットEntityの値と同じに設定するスクリプトがあります。またその位置を使用して、UIコントロールが常に床と平行になるように見ています。
UIコントロールを設定するその他の場所としては、左手/コントローラーのようなトラッキングされたコントローラーに対応する場所があります。ただし、Google CardboardのようにVRデバイスが両手/コントローラーを持っているとは限らないため、今回こういった場所の設定はしませんでした。
床は単純に投影されたスカイボックスなので、ホログラム映像の影をシーンにレンダリングするためのソリューションが必要でした。
シャドウ「キャッチャー」マテリアル
Gustavはシャドウマップをサンプリングして影がない領域を完全に透過するマテリアルシェーダーを提供しました。
分かりやすくするため、以下では平面がどこに位置するかを表示しました。床面の白い場所はすべて、影が落とされていないため完全に透明になっています。
使用したその他のチュートリアル
また、この体験には弊社のチュートリアル/デモプロジェクトセクションで紹介した機能をこのプロジェクト用に若干修正したものもあります。
これには、以下が含まれます:
- XR以外のカメラコントロールにはオービットカメラを使用します。カメラエンティティを無効にすると、XRセッション中にカメラが移動しないようにオービットカメラコントロールが無効になります。
- 情報ダイアログでのMicrosoftビデオ向けの動画テクスチャ。アタッチされているEntity上のElementに動画テクスチャを直接適用するよう変更しました。
PlayCanvasには関係ありませんが、皆様にお知らせしておきます:すばらしいQRコード(デバイスがXR対応でない場合に表示されます)をAmazing-QRで生成できます。一般的な白黒バージョンではなく、カラフルでアニメーションのある魅力的なQRコードの作成が可能です。
見つかった問題点
このプロジェクトの開発中にいくつかの問題点が見つかりました。将来的に解決策を探していきます。現時点では複数の回避策があります。
VRでは、シャドウを有効にしたクラスターライティングは大幅なフレームレートの低下を引き起こします。このプロジェクトの影はディレクショナルライトによるものでクラスターライティングシステム外で処理されています。このためクラスターライティングの影を無効にしても、視覚的な変化はありません。
このデモではARでスクリーンスペースUIを使用しており、UIボタンを押そうとするとUIタッチ/マウスイベントの精度に問題が発生します。これは、ユーザーがARに入るとPlayCanvasエンジンがデバイスのカメラに一致する投影行列を使用して、現実世界に比してオブジェクトを正しくレンダリングしようとするためです。
残念ながら、スクリーンからワールドへの投影では投影行列を直接使用し、代わりにカメラコンポーネントでFOVプロパティを使用しています。このミスマッチが精度低下の原因となっています。
今回は最初のARレンダーフレームで投影行列から関連するカメラの値を計算し、その値をカメラコンポーネントに適用しなおすことで回避しました。コードはこちらのxr-manager.jsで参照できます。
まとめ
最後までお読みいただき、ありがとうございました。この記事での知見を、ぜひ皆さんのプロジェクトでご活用いただければと思います!
お役立ちリンク:
ぜひ、PlayCanvasフォーラムに感想やフィードバックをお寄せください!
Steven
コメント
0件のコメント
サインインしてコメントを残してください。