WebXR Body Tracking — 全身トラッキング関節を点と線で可視化

WebXR Body Tracking proposal の body-tracking feature を要求し、XRFrame.body から取得した全身関節を点と線で表示する実験です。

このデモはアバター制御の完成形ではありません。まず requestSession() が通るか、frame.body が返るか、関節ごとの getPose() がどれくらい取れるかを実機で切り分けるための最小サンプルです。

通常プレビュー

試せること

• immersive-vr / immersive-ar の対応状態を確認する
• requiredFeatures: ["local-floor", "body-tracking"] でXRセッションを開始する
• XRFrame.body の有無、body.size、追跡できた関節数をHUDで見る
• 取得できた関節位置をWebGLの点と線として表示する

学べること

Body Trackingは、通常のヘッドセット姿勢やコントローラー入力よりも端末依存が強い機能です。

セッション開始時に body-tracking feature が許可されても、各フレームで常に全関節が安定して取れるとは限りません。実装側では frame.body が null になる場合、XRBody.get() が返らない関節、frame.getPose() が null を返す関節をそれぞれ分けて扱う必要があります。

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

const bodySpace = frame.body.get("hips");
const pose = frame.getPose(bodySpace, referenceSpace);

対応環境

実機で確認すること

Body TrackingはWebXR全体のproposalですが、ブラウザや端末で同じように使える標準機能として扱える段階ではありません。実際の可否はOS、ブラウザ、対象デバイス、外部トラッカーや権限の設定に依存します。

PICO DeveloperのWebXRドキュメントでは、PICO Motion Trackerを使ったWebXR Full Body Trackingへの対応が案内されています。そのため、PICO Browser / PICO Web App はこのデモを試す有力な検証環境です。

実機で見る時は、まず immersive-vr で確認してください。MRパススルーが必要な場合だけ immersive-ar を選びます。requestSession() が失敗した場合は、エラー名とメッセージをログで確認します。

実装メモ

• XRモード: immersive-vr 優先、immersive-ar は選択式
• 必須機能: local-floor, body-tracking
• 任意機能: hand-tracking
• 描画: WebGLで床グリッド、関節点、主要ボーンを描画
• フォールバック: 非対応時はログに失敗理由を表示

注意点

WebXR Body Tracking ModuleはCommunity Group Draftの段階です。API名、関節名、許可フロー、プライバシー要件、ブラウザ実装は変わる可能性があります。公開デモや制作案件では、Body Trackingが使えない場合の通常VR表示、コントローラー操作、Hand Tracking表示などを別ルートとして用意しておくのが安全です。

関連リンク

• PICO WebXR Overview
• PICO Body Tracking
• WebXR Body Tracking explainer
• WebXR Body Tracking Module draft
• WebXR標準化・対応状況