WebXR とは？

1. WebXRとは何か？

2. WebXRの使い方

はじめてWebXRを触る場合は、まずデモを実機で開き、次に対応ブラウザとデバイスを確認し、最後に使うライブラリを選ぶ順番が現実的です。iPhoneではSafari単体のWebXR AR対応に制限があるため、iOS向けにはApp Clipを使う方法もあわせて確認してください。

4. WebXR対応ブラウザ

WebXRはHTTPSなどのsecure contextで動作する実験的なWeb APIです。MDNではLimited availabilityとして扱われており、本番導入ではブラウザ互換性とfallbackを確認する必要があります。

対応状況はブラウザ・OS・端末・feature flagで変わります。最新の端末別メモはデバイスページと標準化・対応状況に分けて更新します。

5. WebXRの基本用語

6. 最小コードで見るWebXRの流れ

WebXRアプリは、対応確認、セッション開始、reference space取得、フレームループの順に組み立てます。実際の描画はThree.jsやBabylon.jsなどのライブラリに任せることが多いですが、APIの流れは次の形です。

if (!navigator.xr) {
  showFallback();
}

const supported = await navigator.xr.isSessionSupported("immersive-vr");
if (!supported) {
  showFallback();
}

const session = await navigator.xr.requestSession("immersive-vr", {
  optionalFeatures: ["local-floor", "bounded-floor"],
});

const referenceSpace = await session.requestReferenceSpace("local-floor");
session.requestAnimationFrame(function onFrame(time, frame) {
  const pose = frame.getViewerPose(referenceSpace);
  if (pose) {
    renderSceneForXR(pose);
  }
  session.requestAnimationFrame(onFrame);
});

本番では、HTTPS配信、ユーザー操作を起点にしたsession開始、権限エラー、feature未対応、WebGL/WebGPU context loss、通常表示へのfallbackを必ず扱います。

7. WebXRのModule別機能

WebXR Device APIは中核となるセッション・pose・入力・描画の仕組みを提供し、ARやhand tracking、hit test、layers、depth sensingなどは追加Moduleとして整理されています。実装時は「WebXR対応ブラウザか」だけでなく、「必要なModuleがその端末で使えるか」を分けて確認します。

8. WebXR実装チェックリスト

9. WebXRのよくある質問

10. 目標と非目標

11. 対象ハードウェア

12. XRの「X」とは？

13. ユースケース

14. なぜ新しいAPIが必要だったのか

15. WebVRとWebXRの違い

16. OpenXRとの関係

OpenXRはネイティブ向けの標準APIです。WebXRと多くの概念を共有しており、ブラウザのバックエンドとして活用されます。