WebXR開発へのイントロダクション

Jonathan Hale

ウェブ上のARおよびVRは驚異的な技術です。キュレートされたストアを通す手間をかけずにアイデアを作成し公開することができ、ウェブサイトを共有するように簡単に共有できます。

ウェブ上のVRは、2016年にChromeとFirefoxで最初にリリースされたWebVR 1.0から存在しています。 この実験はWebXR Device APIに取って代わられ、最終的には拡張現実 (AR) もサポートする予定です (Android版Chromeでは2020年11月から利用可能です)、単なる仮想現実 (VR) だけではありません。 この新しい技術が安定したポイントに達し、開発者が実際にそれを利用し始めることができる段階に至った今、どのようにして始めるべきでしょうか?

フレームワーク 

フレームワークの選択についてのガイダンスを得るには、こちらのブログ記事を参照してください。

ウェブ特有の3つの課題 

ウェブとネイティブのXR開発は、大きく3つの点で異なります。

読み込み時間 

ウェブ上でゲームがロードされるまで待つというのは許されません。ユーザーが待たなければならない秒数が増えるほど、離脱率も増加します。

ゲームのアセットを小さく保ち、圧縮を使用し、一般的に高速なロード時間を確保することがユーザー満足度を維持する鍵です。

パフォーマンス 

ウェブはブラウザによってサンドボックス化されて実行されます。これはデバイスに害を与えないために、実行中のデバイスから隔離されていることを意味します。

サンドボックスにはパフォーマンスのオーバーヘッドが伴いますが、ウェブサイトが行おうとすることが二重にチェックされる必要があります。これはJavaScriptがネイティブアプリケーション以上のオーバーヘッドを持ってくることと相まって、VRおよびARがさらにパフォーマンス上の課題となるのです。

拡張性のある品質 

ネイティブアプリケーションをVRでリリースする場合、通常はごく限られた特定のデバイスを対象とします。 それらのパフォーマンス指標を把握しており、プラットフォームごとにビルドを調整することが可能です。

ウェブの美しさは、非常にクロスプラットフォームであるため、どのデバイスでもWebXRアプリを実行できることです。それはすなわち、トースターからデスクトップPCまでを考慮し、どこかで線を引く必要があるということです。

VRでは、デバイスの範囲に応じて入力方法も多様です。シンプルなゲイズコントロール(Google Cardboard)から、3-dof、6-dofコントローラー、ハンドトラッキング(Quest 2)、目のトラッキング(Quest Pro、Apple Vision Pro)まで。

あなたのアプリケーションを動作させるために共通の最小限の基準を決定する必要があります。

解決策 

これらのウェブ特有の課題にデザインから取り組むことが重要です。これらはアートスタイルの選択や、インタラクション体験の選択、そしてアプリケーションが成功するか否かに影響を与えます。

より早くロードする 

一般にファイルが小さければ小さいほど、ゲームのダウンロードは速くなります。 ウェブでは、最初に必要なアセットだけをロードし、実行時に追加アセットを遅延ロードするのが最良の方法です。

テキストベースのフォーマットは通常、解析に時間がかかるため、バイナリアセットフォーマットを使用することを検討してください。 WebPやBasis Universalのような画像フォーマットは、従来のPNGやJPEG画像に比べて、CPUとGPUのファイルサイズを改善することができます。

パフォーマンス 

パフォーマンスを監視し、範囲に応じて最適化してください。アセットを小さく保ち、重要なアセットやユーザーからの距離に基づいて解像度を「費やす」。

OCULUS_multiview2などの特別なブラウザ拡張機能は、GPUレンダリングのパフォーマンスに役立ちます。 また、WEBGL_multi_drawのような新しい拡張機能は、CPUパフォーマンスを向上させます。

ほとんどのフレームワークには、パフォーマンスガイドまたはヒントに関するドキュメントがあります。大規模なプロジェクトに取り組む際には、最初からできることを確認してください。

スケーリング 

より良いスケーラビリティのために、ヘッドセット入力タイプやユーザーエージェント文字列に依存してアセットをロードすることができます。 ゲイズベースのシステムは通常、ハンドトラッキングをサポートする6-dofデバイスよりも低スペックです。

Wonderland Engine 

Wonderland Engineは、これらの最適化作業をあなたに代わって処理することを目指しています。私たちの目標は、技術的な課題に煩わされることなく、アプリの機能に集中できるようにすることです。

Wonderland Engineは最近バージョン1.0に到達しました。 私たちのDiscordコミュニティにぜひ参加してください!

Last Update: March 27, 2025

最新情報をお届けします。