WebXR Device API（ウェブエックスアールデバイスエーピーアイ）
W3C WebXR Device API。Web ブラウザから VR / AR / MR デバイス(Meta Quest / Apple Vision Pro / Microsoft HoloLens)を統合呼び出しできる API、Three.js / A-Frame / Babylon.js 経由で没入 Web 体験実装。
概要
WebXR Device API(ウェブエックスアール デバイス エーピーアイ、別称 WebXR API、WebXR)は、W3C(World Wide Web Consortium)が 2018 年から策定 + 2020 年に勧告候補化、2024 年に主要ブラウザで実装公開された、Web ブラウザから VR(Virtual Reality)/ AR(Augmented Reality)/ MR(Mixed Reality)/ XR(Cross/Extended Reality)デバイスを統合的に呼び出すことができる JavaScript API 標準仕様です。
仕様策定の歴史は、(1)2017 年に WebVR 1.0 仕様が公開(Mozilla / Google / Microsoft 主導、Oculus Rift / HTC Vive 対応)・(2)2018 年に WebVR 2.0 + AR 統合の必要性で WebXR Device API として再設計開始・(3)2020 年に W3C Candidate Recommendation(勧告候補)・(4)2024 年に主要ブラウザでフル実装公開 + 機能拡張継続中、という流れです。Mozilla / Google / Apple / Microsoft / Meta / Samsung / Magic Leap 等の主要ブラウザベンダー + XR ハードウェアベンダーが共同で策定を進めています。
最大の特徴は、多様な XR デバイスの統合的な抽象化です。Meta Quest 2 / 3 / Pro(VR + ハンドトラッキング)・Apple Vision Pro(VR + AR、4K MicroOLED ディスプレイ + 12 個のカメラ + LiDAR + 視線追跡)・Microsoft HoloLens 2(MR、空間マッピング + 手指追跡)・Pico 4 / Pico 4 Ultra(VR + MR)・Magic Leap 2(AR、屈折率変調光導波路ディスプレイ)・Snapdragon AR 系眼鏡・Lenovo ThinkReality A3(AR)などの異なるハードウェアを、共通の JavaScript API でアクセスできます。
提供される主要機能は、(1)6DoF(6 Degrees of Freedom、頭の位置 + 回転 + 体の前後左右上下)トラッキング・(2)ハンドコントローラトラッキング(Meta Quest Touch、Vive コントローラ等)・(3)ハンドトラッキング(指の動きをカメラで追跡)・(4)視線追跡(Apple Vision Pro / HTC Vive Pro Eye 等)・(5)平面検出(床 / 壁 / 机の自動認識)・(6)空間アンカー(物理空間に仮想物体を固定)・(7)光推定(現実の光環境を推定)・(8)パススルー(VR 内で現実映像を表示)・(9)ヒットテスト(現実物体との衝突判定)などです。
主要フレームワーク + ライブラリは、Three.js + WebXR API(直接利用)・A-Frame(HTML 風 VR / AR シーン記述)・Babylon.js(VR / AR ゲームエンジン)・PlayCanvas(WebXR 対応)・Unity WebGL + WebXR(C# でゲーム開発)・8th Wall(商用 AR Web 開発、Niantic 買収)などです。これらを使うことで、Web 開発者が VR / AR / MR 体験を Web 上で実装できます。
主な採用シナリオは、(1)Web 上の VR ゲーム + 体験(Mozilla Hubs、Spatial、ZeroSpace 等の Web VR ソーシャル)・(2)WebVR ショッピング(Apple Vision Pro 用 Web VR 展示、Amazon の AR 試着)・(3)Web AR マーケティング(Snapchat / TikTok の AR フィルタの Web 版)・(4)バーチャルツアー(美術館 / 不動産 / 旅行)・(5)教育 + トレーニング(医療シミュレーション、機械学習)・(6)エンタープライズ XR(製造業 + 設計レビュー + 遠隔保守)・(7)WebXR Hands API + Three.js でのインタラクティブシーン構築、などです。
実装状況は、Chrome 79+(2020 年公開)/ Edge 79+ / Firefox(限定対応)/ Safari(2024 年 visionOS 対応)/ Meta Quest Browser(Quest 専用ブラウザ)/ Pico Browser などで対応が進んでおり、特に 2024 年の Apple Vision Pro 発売 + Meta Quest 3 普及で WebXR の需要が大幅に拡大しています。Apple は visionOS の Safari + WebXR フル対応を 2024 年から展開し、Web 開発者が Vision Pro 用没入アプリを Web 技術で構築できる環境が整いました。
主な特徴・仕組み
- 策定: W3C Immersive Web Working Group + W3C Immersive Web Community Group。
- 公開: 2018 年 WebVR 2.0 + AR 統合として開始、2020 年勧告候補、2024 年広範実装。
- 対応デバイス: Meta Quest 2/3/Pro、Apple Vision Pro、HoloLens 2、Pico 4、Magic Leap 2、Snapdragon AR 系。
- 主要機能: 6DoF トラッキング / ハンドトラッキング / 視線追跡 / 平面検出 / 空間アンカー。
- フレームワーク: Three.js / A-Frame / Babylon.js / PlayCanvas / Unity WebGL + WebXR / 8th Wall。
- 実装ブラウザ: Chrome 79+ / Edge 79+ / Safari(visionOS 2024+)/ Meta Quest Browser / Pico Browser。
- 拡張モジュール: WebXR Hand Input、WebXR Plane Detection、WebXR Anchors、WebXR Layers、WebXR Lighting Estimation。
- 主な用途: VR ゲーム / Web AR / バーチャルツアー / WebVR ソーシャル / エンタープライズ XR。
- Apple Vision Pro 対応: visionOS 1.0 (2024) + Safari でフル対応、Web 開発者は HTML/CSS/JS で Vision Pro アプリ構築可能。
- 主要採用例: Mozilla Hubs、Spatial、Niantic 8th Wall、Apple Vision Pro Web 展示。
WebXR / 競合 XR 開発技術 比較
| 技術 | プラットフォーム | 開発者向け | 配布 |
|---|---|---|---|
| WebXR | クロスプラットフォーム | Web 開発者 | Web 経由 |
| Unity XR Plugin | クロス(ネイティブ) | Unity 開発者 | アプリストア |
| Unreal Engine VR | クロス(ネイティブ) | Unreal 開発者 | アプリストア |
| Apple visionOS SDK | Vision Pro 専用 | Swift 開発者 | App Store |
| Meta Horizon SDK | Quest 専用 | C++/Unity 開発者 | Quest Store |
自作PCユーザー向けの注意点
WebXR は VR / AR / MR ヘッドセットを所有するユーザーが Web ブラウザ経由で没入体験を楽しむ技術です。Meta Quest 3 / 3S(¥75,000-87,000)・Apple Vision Pro(¥600,000-)・Pico 4 Ultra(¥80,000)などのヘッドセットを持っていれば、各ヘッドセット専用ブラウザ(Meta Quest Browser / Apple Safari for visionOS / Pico Browser)で WebXR 対応サイトにアクセスして没入 Web 体験が可能です。
ホビー / 開発学習用途では、Three.js + WebXR API + A-Frame の組み合わせで自宅 PC + Meta Quest 経由で WebVR / AR シーンを実装可能で、特別なソフトウェアライセンスなしに無料で開発できます。Chrome / Edge 上の WebXR Emulator 拡張機能で、ヘッドセットなしでも WebXR シーンの動作確認が可能です。
関連用語との違い
- WebVR: WebXR の前身 API、VR 特化。WebXR は VR + AR + MR 統合。
- OpenXR: ネイティブアプリ用 XR API、WebXR は Web 用。
- A-Frame: HTML 風 VR / AR シーン記述ライブラリ、WebXR の上位フレームワーク。
- Three.js: 3D ライブラリ、WebXR API と統合可能。
- Apple visionOS: Vision Pro の OS、Safari 経由で WebXR フル対応。
よくある質問(FAQ)
Q1: WebXR はネイティブアプリと比べてどうですか? A: 性能はネイティブ(Unity / Unreal Engine)に劣りますが、配布の容易性 + クロスプラットフォーム + アプリストア審査不要 + 即時アクセスなど Web の利点があります。簡単な VR / AR 体験 + マーケティング + 教育 + 軽量ゲームには WebXR が適しており、本格的な VR ゲーム + エンタープライズ XR にはネイティブが優位です。
Q2: Apple Vision Pro で WebXR は使えますか? A: 使えます。visionOS 1.0(2024 年 2 月発売)+ Safari でフル WebXR 対応、Web 開発者は HTML / CSS / JS で Vision Pro 用没入アプリを構築可能です。Apple 自身が WebXR を visionOS の主要開発プラットフォームのひとつとして位置付けています。
Q3: 自作 PC + Meta Quest 3 で WebXR を試す方法は? A: Meta Quest 3 を PC に Meta Quest Link 経由で接続し、Chrome / Edge ブラウザ上で webxrexperiments.com 等の WebXR デモサイトにアクセスすれば没入 Web 体験を試せます。Three.js + WebXR API のサンプルコードも GitHub で多数公開されており、無料で開発学習可能です。
まとめ
- W3C 2018-2024 策定の Web 上 VR / AR / MR API
- Meta Quest / Apple Vision Pro / HoloLens 等を統合呼出
- Three.js / A-Frame / Babylon.js 経由で没入 Web 体験
- Apple Vision Pro + Meta Quest 3 で需要急拡大