JavaScript を使用した WebXR 開発

[アーティクル]
10/31/2024

重要

WebVR は、非推奨とされており、現在のブラウザーでは使用できないため、新しい開発には使用できません。既存の WebVR の実装を WebXR に移行する必要があります。

WebXR は引き続き使用できます。ただし、 WebXR のサポートは廃止されます (バグ修正、コンテンツの更新、またはテクニカルサポートはありません)。そのため、アプリケーションが長期間にわたって動作し続けるという保証はありません。

JavaScript は、世界で最も人気のあるプログラミング言語の 1 つです。シンプルで軽量であり、Web 上で広く使用されています。 JavaScript と Web スキルの力を適用して、より魅力的な Mixed Reality エクスペリエンスを作成します。

Web 上の Mixed Reality アプリケーション

WebXR を使用すると、Web 上で Mixed Reality 機能を使用できます。仮想現実 (VR) と拡張現実 (AR) コンテンツは、互換性のある WebXR 対応ブラウザーで確認できます。ソフトウェアやプラグインをインストールする必要はありません。 HoloLens 2 のような物理デバイスで同じブラウザーを使用できます。

WebXR Device API は、Web 上の仮想現実 (VR) デバイスおよび拡張現実 (AR) デバイス (センサーやヘッドマウントされたディスプレイなど) にアクセスするために使用します。 WebXR Device API は Microsoft Edge と Chrome バージョン 79 で使用でき、それ以降のバージョンでは WebXR が既定としてサポートされます。 WebXR のブラウザーの最新のサポート状態は、caniuse.com で確認できます。

WebXR 機能	可用性
WebXR Device API (w3.org) (WebXR デバイス API (w3.org))	Windows デスクトップの Edge 81 HoloLens 2 の Edge 91
WebXR Augmented Reality Module - Level 1 (w3.org) (WebXR 拡張現実モジュール - レベル 1 (w3.org))	Edge 91。 HoloLens 2 のみ
WebXR Hand Input Module - Level 1 (w3.org) (WebXR 手入力モジュール - レベル 1 (w3.org))	Edge 93。 HoloLens 2 のみ
WebXR Anchors Module (immersive-web.github.io) (WebXR アンカーモジュール (immersive-web.github.io))	Edge 93。 HoloLens 2 のみ
WebXR Hit Test Module (immersive-web.github.io) (WebXR Hit テストモジュール (immersive-web.github.io))	Edge 93。 HoloLens 2 のみ

WebXR の表示

新しい Microsoft Edge と Firefox Reality ブラウザーを使用して Windows Mixed Reality の WebXR エクスペリエンスを表示できます。ブラウザーが WebXR をサポートしているかどうかをテストするには、ブラウザーで WebXR サンプルに移動します。

イマーシブ Web エクスペリエンスを開発するために何を使用できますか?

次の一覧は、現在市場で普及している、Mixed Reality の JavaScript 開発者に広く受け入れられ採用されているイマーシブエクスペリエンスを構築するための JavaScript フレームワークと API を示しています。

フレームワーク	例
Babylon.js Babylon は、3D コンテンツとイマーシブアプリケーションを簡単に開発できるようにする JavaScript 3D エンジンです。イマーシブアプリケーションの開発を開始する前に、Babylon.js 開発の基本について学習することをお勧めします。 - Babylon.jsを使用して 3D アプリケーションを構築する方法について説明します: 概要 - Babylon.js: Playground を使用して 3D サンプルとそのソースコードを再生する - WebXR について詳しく説明します。 - チュートリアル「最初の Hello World アプリの作成」を開始する方法について説明します。
A-Frame A-Frame は、Web で仮想現実の操作を開始するための宣言型の JavaScript フレームワークです。詳細については、A-Frame に関するドキュメントを参照してください
Three.js Three.js は、イマーシブエクスペリエンスを作成するための人気のある 3D ライブラリです。 three.js と例の詳細については、こちらを参照してください。
WebGL WebGL API を使用して、WebXR デバイス API に直接アクセスできます。 WebGL (Web グラフィックスライブラリ) は、プラグインを使用せずに、互換性のある Web ブラウザー内で高パフォーマンスの対話型 3D および 2D グラフィックスをレンダリングするための JavaScript API です。