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
The Invisible Side of Design
smashingmag
298
50k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
0
100
Gamification - CAS2011
davidbonilla
80
5k
Designing for Performance
lara
604
68k
It's Worth the Effort
3n
183
27k
A Tale of Four Properties
chriscoyier
156
23k
Music & Morning Musume
bryan
46
6.2k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
506
140k
Ruby is Unlike a Banana
tanoku
97
11k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Imperfection Machines: The Place of Print at Facebook
scottboms
265
13k
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ハンドトラッキングで物を掴む話