Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WebXRのOculus Questハン ドトラッキングで物を掴む話

Unimakura
August 19, 2020
460

WebXRのOculus Questハン ドトラッキングで物を掴む話

OculusQuestのブラウザで動く WebXRコンテンツにて5本指すべてを認識するハンドトラッキング ができるようになったので、チェスを掴んでみました

Unimakura

August 19, 2020
Tweet

Transcript

  1. 注意 @marlon360 さんのサンプルを使うには A-FRAMEのリリースバージョンの1.04より 新しいものが必要。 下記のいずれかで対応 @marlon360 さんのリポジトリに入ってい る aframe-master.js

    をそのまま使う 公式リポジトリの dist の中から持ってく る https://github.com/aframevr/aframe/tree/ master/dist 8 WebXRのOculus Questハンドトラッキングで物を掴む話
  2. ざくっと解説 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ハンドトラッキングで物を掴む話
  3. Grab コンポーネントを使う 12 VRコントローラーで物を掴む grab というコン ポーネントがA-FRAME Extraにあるが、当然ハ ンドトラッキングは未対応 これをハンドトラッキングでも使えたら良さそ

    う ハンドトラッキングでも使えるようにするた め、両者をつなぐ部分のコードを書く WebXRのOculus Questハンドトラッキングで物を掴む話
  4. 判定方法 14 親指の先(THUMB_PHALANX_TIP )と 人差し指の先(INDEX_PHALANX_TIP )の 距離で判定する 摘まんだ状態 二点間の距離が 一定値以下

    の状態 離した状態 二点間の距離が 一定値以上 の状態 ※一定値には差をつけ、多少ブレても掴んだ り離したりが連続で起こらないようにする WebXRのOculus Questハンドトラッキングで物を掴む話
  5. 判定方法の実装 position 間の距離は three.js の「distanceTo」 で取得できる // 人差し指の先と親指の先の距離を取得 distance =

    indexTip.position.distanceTo(thumbTip.position); 15 この distance をチェックし、 つまんでいる or 離しているを判別 判別出来たら、摘まんだ時に grab する WebXRのOculus Questハンドトラッキングで物を掴む話
  6. VRコントローラーで物を掴む場合 の挙動 VRコントローラーに「sphere-collider」と 「grab」コンポーネントを付ける <a-entity static-body="shape: sphere; sphereRadius: 0.02;" oculus-touch-controls="hand:

    right" sphere-collider="objects: .throwable" grab ></a-entity> VRコントローラーのトリガーを握ると 「triggerdown」イベントが発火する 「sphere-collider」 にぶつかっているオブ ジェクトを掴んでくれる ↑をハンドトラッキングでも同様に行う WebXRのOculus Questハンドトラッキングで物を掴む話 16
  7. ハンドトラッキングで物を掴めるよ うにする 指先に「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
  8. ハンドトラッキングで物を離せるよ うにする 摘まむ時と同様に、指を離した状態になっ たら「triggerup」を発火 // 指の間隔が一定値以上の場合は離す if (distance >= 0.035)

    { hand[XRHand.THUMB_PHALANX_TIP].emit('triggerup'); } これで離すことができた 18 WebXRのOculus Questハンドトラッキングで物を掴む話