WebXRのOculus Questハン ドトラッキングで物を掴む話 1 うにまくら（@e_unimakura） WebXRのOculus Questハンドトラッキングで物を掴む話 

自己紹介 うにまくら（@e_unimakura） この春から仕事でもXRやってたりします Love xR WebXRのOculus Questハンドトラッキングで物を掴む話 2 

3 作ったもののデモ動画はTwitterで見てください↓ WebXRのOculus Questハンドトラッキングで物を掴む話 https://twitter.com/e_unimakura/status/1293460017211830273 

話す内容 A-FRAMEを使ったOculusQuestのブラウ ザで動く、ハンドトラッキングの試し⽅ また、その際の注意点 ハンドトラッキングで物を掴む機能の実装 WebXRのOculus Questハンドトラッキングで物を掴む話 4 

きっかけ 5 7月下旬にOculusQuestのブラウザで動く WebXRコンテンツにて 5本指すべてを認識するハンドトラッキング ができるようになった MoguLive https://www.moguravr.com/oculus-browser- webxr-hand-tracking-support/ WebXRのOculus Questハンドトラッキングで物を掴む話 

A-Frame でやってみる 6 WebXRのOculus Questハンドトラッキングで物を掴む話 

コンポーネントはまだない 7 ハンドトラッキングはA-FRAMEとしてはまだ 対応されていないが、 @marlon360 さんが Githubに公開しているコードにて確認可能 WebXR Hand Tracking https://github.com/marlon360/webxr- handtracking WebXRのOculus Questハンドトラッキングで物を掴む話 

注意 @marlon360 さんのサンプルを使うには A-FRAMEのリリースバージョンの1.04より 新しいものが必要。 下記のいずれかで対応 @marlon360 さんのリポジトリに入ってい る aframe-master.js をそのまま使う 公式リポジトリの dist の中から持ってく る https://github.com/aframevr/aframe/tree/ master/dist 8 WebXRのOculus Questハンドトラッキングで物を掴む話 

ざくっと解説 inputSource.hand にて W3C の『WebXR Hand Input Module』に記述されている片手25個の Joint情報を取得できる let joint = inputSource.hand[joint]; そこにSphereを描画している 9 WebXR Hand Input Module - Level 1 https://immersive-web.github.io/webxr-hand- input/ WebXRのOculus Questハンドトラッキングで物を掴む話 

詳細はこちらも参照 10 WebXR Device API - Hand Input https://github.com/immersive-web/webxr- hand-input/blob/master/explainer.md WebXRのOculus Questハンドトラッキングで物を掴む話 

まだ掴めない 11 ただ、これだけではまだ物を掴んで動かすとい うことができないので、追加で対応が必要 WebXRのOculus Questハンドトラッキングで物を掴む話 

Grab コンポーネントを使う 12 VRコントローラーで物を掴む grab というコン ポーネントがA-FRAME Extraにあるが、当然ハ ンドトラッキングは未対応 これをハンドトラッキングでも使えたら良さそ う ハンドトラッキングでも使えるようにするた め、両者をつなぐ部分のコードを書く WebXRのOculus Questハンドトラッキングで物を掴む話 

掴む判定 13 チェスなので、親指と人差し指でつまむ形でも のを掴みたい つまんだ or 離したという状態はAPIにないの で、まずはこの処理を書く WebXRのOculus Questハンドトラッキングで物を掴む話 

判定方法 14 親指の先（THUMB_PHALANX_TIP ）と 人差し指の先（INDEX_PHALANX_TIP ）の 距離で判定する 摘まんだ状態 二点間の距離が 一定値以下 の状態 離した状態 二点間の距離が 一定値以上 の状態 ※一定値には差をつけ、多少ブレても掴んだ り離したりが連続で起こらないようにする WebXRのOculus Questハンドトラッキングで物を掴む話 

判定方法の実装 position 間の距離は three.js の「distanceTo」 で取得できる // 人差し指の先と親指の先の距離を取得 distance = indexTip.position.distanceTo(thumbTip.position); 15 この distance をチェックし、 つまんでいる or 離しているを判別 判別出来たら、摘まんだ時に grab する WebXRのOculus Questハンドトラッキングで物を掴む話 

VRコントローラーで物を掴む場合 の挙動 VRコントローラーに「sphere-collider」と 「grab」コンポーネントを付ける VRコントローラーのトリガーを握ると 「triggerdown」イベントが発火する 「sphere-collider」 にぶつかっているオブ ジェクトを掴んでくれる ↑をハンドトラッキングでも同様に行う WebXRのOculus Questハンドトラッキングで物を掴む話 16 

ハンドトラッキングで物を掴めるよ うにする 指先に「sphere-collider」と「grab」コン ポーネントを付ける hand[XRHand.THUMB_PHALANX_TIP].setAttribute('sphere-collider',{ objects: '.grabbable' }); hand[XRHand.THUMB_PHALANX_TIP].setAttribute('grab', {}); 摘まんだ状態になったら「triggerdown」 イベントを発火 // 指の間隔が一定値以下の場合は摘まむ if (distance <= 0.02) { hand[XRHand.THUMB_PHALANX_TIP].emit('triggerdown'); } これで摘まむことができた WebXRのOculus Questハンドトラッキングで物を掴む話 17 

ハンドトラッキングで物を離せるよ うにする 摘まむ時と同様に、指を離した状態になっ たら「triggerup」を発火 // 指の間隔が一定値以上の場合は離す if (distance >= 0.035) { hand[XRHand.THUMB_PHALANX_TIP].emit('triggerup'); } これで離すことができた 18 WebXRのOculus Questハンドトラッキングで物を掴む話 

課題 Oculus Quest側の問題だが、認識制度が 少 し物⾜らない ⼿の⾓度によっては認識できない 意図せず離してしまうことがある ⼿が重なったときは認識できない 例えば、両⼿がクロスする影絵遊びのよう なものは出来ない 19 WebXRのOculus Questハンドトラッキングで物を掴む話 

最後に ハンドトラッキングは直感的に操作できるの で、体感として良い 普段ゲームをしない人にも優しい （本題ではないが）WebXRはインストールし なくていいのが利用者側的にはメリット WebXRで出来ることが増えたら、XRの普及に も一役買いそうだと期待 20 WebXRのOculus Questハンドトラッキングで物を掴む話 

参考など https://www.moguravr.com/oculus-browser-webxr-hand-tracking-support/ https://aframe.io/ https://github.com/marlon360/webxr-handtracking https://immersive-web.github.io/webxr-hand-input/ https://github.com/immersive-web/webxr-hand-input/blob/master/explainer.md デモページ https://unitest.glitch.me/ 21 WebXRのOculus Questハンドトラッキングで物を掴む話