LeapMotion LeapJS

LeapMotionを使ったアプリは、Javascriptを使っても簡単に作れるそうだ。

 

ここに、サンプルが公開されている。

http://js.leapmotion.com/examples

 

例えば、Hand and Finger 3D Visualizerを試してみる。

f:id:marchantime:20130829011222p:plain

左手をかざすと、それぞれの指の位置にあわせて物体が表示された。

指をいったん隠して再び表示させると、色がランダムに変化する。

 

もう一つ、1,048,576 Particles これは、粒子がたくさん。

f:id:marchantime:20130829013949p:plain

表示には、WebGLを使用しているらしい。

SafariはデフォルトでWebGLが無効になっていたので、

http://cross.hvn.to/?p=1031 を参考にして有効にしたらちゃんと表示された。

 

 

これらアプリに必要となる”leap.js”はGitbubに公開されている。

https://github.com/leapmotion/leapjs

 

さっそくダウンロードした。

examplesには、dumper.htmlとvisualizer.htmlが入っていた。

 

dumper.htmlを実行

f:id:marchantime:20130829010805p:plain

 

leapmotionからの戻り値が出力された。

 

visualizer.htmlを実行

f:id:marchantime:20130829011026p:plain

 

あれ、何も表示されない。

なぜ???

結局原因は不明のまま。

 

これでは改造しようがないので、

同じアプリと思われる、Hand and Finger 3D Visualizerのソースをダウンロード。

Chromeブラウザで表示して、

ファイル>ページを別名で保存>ウェブページ、完全>保存

sample.htmlとsample/leap.min.jsの2つのファイルが保存された。

 

ローカルに保存したsample.htmlを実行。f:id:marchantime:20130903211739p:plain

 

今度はちゃんと表示されました。

 

見た目も同じで、何が違うの?

ソースの比較だけしてみよう。

 

まず、比較ツールのゲットから。

Perforce Visual Merge and Diff Tools

http://www.perforce.com/perforce/products/merge.html

から、

Perforce ClientsのP4Merge: Visual Merge Toolをダウンロード。

f:id:marchantime:20130903213959p:plain

 

この中から、p4mergeを実行。

 

 

比較。

f:id:marchantime:20130903214408p:plain

 

大きく異なっていたのが、使用している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が開けない。。

ここにあった。

 

f:id:marchantime:20130817205931p:plain

 

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

f:id:marchantime:20130817215417p:plain

 

 

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ディレクトリへ

 

f:id:marchantime:20130817221112p:plain

 

f:id:marchantime:20130817221221p:plain

 

 

Step 6 copy LeapUnityExtensions.cs to the Plugins folder

f:id:marchantime:20130817221952p:plain

↑これは間違い。Scriptsフォルダではなくて、、、

f:id:marchantime:20130818000036p:plain

 

pluginsフォルダーだった。

 

Step 7 copy pxsLeapInput.cs to the Plugins folder

f:id:marchantime:20130817223226p:plain

 

 

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ディレクトリにコピー

をやったら動いた!

f:id:marchantime:20130818151638p:plain

 

 

 

 

 

 

LeapMotionとUnity連携 1

LeapMotionでUnityアプリをあやつります。

 

どちらも初心者です。

どちらもよくわかっていません。

C言語で言えば、ポインタどころか、関数って何?レベルです。

マラソンで言えば、サブフォーどころか、フルマラソンは何キロ?ってレベルです。

 

とりあえず、

 

http://pierresemaan.com/leap-enabling-the-unity-3d-bootcamp-demo-step-by-step-leap-hud/

 

を参考にしてやってみるぜー!