WebXR サンドボックス

WebXR の試作をまとめたフォルダ。navigator.xr.requestSession() を使う最小構成と、AR で投げるデモを確認できる。

動かし方

WebXR はセキュアコンテキスト必須なので、次のどちらかで開く。

# 方法1: このフォルダで起動スクリプトを実行（推奨）
./serve.sh

# 方法2: 手動で Python サーバーを起動
python3 -m http.server 3000
# http://localhost:3000

ファイルを直接開く（file://）では WebXR は動かない。

デモの確認方法

• セッション雛形（VR/AR ボタン）: http://localhost:3000/
• AR 投げデモ: http://localhost:3000/throw-demo.html

1) セッション雛形の確認

1. http://localhost:3000/ を開く
2. 画面下の VR を開始 / AR を開始 を押す
3. 左上ステータスで対応可否とセッション開始メッセージを確認する

2) AR 投げデモの確認

1. http://localhost:3000/throw-demo.html を開く
2. 「捨てるもの」を選んで AR を開始 を押す
3. AR 中にタップ（またはクリック）で的を置く
4. もう一度タップ（またはクリック）してボールが弧を描いて飛ぶことを確認する

雛形でやっていること

1. 対応チェック … navigator.xr.isSessionSupported('immersive-vr' | 'immersive-ar')
2. セッション開始 … navigator.xr.requestSession(mode, options)（js/xr/session.js の startSession）
3. レンダラーと紐付け … renderer.xr.setSession(session)
4. 基準空間 … session.requestReferenceSpace('local-floor')
5. ループ … renderer.setAnimationLoop(callback) で毎フレーム描画

VR/AR ボタンが「VR を開始」「AR を開始」の入口になっている。

テストのヒント

• 実機なし: Chrome の Immersive Web Emulator で VR/AR をエミュートできる。
• AR: Android は Chrome + ARCore、iOS は WebXR Viewer など対応ブラウザが必要。