WEB掻っ穿じり

WEBデベロッパー備忘録とチャリ

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

  category:architect

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

フィジカルコンピューティング
(マイノリティ・リポート的なイメージ)

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

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

Leap Motion SDK and Plugin Documentation

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

Leap Motion設置時のサイズ感

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

Enhanced tracking capabilities

Robust to complex environments

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

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

使い方

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

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

Leap Motionビジュアライザー起動画面

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

Simple WebSocket Client画面
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でジェスチャーも扱えます。

どんな情報が使えるか?

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

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

demo

comments powered by Disqus