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
460
WebXRのOculus Questハン ドトラッキングで物を掴む話
OculusQuestのブラウザで動く WebXRコンテンツにて5本指すべてを認識するハンドトラッキング ができるようになったので、チェスを掴んでみました
Unimakura
August 19, 2020
Tweet
Share
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
65
4.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
25
1.8k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
504
140k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
27
1.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Music & Morning Musume
bryan
46
6.1k
Statistics for Hackers
jakevdp
796
220k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
Thoughts on Productivity
jonyablonski
67
4.3k
Navigating Team Friction
lara
183
14k
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ハンドトラッキングで物を掴む話