ushumpei’s blog

生活で気になったことを随時調べて書いていきます。

Leap Motionを手に入れました

　Leap Motionを手に入れました。Leap Motionは手の動きをかなりの精度で取得できるセンサーです。たくさんの言語でプログラミング可能なAPIが提供されていますが、とりあえずJavaScriptのAPIを使ってみます。また、各クラスの内容もざっくりと整理していこうと思います。

　ここでは、開発PCがmacなのでSDKはV2 desktopを使います。Windowsの方は新しいSDKが使えるようなのでそちらを使ったほうがいいかもしれません。(VR関係に強化されているように見えます)

参考

Leap Motion 小型モーションコントローラー 3Dモーション キャプチャー システム [並行輸入品]

Leap Motion 小型モーションコントローラー 3Dモーション キャプチャー システム [並行輸入品]

とりあえず

　環境設定やインストールは省略します、公式サイトの指示通りにすれば問題ないはずです。

　仕組みを理解するために、とりあえずブラウザ上に手を表示させてみます。まずはセンサーの値を取れるか確認をするためのコードを記述します。

ブラウザのコンソールに吐き出すだけ

<html>
  <head>
    <!-- <script src="./leap-0.6.4.js"></script> -->
    <script src="https://js.leapmotion.com/leap-0.6.4.js"></script>
    <script>
      Leap.loop(frame => console.log(frame));
    </script>
  </head>
  <body>
  </body>
</html>

　LeapJSを外部リソースとして取得します。LeapはLeapJSがネームスペースとして確保しているオブジェクトのようです。

　値をとるにはLeap.loopにコールバック関数を渡します。この関数にセンサーが取得したframeオブジェクトが引数で渡されるので、それに対する処理を記述するのがアプリケーション作成の基本的な流れになると思います。

　frameオブジェクトの詳細はリファレンスに書いてあります。手、指、ツール(棒状のもの)などのデータをプロパティとして持っていてくれています。

プラグイン Rigged Handを使う

　LeapJSはプラグインという形で機能拡張できるようになっています。プラグインはControllerクラスによって管理されます。各プラグインはpluginメソッドにより登録しuseメソッドにより有効にしたり、useメソッドに直接関数を渡すことで、loop実行時にコールバックとして呼び出されるようになります。

　プラグインを使うための準備として、まずは先ほどの処理をLeap.loopを使わない記述方法に変えておきます。

<html>
  <head>
    <!-- <script src="./leap-0.6.4.js"></script> -->
    <script src="https://js.leapmotion.com/leap-0.6.4.js"></script>
    <script>
      const controller = new Leap.Controller();
      controller.use(
        () => ({
          frame: frame => console.log(frame),
        })
      );
      controller.connect();
    </script>
  </head>
  <body>
  </body>
</html>

　プラグインを追加する準備が整ったところで、リアルな手を表示することができるRigged Handというプラグインを追加してみます。

　プラグインを使用するにはleap.rigged-hand-0.1.7.jsの他に、いくつかのライブラリを読み込む必要があります。useメソッドでriggedHandを使用するようにします。

<html>
  <head>
    <!--
      以下から必要なライブラリを取得
      https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.js
      https://js.leapmotion.com/leap-0.6.4.js
      https://js.leapmotion.com/leap-plugins-0.1.10.js
      https://github.com/leapmotion/leapjs-rigged-hand/blob/master/build/leap.rigged-hand-0.1.7.js
    -->
    <script type="text/javascript" src="three.js"></script>
    <script type="text/javascript" src="leap-0.6.4.js"></script>
    <script type="text/javascript" src="leap-plugins-0.1.10.js"></script>
    <script type="text/javascript" src="leap.rigged-hand-0.1.7.js"></script>

    <script>
      const controller = new Leap.Controller();
      controller.use('riggedHand');
      controller.connect();
    </script>
  </head>
  <body>
  </body>
</html>

　 　動作はこんな感じになりました。実際の手も一緒に撮影すればよかったです。。。


Leap Motion - Rigged Hand Demo

LeapJSのクラスに関する考察

　API Referenceによると、LeapJSには次のクラスが存在します。

制御

クラス名 概要
Controller Leap MotionのAPIに接続するためのインターフェース。オプションや、フレーム更新時のコールバックの設定など、最もさわりそうなオブジェクト
InteractionBox Leap Motion Controllerに紐づいた表示領域を扱うオブジェクト？領域に応じたベクトルの正規化方法などを提供してくれるみたいです
Frame センサーがフレーム更新ごとに取得した手、指に関するデータを含むオブジェクト

パーツ

クラス名 概要
Pointable 指(Finger)やツールなどの抽象クラスで位置や方向、速度などを保持しているオブジェクトです
Hand 手のオブジェクトで、5本の指の配列や腕などプロパティに持っています。かなり豊富な情報を持っているようです
Finger 指のオブジェクトで、生えている位置や、手の骨の本数文の骨オブジェクトに関する情報を持っています。何指か、などの識別子も持っています
Bone 骨のオブジェクトで、指の骨を表しています。前後の関節を持っています

ジェスチャー

　ジェスチャーは多いので個々の概要は省略します。認識してくれるハンドサインという認識です。独自に追加できるかはちょっとわからないです。

  • Gesture
    • CircleGesture
    • ScreenTapGesture
    • KeyTapGesture
    • SwipeGesture

計算要素

クラス名 概要
Matrix math 行列のオブジェクト。WebGL用外部ライブラリを使っているようです
Vector math ベクトルのオブジェクト。WebGL用外部ライブラリに入っているvec3を使っているようです

感想

　API Referenceを読んで、勝手に各クラスの概要などを書きましたが、このドキュメントを和訳した方が随分人のためになるんだろうな、と思いました。(もしかしたら和訳されている？)

　まだまだわかっていないことが多いので、ご指摘いただければ幸いです。