Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
WebXRのOculus Questハン ドトラッキングで物を掴む話
Search
Unimakura
August 19, 2020
1
470
WebXRのOculus Questハン ドトラッキングで物を掴む話
OculusQuestのブラウザで動く WebXRコンテンツにて5本指すべてを認識するハンドトラッキング ができるようになったので、チェスを掴んでみました
Unimakura
August 19, 2020
Tweet
Share
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Side Projects
sachag
452
42k
4 Signs Your Business is Dying
shpigford
182
22k
Navigating Team Friction
lara
183
15k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
114
50k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
232
17k
Designing for Performance
lara
604
68k
The Invisible Side of Design
smashingmag
299
50k
Why Our Code Smells
bkeepers
PRO
335
57k
Transcript
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」コンポーネントを付ける <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
ハンドトラッキングで物を掴めるよ うにする 指先に「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ハンドトラッキングで物を掴む話