じゅころぐAR

ARのブログ

A-Frameのハンドトラッキングを試してみた

WebVRフレームワークのA-Frameがv1.1.0にアップデートされ、hand-tracking-controlsに対応しました。

github.com

このアップデートによりOculus Quest(Quest2)で簡単にハンドトラッキングができるようになったので早速試してみます。

f:id:jyuko49:20201213232423p:plain

公式ドキュメントを読む

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>

Oculus Browserのflag設定

Oculus Questのブラウザ(Oculus Browswer)でハンドトラッキングを利用するには、試験運用版の機能を有効にする必要があります。※本記事執筆時点

Oculus BrowserはChromiumベースなので、アドレスバーに chrome://flags と入力すると設定画面にアクセスできます。

f:id:jyuko49:20201213140035j:plain

有効にするのは、"WebXR experiences with hand and joints tracking" です。"hand"や"tracking"で検索をかけると出てきます。
これを"Default"から"Enabled"に変更します。

ブラウザを再起動すれば、ハンドトラッキングの準備完了です。

Oculus Questで手の表示

先程のHTMLをWebサーバー(Amazon S3やFirebase hostingでもOK)にアップして、Oculus Browserからアクセスします。

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オブジェクトをつまむ動作が簡単に実装できます。

ジェスチャーを検知する

せっかく指の動きが取れているのに、イベントがピンチだけだと物足りないのでジェスチャー検知っぽいことを行います。

ハンドトラッキングが行われている間、hand-tracking-controlsにボーンの情報が格納されています。この情報を使えば、指が伸びている/曲がっている、動いている/止まっているが判定できそうです。

var bones = rightHand.components['hand-tracking-controls'].bones;

詳細な実装は割愛しますが、人差し指が伸びた状態で球を作成して、上に動かしたら球に速度を与えて発射するようにしました。

さらに作り込みを行えば様々な用途に使えそうです。

Oculus Browserのデバッグ方法

ブラウザで実行するJavaScriptのデバッグでは、実行中のステータスをconsole.log()でコンソールログに出力する方法が一般的です。

Oculus Browserでのログは、USB接続したPCで出力することで確認ができます。
Debug Your Browser Content | Oculus Developers

エラーで止まってしまった際のログも確認できて便利なので、開発に活用していきましょう。

f:id:jyuko49:20201214013234p:plain

まとめ

A-Frame v1.1.0で追加されたハンドトラッキングを試してみました。
Oculus Questでのトラッキング精度は良好で、ジェスチャーイベントは少ないもののボーンの情報が取れるので、色々な用途に使えそうです。

現状のOculus Browserではflagを立てないと動作しませんが、いずれは標準化されると思うので早期の実装を期待します。