Build immersive web experiences with WebXR

ハイライト

Safari on visionOS 2.0 が WebXR 没入型 VR セッションを正式サポートしました。App Store の審査もアプリのダウンロードも不要で、Web ページから Vision Pro 上に完全没入の 3D 体験を提供できます。

主要内容

Vision Pro 向けの 3D 体験を作る従来のルートは、ネイティブ app を書くことです。開発者アカウントの登録、審査、ユーザーのダウンロード待ち——ハードルが高く、リーチも遅い。多くのチームはすでに Web サイトに 3D コンテンツ（商品展示、バーチャル展示、データ可視化）を置いていますが、2D 画面での閲覧に制限され、ユーザーが「中に入って」空間やスケールを感じることはできません。

Safari on visionOS 2.0 が WebXR サポートを導入し、これを変えます。WebXR は W3C が策定した Web 標準で、ブラウザから没入型 XR セッションを起動するためのものです。ユーザーがボタンをタップすると Safari が権限確認を表示し、その後 Web ページ内の WebGL コンテンツが視界全体を覆います。完全没入で、ネイティブ VR app と同じ効果です。Digital Crown を押すか Home Screen に戻ると終了できます。

このアプローチの最大の利点は、App Store を経由せず、インストールも不要で、Web ページを開くだけで使えることです。すでに WebGL コンテンツがある Web サイトなら、追加作業は小さい——navigator.xr が使えるか確認し、「VR に入る」ボタンを追加し、requestSession を呼んで没入モードに切り替えるだけです。visionOS は WebXR 専用に transient pointer 入力タイプも追加し、「視線＋ピンチ」の自然な操作をマッピングしつつ、視線のプライバシーを厳格に保護します。Web サイトが視線方向と手の位置を取得できるのは、ピンチした瞬間だけです。

詳細

セキュリティとプライバシー

WebXR のセキュリティ設計はスタック全体にわたります。（03:27）

HTTPS は必須：すべての WebXR コンテンツは HTTPS 経由で配信し、中間者攻撃による注入を防ぎます。
iFrame には allow="xr-spatial-tracking" が必要：第三者コード（広告など）が開発者の許可なく VR セッションを開始するのを防ぎます。
ユーザーによる開始：ボタンなどのインタラクティブ要素でユーザーが XR セッションを開始する必要があり、ページ読み込み時の自動開始はできません。
システムの終了ジェスチャは予約済み：Digital Crown と Home Screen ジェスチャは常に終了に使われ、開発者は横取りできません。
視線プライバシー：visionOS では spatial input による視線方向の露出はピンチの瞬間のみ。手の位置もピンチ中だけ見えます。

A-Frame で没入シーンを素早く構築

A-Frame は HTML 宣言型の WebGL フレームワークで、WebXR の入門に適しています。以下のコードは Vision Pro 上で空と地面のある 3D シーンを描画し、視線＋ピンチ操作に対応します。（09:02）

<html>
  <head>
    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene cursor="rayOrigin: mouse; fuse: false">
      <a-box position="0 1.6 -3" color="red"
             animation="property: rotation; to: 0 360 0; loop: true; dur: 5000">
      </a-box>
      <a-sphere position="1 1.6 -3.5" color="blue"
                animation="property: position; to: 1 2.0 -3.5; dir: alternate; loop: true; dur: 1000">
      </a-sphere>
      <a-cylinder position="-1 1.6 -3" radius="0.3" height="1" color="green"></a-cylinder>
      <a-plane position="0 0 -3" rotation="-90 0 0" width="20" height="20" color="#7BC8A4"></a-plane>
      <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

キーポイント:

<a-scene> は A-Frame のルート要素で、WebGL 描画と WebXR セッション管理を自動処理します。
cursor コンポーネントは raycaster で視線ターゲットを検出し、ピンチ時に click、mouseenter、mouseleave イベントを発火します。
3D 座標の単位はメートル——WebXR は実寸スケールを使うため、position="0 1.6 -3" は目の高さ、前方 3 メートルにオブジェクトを配置します。
animation コンポーネントは JavaScript なしでキーフレームアニメーションを追加できます。
A-Frame には組み込みの「VR に入る」ボタンがあり、タップで自動的に requestSession を呼び出します。

WebXR ライフサイクル

WebXR セッションの完全なライフサイクルは 4 段階です。（10:48）

// 1. 检测支持
if (navigator.xr) {
  const supported = await navigator.xr.isSessionSupported("immersive-vr");
  if (supported) {
    // 显示"进入 VR"按钮
  }
}

// 2. 请求会话
const session = await navigator.xr.requestSession("immersive-vr", {
  requiredFeatures: ["local-floor"],
  optionalFeatures: ["hand-tracking"]
});

// 3. 建立渲染循环
const gl = canvas.getContext("webgl2");
const glLayer = new XRWebGLLayer(session, gl);
session.updateRenderState({ baseLayer: glLayer });
const refSpace = await session.requestReferenceSpace("local-floor");

session.requestAnimationFrame(function onFrame(time, frame) {
  const pose = frame.getViewerPose(refSpace);
  if (pose) {
    // 用 pose.views 渲染左右眼
  }
  session.requestAnimationFrame(onFrame);
});

// 4. 结束会话
session.addEventListener("end", () => {
  // 重新显示"进入 VR"按钮
});

キーポイント:

isSessionSupported("immersive-vr") は現在のデバイスが没入型 VR をサポートするか確認し、ブール値の Promise を返します。
requestSession の第 2 引数は feature リストです。requiredFeatures の feature が利用不可またはユーザー拒否の場合、リクエスト全体が失敗します。optionalFeatures は利用不可の場合に単に提供されず、失敗にはなりません。可能な限り optional を使いましょう。
local-floor 参照空間は座標原点をユーザーの足元付近に置き、立位体験に適しています。
WebXR の requestAnimationFrame は window ではなく session に紐づきます。XR デバイスのリフレッシュレートがディスプレイと異なる場合があるためです。
getViewerPose(refSpace) は現在フレームのビューア姿勢を返し、WebGL 描画用の左右眼 view 行列を含みます。
セッション終了時（ユーザーが Digital Crown を押すか、開発者が session.end() を呼ぶ）、end イベントが発火し、入口ボタンを再表示できます。

Transient Pointer：visionOS の自然な入力

visionOS の「視線＋ピンチ」操作は WebXR では transient pointer にマッピングされます。（15:19）

従来の XR ヘッドセットは tracked pointer（常時追跡されるコントローラーや手）を使いますが、transient pointer はユーザーがピンチジェスチャーをしたときだけ存在します。全体の流れ：

初期状態：Web サイトはユーザーがどこを見ているか、手の位置がどこかを知りません。
ユーザーがピンチ：session.inputSources に新しい input source が追加され、targetRayMode は "transient-pointer" です。inputsourceschange と selectstart イベントが発火します。
ユーザーが手を動かす：grip space は親指と人差し指の接触点に追従し、target ray space は手の動きに追従します（視線方向の常時追跡ではありません）。
ユーザーが離す：select イベント（選択成功）が発火し、続いて selectend。input source が削除され、Web サイトは再び視線と手を感知できなくなります。

この設計はプライバシーと体験のトレードオフです。Web サイトが空間情報を取得できるのは、ユーザーが明示的に操作したときだけです。

Hand Tracking

継続的な手の追跡が必要な場合、セッション要求時に feature リストへ "hand-tracking" を追加します。（20:06）

手追跡を有効にすると、検出された手は tracked pointer として inputSources に現れます。各手には 25 個の joint space があり、WebGL でユーザーの手を描画できます。注意：手追跡を有効にすると、ユーザーの手は自分で描画する必要があります。システムは実際の手を表示しなくなります。手追跡が有効でも transient pointer は使えます——同じ体験で近距離の精密操作（手追跡）と遠距離選択（視線＋ピンチ）の両方をサポートできます。両手同時にピンチすると、最大 4 つの input source が現れる場合があります。

テストとデバッグ

開発中は visionOS シミュレーターで WebXR をテストできます。（23:21）

localhost で HTTP サーバーを起動（localhost はセキュアコンテキストで HTTPS 不要）。
WASD キーで移動、右クリックドラッグで視点回転、マウスクリックで transient pointer をシミュレート。
macOS Safari の Web Inspector でシミュレーター内のページをリモートデバッグ：console の確認、ブレークポイント設定、JavaScript のステップ実行。
手追跡はシミュレーターではテストできず、実機が必要です。

重要ポイント

何を作るか：EC サイトの商品ページに WebXR 3D プレビューモードを追加します。ユーザーが「空間で見る」ボタンをタップすると、商品モデルが Vision Pro 上で実寸スケールで表示され、歩き回って細部を近くで確認できます。なぜ価値があるか：Vision Pro ユーザーは商品の実際のサイズと質感を感知でき、2D 画像より直感的です。ネイティブ app の開発も不要です。どう始めるか：既存 3D モデルを A-Frame の宣言型マークアップでラップし、<a-scene> とモデル読み込みコンポーネントを追加し、navigator.xr.isSessionSupported("immersive-vr") を確認してから入口ボタンを表示します。
何を作るか：データ可視化ダッシュボードに没入型閲覧モードを追加します。ユーザーは 3D 空間でデータチャートを閲覧し、さまざまな角度からデータ関係を観察できます。なぜ価値があるか：空間コンピューティングデバイスは多次元データの提示に適しており、各次元を空間軸にマッピングし、頭を動かしてデータを「見る」ことができます。どう始めるか：Three.js で既存 Chart.js/D3 データを 3D ジオメトリにマッピングし、WebXR の local-floor 参照空間でチャートを地面に立て、transient pointer でデータポイントを選択します。
何を作るか：教育 Web サイト向けにインタラクティブな 3D 教材シーンを構築します。化学分子、人体解剖、建築モデルなど、学生が空間内で回転・分解・組み立てできます。なぜ価値があるか：3D 教材は平面では視点と遮蔽の制約を受けますが、空間では自由に観察し手で操作でき、学習効率が大きく向上します。どう始めるか：Babylon.js で既存 glTF/GLB モデルを読み込み、hand-tracking を有効にしてユーザーがモデル部品を直接操作し、transient pointer で遠距離選択とメニュー操作を行います。