JavaScriptでLeap Motionの情報を受け取ってみる

posted： 2016-05-28　　category：web

先日VR関連の情報を得る機会があって、そこでLeap Motionが紹介されていました。

(マイノリティ・リポート的なイメージ)

普段ゲームやなんかに馴染みはないんですが、昔映画で見たようなフィジカルコンピューティングを彷彿させるような印象を受けて触発されました。

そして、SDKの中にJavaScriptが使えることを知り早速購入してみました。

モーションキャプチャのデバイスと言うと、真っ先にMSのKinectが頭に浮か日ますが、違いはKinectが全身のジェスチャーを認識するのに対して、Leap Motionは指先から肘ぐらいまでのジェスチャーを認識すということで、デバイス自体も非常にコンパクトです。

2012年の発売、2014年にハードウェアはそのままにv2にアップデートされキャプチャの精度もかなり改善され、最近ではVR向けにハンド・トラッキングエンジンのOrionを発表*¹しています。
*¹ windowsのみ提供（2016年05月29日）

今回はVRに関しては触れませんが、Web開発ではさらにユニークなインタラクションが可能になりそうで少しワクワクしますね。

それでは簡単な使い方などを紹介したいと思います。

使い方

1. ソフトをダウンロードしてインストールする
2. PCに繋げる

この作業だけでちゃんと認識してくれるようになります。
↓ ビジュアライザー起動画面

JavaScriptで使う場合、Leap Motionを繋げるとWebSocket通信(ws://localhost:6437)によるJSON形式データの提供されるようです。

Simple WebSocket Client - Chrome拡張機能使用画面

モーション取得情報は25～200fps(毎秒フレーム)でレスポンスが返ってきます（USB3.0接続時）。

これで得られる情報を元に開発を行うのですが、もっと手っ取り早くデータを解析してくれるオープンソースのAPIが用意されています。

それがLeap.jsです。

Leap.js

Leap Motionから返ってくるトラッキングデータをJavaScriptで簡単に扱えるようにしてくれるのがこのLeap.js、使い方はライブラリのようにDOMに読み込ませるだけです。

これでLeapオブジェクトが使えるようなり、イベントループの中に処理を記述していきます。

Leap.loop({enableGestures: true}, function(frame){
// フレームごとの処理を記述
});
controller.connect();  // 接続

enableGestures: trueでジェスチャーも扱えます。

どんな情報が使えるか？

取得できて使えそうな情報は以下の通り。

• 手
  • 位置（座標x/y/z）
  • 右・左
  • 向き
  • グラブ（握る）
• 指
  • 位置（関節 x/y/z）
  • 親指〜小指
  • 曲げ伸ばし
  • ピンチ（摘む）
• ジェスチャー
  • 回転
  • スワイプ
  • キータップ
  • スクリーンタップ
• ツール
  • 白い棒状の何かを認識

ツールは白の無地で棒状のものであれば道具として認識してくれます。

demo

• 
• 
• 
• 0
•