WebXR Device APIは、WebブラウザからAR・VRデバイスへアクセスするためのJavaScript APIで、W3CのImmersive Web Working Groupが策定しています。2018年に従来のWebVR APIを置き換える形で提案され、2020年代に入りChromeやEdge、Meta Quest BrowserなどChromiumベースのブラウザを中心に正式実装が広がりました。Three.jsやBabylon.js、A-Frameといったライブラリと組み合わせることで、ネイティブアプリのインストールなしにヘッドセットやスマホARを起動できるのが特徴です。
この記事の目次
- WebVRからWebXRへの転換点
- 対応デバイスとブラウザの現状
- ハンドトラッキングとレイヤー機能
- 開発時の留意点
- まとめ
WebVRからWebXRへの転換点
WebVR APIは2016年頃から実験的に提供されましたが、VR専用の設計でAR利用が難しく、入力デバイスやリファレンス座標系の扱いもベンダーごとにばらついていました。WebXRはこの反省を踏まえ、VR・ARを統一的に扱うセッションモデル(immersive-vr、immersive-ar、inline)を導入し、座標系もlocal、local-floor、bounded-floor、unbounded、viewerの五種類に整理しています。
標準化の進行に合わせて、ChromeのWebVR APIは2020年9月のChrome 79で削除されました。Three.jsはWebXRManagerを通じて旧APIと新APIを段階的に切り替え、現在はWebXRに完全移行しています。フレームワーク利用者は意識せずに済みますが、自前で書く場合は古いコード例がWebVR用なのか確認することが重要です。
対応デバイスとブラウザの現状
VR側ではMeta Quest 2/3のQuest Browser、PCに接続するValve IndexやWindows Mixed RealityをサポートするEdge/Chromeが代表的です。AR側はAndroidのChromeがARCoreと連動し、スマホをかざすだけでimmersive-arセッションを起動できます。iOSのSafariは長らくWebXRに非対応でしたが、有志のWebXR Viewerアプリや一部のサードパーティブラウザで限定的に体験できる状況が続いてきました。
Apple Vision ProのSafariは2024年のvisionOSリリース時点でWebXRに対応し、ハンドトラッキングを用いた没入セッションが可能になりました。これはWebXRの普及にとって大きな転機で、iOSへの全面対応を待たずとも、ヘッドセット向けのWebコンテンツがApple/Meta/Microsoftの主要プラットフォームで動く環境が揃いつつあります。
ハンドトラッキングとレイヤー機能
WebXR本体に加え、Hand Input Module、Layers、Hit Test、Anchors、Depth Sensing、Lighting Estimation、DOM Overlaysなど多数のモジュール仕様があります。Hand Input Moduleでは25個の関節を持つXRHandが取得でき、Quest 3やVision Proでコントローラレスのインタラクションを実現できます。Hit TestモジュールはARで現実の平面と交差判定するための定番APIです。
Layersモジュールでは、テキストやUIをWebGLの単一フレームに統合せず、コンポジタが個別に合成できるようになります。これによりUIの解像度を上げつつメインシーンは低負荷で描画する、といった最適化が可能です。Meta Quest向けには高解像度ストリーミング動画のレイヤー化が、Vision Pro向けには等距円筒投影のメディアレイヤーが定義されており、用途に応じて選択します。
開発時の留意点
WebXRはHTTPSが必須で、ローカル開発でも自己署名証明書かlocalhostでの動作確認が前提になります。さらにimmersive-arセッションは「ユーザーアクションをトリガに開始する」ことが仕様で求められており、ページ読込時の自動開始はできません。これはネイティブAR以上にユーザーの明示的同意が前提となるWeb文化を反映した制約です。
パフォーマンス面では、Quest 3で90Hz、Vision Proで90/100Hzを目指す場合、1眼あたり数百万画素のレンダリング負荷が乗ります。Three.jsならsetPixelRatioとfoveatedレンダリング、WebGPUバックエンドの活用が有効です。さらにDevToolsのリモートデバッグやWebXR Emulator拡張機能を使うと、ヘッドセットなしでも基本的な動作確認が可能で、CI/CDのE2Eテストに組み込めます。
まとめ
WebXRはWebVR時代の課題を整理し、AR/VR/MRを横断的に扱う標準APIとして成熟しつつあります。Vision ProのSafari対応により主要ヘッドセットが揃い、Three.jsやA-FrameでネイティブアプリなしのXR体験を配信できる土台が整いました。HTTPSや入力モジュールごとの仕様差を把握し、Web独自の制約を踏まえた設計を心がけることが鍵です。
※本記事はIT用語辞典の手書きドラフトです。公開前に最新情報・出典を確認のうえ加筆修正してください。
コメント