WebXR ハンド トラッキングの基本的な使い方や、デバイス、フレームワークの対応状況について調べたことを共有します。

1. WebXR Hand Input
(ハンド トラッキング) 入門
2020/08/24 WebXR Tokyo #2
ユスキィ (Yusuke Hara) @ms_yuhara

2. 自己紹介
•マイクロソフトのブラウザーの中身をサポートする人
• Microsoft Edge と Internet Explorer のソースと格闘
•Bot Framework と Azure Bot Service も守備範囲
•Twitter をつい最近始めた (@ms_yuhara)
• フォロワーさん少なくてさびしいので絡んでくれると嬉しい
• #観測者花組、#観測者ヰ組、観測者とつながりたい

3. WebXR Hand Input Module とは？
•多関節ハンド ポーズをトラッキングする機能を定義した
WebXR Device API を拡張する仕様
•W3C による標準化を目指して現時点では Editor’s Draft
(16 August 2020)
•ベースとなる WebXR Device API 自体は W3C Working
Draft (24 July 2020)

4. WebXR Hand Input 対応ブラウザー
•Oculus Browser 10.2 以降
• Oculus Quest の設定でハンド コントロールを有効にする
• Oculus Browser の chrome://flags で WebXR
experiences with joints tracking (#webxr-hands) を有効
にする
•Firefox Reality for HoloLens 2
• 実機がまだ入手できず未検証…

5. WebXR Hand Input API へのアクセス
•XRInputSource の hand 属性 (XRHand) が null かど
うかをチェック (サポートしていない場合は null)
•物理的な手を表現する XRHand は Joint の位置と向きを
表す XRJointSpace の集合でできた Skeleton Joints
•手のポーズは XRFrame から getJointPose(joint,
baseSpace) メソッドで取得

6. Skeleton Joints
• 指先と手首以外の Joint は関
連付けられたボーンを持つ
• Joint のインデックスやボーンの
部分にメッシュを作成することで
WebXR の空間上に手を模した
オブジェクトを表示することがで
きる

7. ポーズを取得して手のメッシュを表示する

8. 様々な手の表現

9. 所感と課題
•ハンド トラッキングの精度は非常に高い
•Joint 間の距離から様々なジェスチャーを識別できる
• 例えば「つまむ」なら親指 (Thumb) と人差し指 (Index) の先端
(Tip) の距離が 0.01 など
•両手をくっつけてしまうとトラッキングできなくなる
•(当然だが) 物理的な手への感覚のフィードバックがない

10. フレームワークの対応状況
•Three.js - r119 で公式にサポート
•Babylon.js - 対応中 (Coming very soon)
• Pull Request マージ済み (8 月 18 日時点)
• WebXRHandTracking という Feature が追加されている
•A-Frame - 対応中
• hand-tracking-controls という新しいコンポーネントが a-
entity として追加される模様

11. Three.js に
よる実装
•XRHandModelFactory からハンド
モデルを生成
• 既定で複数のモデルが用意されている
•現時点で pinchstart / pinchend の
イベントが使える

12. 対応デバイスをお持ちの方は
実際に試してみてね！

13. 参考リソース
•WebXR Hand Input Module - Level 1
•WebXR Hand Input (Repository)
•Three.js: WebXR Hand Input API support
•Babylon.js: WebXR Hand Tracking - initial support
•A-Frame: WebXR hand tracking support