LeapMotion Leap.js でジェスチャー取得
Leap.jsを使って、ジェスチャーを取得してみました。
前回から使っている「DOM Visualizer」のソースを改造して、ジェスチャーのIDとタイプを表示するようにしました。
ジェスチャーの情報は、Gestureクラスが保持しています。
まず、frameクラスからGestureクラスのオブジェクトを取得します。
var gesture = frame.gestures[0];
gestures[id]は、Gestureクラスのオブジェクトのリストです。
ここでは、リストの0番目を指定しましたが、複数のオブジェクトが入ることがあります。なぜなら、複数の指のジェスチャーを同時に認識できるからです。
例えば、手を開いたままグルグルまわすと、5本の指それぞれに対してサークルのジェスチャーが認識されます。
次に、Gestureクラスのメンバである、idとtypeを取得します。
if(gesture){
var gestureId = gesture.id;
var gestureType = gesture.type;
}
typeはstring型で、以下の4種類です。
- circle
- swipe
- screenTap
- keyTap
最後に、表示します。
document.getElementById('out').innerHTML = "<div>"+frame.toString()+ gestureId + gestureType +"</div>";
APIは↓ここを参照
http://js.leapmotion.com/api/v0.2.0/docs#leap-gesture
LeapMotion LeapJS
LeapMotionを使ったアプリは、Javascriptを使っても簡単に作れるそうだ。
ここに、サンプルが公開されている。
http://js.leapmotion.com/examples
例えば、Hand and Finger 3D Visualizerを試してみる。
左手をかざすと、それぞれの指の位置にあわせて物体が表示された。
指をいったん隠して再び表示させると、色がランダムに変化する。
もう一つ、1,048,576 Particles これは、粒子がたくさん。
表示には、WebGLを使用しているらしい。
SafariはデフォルトでWebGLが無効になっていたので、
http://cross.hvn.to/?p=1031 を参考にして有効にしたらちゃんと表示された。
これらアプリに必要となる”leap.js”はGitbubに公開されている。
https://github.com/leapmotion/leapjs
さっそくダウンロードした。
examplesには、dumper.htmlとvisualizer.htmlが入っていた。
dumper.htmlを実行
leapmotionからの戻り値が出力された。
visualizer.htmlを実行
あれ、何も表示されない。
なぜ???
結局原因は不明のまま。
これでは改造しようがないので、
同じアプリと思われる、Hand and Finger 3D Visualizerのソースをダウンロード。
Chromeブラウザで表示して、
ファイル>ページを別名で保存>ウェブページ、完全>保存
sample.htmlとsample/leap.min.jsの2つのファイルが保存された。
ローカルに保存したsample.htmlを実行。
今度はちゃんと表示されました。
見た目も同じで、何が違うの?
ソースの比較だけしてみよう。
まず、比較ツールのゲットから。
Perforce Visual Merge and Diff Tools
http://www.perforce.com/perforce/products/merge.html
から、
Perforce ClientsのP4Merge: Visual Merge Toolをダウンロード。
この中から、p4mergeを実行。
比較。
大きく異なっていたのが、使用しているJavaScript。
leap.js と leap.min.js。
あとは、
hand.palmPosition
hand.rotation
pointable.tipPosition
pointable.direction
の各XYZ軸の値を取得する際のメンバの指定方法が違ってる。
確かに動かない方は、書式が間違っている。古いコードなのかな?
LeapMotionとUnity連携 3
LepaMotionはどうやってUnityに手の動きを渡しているのか?
オリジナルのBootcampとの違いは、以下のファイル。
・rootフォルダ
libLeap.dylib
libLeapCSharp.dylib
・Pluginsフォルダ
LeapCSharp.NET3.5.dll
LeapUnityExtensions.cs
pxsLeapInput.cs
・Asset/Scripts/soldierフォルダ
SoldierController.js
SoldierCamera.js
pxsLeapInput.csには、
public static bool GetHandGesture(string gestureName)
などのメソッドが書かれている。
また、
static Leap.Controller m_controller= null;
static Leap.Framem_Frame= null;
static Leap.Handm_Hand= null;
staticintm_FingersCount= 0;
などのStatic変数が定義されている。
Leapクラスはきっとdllやdylibに定義されているのだろう。
定期的にLeap.Controller.Frame( )メソッドがコールされて、手の座標を取得するようだ。
LeapMotionとUnity連携 2
http://pierresemaan.com/leap-enabling-the-unity-3d-bootcamp-demo-step-by-step-leap-hud/
のステップを抜粋。
Step 1 Create a new project.
Step 2 Make sure that the Bootcamp Scene is working properly
Step 3 (Optional) Rename the Bootcamp scene so you can experiment
Step 4 Create a Plugins folder under the asset directory
Step 5 Copy the Leap Files from UnityAssets in the SDK to your Plugins Directory and root directory
Step 6 copy LeapUnityExtensions.cs to the Plugins folder
Step 7 copy pxsLeapInput.cs to the Plugins folder
Step 7 a (optional) examine the pxsLeapInput Script
Step 8 Modify SoldierController.js script to allow for Leap Input
Step 9 Modify SoldierCamera.js script to allow for Leap Input
Step 10 (Optional) Create a Leap Navigation HUD to visualize Leap Input
Step 11 Enable Leap Input
Step 12 Play
抜粋してみたものの、どれぐらい難しいのか想像つかない。。
とりあえずやってみよう!
まずは、
Step 1 Create a new project.
いきなりつまづく。
UnityでAssetStoreが開けない。。
ここにあった。
bootcamp。
検索ですぐに見つかった。Oh, it's Free!!
Downloadボタンを押して、
Importボタンも押したら、、、
あ、開いてたプロジェクトにインポートしちゃったよ。。
Unity再起動して、NewProjectを作成。
LeapEnabledBootcamp
BootcampをImportして、Run!
あれれ、真っ青なだけの画面。。
画面下半分の、Projectウィンドウから、Bootcampのunityファイル?をダブルクリック。
お、Bootcampが動いた!
これで、
Step 2 Make sure that the Bootcamp Scene is working properly
も終了だ。
★ここで、Unityのシーンとは何?
Unityでのシーンとはどういうポジションにあるのか? から 書くと
Project(全てのコンテンツがここに入っています)
|-Scene1
|-Hierarchy
|-Scene2
|-Hierarchy
1つのプロジェクトに、複数のシーンがあるのか。
Step 3 (Optional) Rename the Bootcamp scene so you can experiment
はスキップ。
Step 4 Create a Plugins folder under the asset directory
Step 5 Copy the Leap Files from UnityAssets in the SDK to your Plugins Directory and root directory
Unity Freeを使っている場合は、以下をコピー。
・Leap.dll と LeapCSharp.dllを、自分のアプリのルートディレクトリへ
→この2つは見つからなかったので、代わりにlibLeap.dylib と libLeapCSharp.dylibをコピー。
・LeapCSharp.NET3.5.dllをPluginsディレクトリへ
Step 6 copy LeapUnityExtensions.cs to the Plugins folder
↑これは間違い。Scriptsフォルダではなくて、、、
pluginsフォルダーだった。
Step 7 copy pxsLeapInput.cs to the Plugins folder
Step 7 a (optional) examine the pxsLeapInput Script
スキップ
Step 8 Modify SoldierController.js script to allow for Leap Input
ここで、Leap用のカスタマイズ。
SoldierController.jsを改造する。
Step 9 Modify SoldierCamera.js script to allow for Leap Input
SoldierCamera.jsを改造する。
Step 10 (Optional) Create a Leap Navigation HUD to visualize Leap Input
スキップ
Step 11 Enable Leap Input
Soldierシーンを選択して、LeapEnabledをする。
Soldierカメラシーンを選択して、LeapEnabledをする。
これがわからん。。
ビルドもエラー出てるし。。
Assets/Scripts/soldier/SoldierCamera.js(141,25): BCE0044: unexpected char: 0x200B.
Assets/Scripts/soldier/SoldierController.js(219,17): BCE0044: unexpected char: 0x200B.
& がいけないらしい。
でも直してもエラーが消えない。なぞのエラー。
結局このエラーの原因は不明なまま。
https://github.com/Pierresemaan/LeapEnabledBootCamp
からソース一式をダウンロードして実行。
・libLeap.dylib と libLeapCSharp.dylibをrootディレクトリにコピー
をやったら動いた!
LeapMotionとUnity連携 1
LeapMotionでUnityアプリをあやつります。
どちらも初心者です。
どちらもよくわかっていません。
C言語で言えば、ポインタどころか、関数って何?レベルです。
マラソンで言えば、サブフォーどころか、フルマラソンは何キロ?ってレベルです。
とりあえず、
http://pierresemaan.com/leap-enabling-the-unity-3d-bootcamp-demo-step-by-step-leap-hud/
を参考にしてやってみるぜー!
ブログ初めました
メモ代わりにブログを始めました。