JavaScript を使用した WebXR 開発
JavaScript は、世界で最も人気のあるプログラミング言語の 1 つです。 シンプルで軽量であり、Web 上で広く使用されています。 JavaScript と Web のスキルの活用して、より魅力的な Mixed Reality エクスペリエンスを作成してください。
Web 上の Mixed Reality アプリケーション
WebXR を使用すると、Web 上で Mixed Reality 機能を使用できます。 追加のソフトウェアやプラグインをインストールしなくとも、互換性のある WebXR 対応のブラウザーで仮想現実 (VR) や拡張現実 (AR) コンテンツを確認できます。 HoloLens 2 のような物理デバイスで同じブラウザーを使用できます。
WebXR Device API は、Web 上の仮想現実 (VR) デバイスおよび拡張現実 (AR) デバイス (センサーやヘッドマウントされたディスプレイなど) にアクセスするために使用します。 WebXR Device API は Microsoft Edge と Chrome バージョン 79 で使用でき、それ以降のバージョンでは WebXR が既定としてサポートされます。 WebXR のブラウザーの最新のサポート状態は、caniuse.com で確認できます。
Note
WebVR は、非推奨とされており、現在のブラウザーでは使用できないため、新しい開発には使用できません。 既存の WebVR の実装を WebXR に移行する必要があります。
| 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 です。 |
 |
参照
- WebXR Device API の仕様
- WebXR Device API のドキュメント
- WebXR のサンプル
- Immersiveweb.dev
- Babylon.js を使用した WebXR エクスペリエンスの作成
- WebGL API
- ゲームパッドの API とゲームパッドの拡張機能
- Windows Mixed Reality と新しい Microsoft Edge
- WebGL での失われたコンテキストの処理
- Pointerlock
- glTF
- イマーシブ Web コミュニティ グループ
- イマーシブ Web W3C Github