WebVRフレームワークのA-Frameがv1.1.0にアップデートされ、hand-tracking-controlsに対応しました。
このアップデートによりOculus Quest（Quest2）で簡単にハンドトラッキングができるようになったので早速試してみます。
公式ドキュメントを読む
A-FrameのDOCSを"hand"で検索すると、hand-tracking-controlsという名称のコンポーネントがあります。
hand-tracking-controls – A-Frame
念のため、v1.0.0のドキュメントを検索してみると出てこないので、こちらがv1.1.0で追加されたコンポーネントで間違いなさそうです。
詳細なexampleはまだないですが、以下のHTMLを書くだけで表示されるような記述になっています。
<a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity> <a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
シンプルなHTMLを書いて、動作を確認してみることにします。
<html>
<head>
<script src="https://aframe.io/releases/1.1.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-entity id="leftHand" hand-tracking-controls="hand: left;"></a-entity>
<a-entity id="rightHand" hand-tracking-controls="hand: right;"></a-entity>
<a-sky color="#4CC3D9"></a-sky>
</a-scene>
</body>
</html>
※2021/2/21追記
サンプルに記載しているA-Frame v1.1.0を再度試したところ、手の3Dモデルが表示されなくなっていました。v1.2.0では正常に動作することを確認できましたので、手のモデルを表示させたい場合は1.2.0を利用してください。
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
Oculus Browserのflag設定
Oculus Questのブラウザ（Oculus Browswer）でハンドトラッキングを利用するには、試験運用版の機能を有効にする必要があります。※本記事執筆時点
Oculus BrowserはChromiumベースなので、アドレスバーに chrome://flags と入力すると設定画面にアクセスできます。
有効にするのは、"WebXR experiences with hand and joints tracking" です。"hand"や"tracking"で検索をかけると出てきます。
これを"Default"から"Enabled"に変更します。
ブラウザを再起動すれば、ハンドトラッキングの準備完了です。
Oculus Questで手の表示
先程のHTMLをWebサーバー（Amazon S3やFirebase hostingでもOK）にアップして、Oculus Browserからアクセスします。
重なりはダメだけど、トラッキング精度はよいですね🙌#aframe pic.twitter.com/MSZnI1iIWd
— jyuko🐼 (@jyuko49) 2020年12月6日
hand-trancking-controlsコンポーネントを付与した<a-entitty>を2つ作成しているだけでハンドトラッキングが行われます。
WebVRでパフォーマンスが気になるところですが、トラッキングの精度は高く、指の動きにもリアルタイムで追従します。
ただし、右手と左手が重なるとトラッキングが切れてしまう点には注意です。
イベントを利用する
hand-trancking-controlsコンポーネントに用意されているイベントはピンチだけです。
親指と人差し指で輪を作り、つまんだり拡げたりする動きでイベントが発生します。
- pinchstarted
- pinchended
- pinchmoved
イベント時に実行する処理はaddEventListenerで定義します。evant.detailにイベントの詳細が保存されており、evant.detail.positionでピンチで指をつまんだ位置が取れます。
var rightHand = document.getElementById('rightHand');
rightHand.addEventListener('pinchmoved', function (event) {
var sphere = document.getElementById('sphere');
sphere.setAttribute('position', event.detail.position);
});
このピンチイベントを利用すると、3Dオブジェクトをつまむ動作が簡単に実装できます。
今日はここまで#aframe pic.twitter.com/LiD5WSr2V5
— jyuko🐼 (@jyuko49) 2020年12月6日
ジェスチャーを検知する
せっかく指の動きが取れているのに、イベントがピンチだけだと物足りないのでジェスチャー検知っぽいことを行います。
ハンドトラッキングが行われている間、hand-tracking-controlsにボーンの情報が格納されています。この情報を使えば、指が伸びている/曲がっている、動いている/止まっているが判定できそうです。
var bones = rightHand.components['hand-tracking-controls'].bones;
詳細な実装は割愛しますが、人差し指が伸びた状態で球を作成して、上に動かしたら球に速度を与えて発射するようにしました。
ベースはできた👉💥🔵
— jyuko🐼 (@jyuko49) 2020年12月8日
ブラッシュアップしていけば、まあまあ遊べそう。#aframe pic.twitter.com/lHe9QAPyco
さらに作り込みを行えば様々な用途に使えそうです。
Oculus Browserのデバッグ方法
ブラウザで実行するJavaScriptのデバッグでは、実行中のステータスをconsole.log()でコンソールログに出力する方法が一般的です。
Oculus Browserでのログは、USB接続したPCで出力することで確認ができます。
Debug Your Browser Content | Oculus Developers
エラーで止まってしまった際のログも確認できて便利なので、開発に活用していきましょう。
まとめ
A-Frame v1.1.0で追加されたハンドトラッキングを試してみました。
Oculus Questでのトラッキング精度は良好で、ジェスチャーイベントは少ないもののボーンの情報が取れるので、色々な用途に使えそうです。
現状のOculus Browserではflagを立てないと動作しませんが、いずれは標準化されると思うので早期の実装を期待します。
