JavaScript を使用した WebXR 開発
重要
WebVR は非推奨であり、現在のブラウザーでは使用できないため、新しい開発には使用しないでください。 既存の WebVR 実装を WebXR に移行する必要があります。
WebXR は引き続き使用できます。 ただし、 WebXR のサポートは廃止され (バグ修正、コンテンツの更新、テクニカル サポートは行われません)、アプリケーションが長期間にわたって動作し続ける保証はありません。
JavaScript は、世界で最も人気のあるプログラミング言語の 1 つです。 シンプルで軽量で、Web 上で広く使用されています。 JavaScript と Web スキルの力を適用して、より魅力的なMixed Realityエクスペリエンスを作成します。
Web 上のアプリケーションをMixed Realityする
Mixed Reality機能は、WebXR を介して Web で利用できます。 ソフトウェアやプラグインをインストールすることなく、互換性のある WebXR 対応ブラウザーで仮想現実 (VR) と拡張現実 (AR) のコンテンツを確認できます。 同じブラウザーを、HoloLens 2などの物理デバイスで使用できます。
WebXR Device API は、センサーやヘッドマウント ディスプレイを含む仮想現実 (VR) デバイスと拡張現実 (AR) デバイスに Web 上でアクセスするための API です。 WebXR デバイス API は Microsoft Edge および Chrome バージョン 79 で使用でき、それ以降のバージョンでは既定で WebXR がサポートされています。 WebXR の最新のブラウザー サポート状態は、caniuse.com でチェックできます。
| WebXR 機能 | Availability |
|---|---|
| WebXR Device API (w3.org) | Windows デスクトップ上の Edge 81 HoloLens 2の Edge 91 |
| WebXR 拡張現実モジュール - レベル 1 (w3.org) | Edge 91。 HoloLens 2のみ |
| WebXR ハンド入力モジュール - レベル 1 (w3.org) | Edge 93。 HoloLens 2のみ |
| WebXR アンカー モジュール (immersive-web.github.io) | Edge 93。 HoloLens 2のみ |
| WebXR ヒット テスト モジュール (immersive-web.github.io) | Edge 93。 HoloLens 2のみ |
WebXR の表示
WebXR エクスペリエンスは、新しい Microsoft Edge ブラウザーと Firefox Reality ブラウザーを使用してWindows Mixed Realityで表示できます。 ブラウザーで 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!" アプリを作成する |
|
|
フレーム フレームは、Web 上の Virtual Reality の使用を開始するために使用できる宣言型 JavaScript フレームワークです。 詳細については、A-Frame ドキュメントをチェック |
|
|
Three.js Three.js は、イマーシブ エクスペリエンスを作成するための一般的な 3D ライブラリです。 three.js の詳細を確認し、例を調べる。 |
|
|
WebGL WebGL API を使用して、WebXR デバイス API に直接アクセスできます。 WebGL (Web グラフィックス ライブラリ) は、プラグインを使用せずに、互換性のある Web ブラウザー内で高パフォーマンスの対話型 3D および 2D グラフィックスをレンダリングするための JavaScript API です。 |
|
関連項目
- WebXR Device API の仕様
- WebXR デバイス API のドキュメント
- WebXR サンプル
- Immersiveweb.dev
- Babylon.js を使用して WebXR エクスペリエンスを作成する
- WebGL API
- ゲームパッド API と ゲームパッド拡張機能
- Windows Mixed Realityと新しい Microsoft Edge
- WebGL での失われたコンテキストの処理
- Pointerlock
- glTF
- イマーシブ Web コミュニティ グループ
- イマーシブ Web W3C Github