Input中級約45分分

ハンドトラッキングサンプル

WebXR Hand Tracking APIを使った基本的なジェスチャー認識

#hand-tracking#gesture#input

対応フレームワーク

three.js

対応デバイス

Meta Quest 3Meta Quest Pro

ハンドトラッキングサンプル

WebXR Hand Tracking APIを使った基本的なジェスチャー認識の実装例です。

概要

この実験では、Meta Quest 3/ProのハンドトラッキングAPIを使用して、以下のジェスチャーを検出します:

  • ピンチジェスチャー (親指と人差し指)
  • グラブジェスチャー (手を握る)
  • ポイントジェスチャー (人差し指を伸ばす)

技術仕様

使用API

  • XRSession.requestReferenceSpace('local')
  • XRFrame.getJointPose()
  • XRHand インターフェース

ブラウザ対応

  • Chrome 112+ (Android)
  • Quest Browser 112+

必要なフィーチャー

javascript
navigator.xr.requestSession("immersive-vr", {
	requiredFeatures: ["hand-tracking"],
});

実装のポイント

1. ハンドトラッキングの初期化

セッション作成時に hand-tracking フィーチャーをリクエストします。

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

2. ジョイント位置の取得

各フレームで、手のジョイント位置を取得します。

javascript
const inputSource = session.inputSources[0];
if (inputSource.hand) {
	const indexTip = inputSource.hand.get("index-finger-tip");
	const thumbTip = inputSource.hand.get("thumb-tip");

	if (indexTip && thumbTip) {
		const indexPose = frame.getJointPose(indexTip, referenceSpace);
		const thumbPose = frame.getJointPose(thumbTip, referenceSpace);
		// ピンチ判定
	}
}

3. ジェスチャー判定

ジョイント間の距離でジェスチャーを判定します。

javascript
function detectPinch(indexPose, thumbPose) {
	const distance = indexPose.transform.position.distanceTo(
		thumbPose.transform.position,
	);
	return distance < 0.03; // 3cm以内でピンチと判定
}

学んだこと

  1. ジョイント追跡の精度: Quest 3は非常に高精度なトラッキングを提供
  2. パフォーマンス: 25個のジョイント × 両手 = 50個のポーズ計算が毎フレーム必要
  3. ジェスチャー検出の閾値: 環境や手の大きさによって調整が必要

参考リンク

デモ

実際のデモは demo.bangeo.net で体験できます。

デモを試す