見出し画像

Magic Leap2 の WebXR Hand Tracking （WebXR ハンドトラッキング）をA-Frameで実装してみた。

Sadao Tokuyama

はじめに

この記事は、Magic Leap2 Advent Calendar 2022 の21日目です。
Magic Leap2 を使って、WebXR の ハンドトラッキング の実装をA-Frameで行います。

OnePlanet XR について

https://1planet.co.jp/xrconsulting.html

このブログ記事は OnePlanet XR によるものです。
OnePlanet XR は、AR/MR/VPS技術に専門特化したコンサルティングサービスです。豊富な実績を元に、AR/MR技術を活用した新たな事業の立ち上げ支援や、社内業務のデジタル化/DX推進など、貴社の必要とするイノベーションを実現いたします。

ご相談から受け付けております。ご興味ございましたらお問い合わせください。

WebXR 版 Magic Leap2 の ハンドトラッキング

WebXR の ハンドトラッキング機能を使い、球体をつまんで移動させるデモを作成します。

動作環境

Magic Leap2 OS 1.1.0-dev2 （B3E.221117.04-R.028）
Web Browser (Beta)

使用するフレームワーク

A-Frame の hand-tracking-controlsを使用します。 

コード

pinchmoved の間は指先の位置を球体の位置にします。色は黄色に変更。
pinchended のタイミングで球体の色を青色に変更します。

<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script>
        document.addEventListener("DOMContentLoaded", 
            function(){
                addPitchMovedEvent(document.getElementById('leftHand'));
                addPitchMovedEvent(document.getElementById('rightHand'));
            }, false
        );
        function addPitchMovedEvent(hand)
        {
            hand.addEventListener('pinchmoved', function (event) {
                document.getElementById('sphere').setAttribute('position', event.detail.position);
                document.getElementById('sphere').setAttribute('color', '#FFFF00');
            });
            
            hand.addEventListener('pinchended', function (event) {
                document.getElementById('sphere').setAttribute('color', '#0062C6');
            });
        }
    </script>
  </head>
  <body>
    <a-scene device-orientation-permission-ui="enabled: false">
      <a-entity id="leftHand" hand-tracking-controls="hand: left; modelStyle: dots;"></a-entity>
      <a-entity id="rightHand" hand-tracking-controls="hand: right; modelStyle: dots;"></a-entity>
      <a-sphere id="sphere" position="0 0 0" radius="0.015" color="#0062C6"></a-sphere>
    </a-scene>
  </body>
</html>

実行

上記のようにハンドトラッキング機能が働き、球体を移動させることができるようになります。

起動時のアラートを回避する方法

a-scene に device-orientation-permission-ui="enabled: false" を追加することでアラートは表示しなくなります。

現状、発覚している問題点

コントローラを持っている手だけがハントトラッキングとして機能する。

動作検証した所、コントローラを持った手はハンドトラッキングが機能しますが、コントローラを持たない手は機能しません。すなわち両方の手が同時にトラッキングすることができません。

A-Frame hand-tracking-controls の デフォルトのモデルが壊れて表示される。

A-Frame のデフォルトのモデル（メッシュ形状）の場合、モデルが壊れた状態となります。今回は modelStyle: dots; にしています。

OnePlanet XR

https://1planet.co.jp/xrconsulting.html

AR/MR/VPS技術に専門特化したコンサルティングサービス

Magic Leap2 を使ったソリューションのご検討の方からのお問い合わせ、お待ちしております。


お問い合わせ先

https://1planet.co.jp/xrconsulting.html#op_form

OnePlanet Tech Magazine

Magic Leap1 、Magic Leap2、スマホAR（Niantic Lightship ARDK、WebAR、VPSなど）といったAR技術全般をブログマガジンを連載しています。