Leap Motionを手に入れました
Leap Motionを手に入れました。Leap Motionは手の動きをかなりの精度で取得できるセンサーです。たくさんの言語でプログラミング可能なAPIが提供されていますが、とりあえずJavaScriptのAPIを使ってみます。また、各クラスの内容もざっくりと整理していこうと思います。
ここでは、開発PCがmacなのでSDKはV2 desktopを使います。Windowsの方は新しいSDKが使えるようなのでそちらを使ったほうがいいかもしれません。(VR関係に強化されているように見えます)
参考
- wiki
- 公式
- JavaScript SDK Documentation — Leap Motion JavaScript SDK v2.3 documentation
- github.com/leapmotion/leapjs
- Javascript | Leap Motion Developers
Leap Motion 小型モーションコントローラー 3Dモーション キャプチャー システム [並行輸入品]
- 出版社/メーカー: Leap Motion
- メディア: Personal Computers
- この商品を含むブログを見る
とりあえず
環境設定やインストールは省略します、公式サイトの指示通りにすれば問題ないはずです。
仕組みを理解するために、とりあえずブラウザ上に手を表示させてみます。まずはセンサーの値を取れるか確認をするためのコードを記述します。
ブラウザのコンソールに吐き出すだけ
<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を読んで、勝手に各クラスの概要などを書きましたが、このドキュメントを和訳した方が随分人のためになるんだろうな、と思いました。(もしかしたら和訳されている?)
まだまだわかっていないことが多いので、ご指摘いただければ幸いです。