Download - Leap Motionアプリ Live Building @ エフサミ2014
![Page 1: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/1.jpg)
Leap Motion App Live Building @ エフサミ2014
Naoji Taniguchi
![Page 2: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/2.jpg)
自己紹介
谷口 直嗣
![Page 3: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/3.jpg)
フリーランスで インタラクティブコンテンツ、 スマートフォンアプリ、 の企画、ディレクション、開発 CGスタジオでのR&Dをしております。
![Page 4: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/4.jpg)
GPU大好き! !
Shader野郎 !
リアルタイム、インタラクティブ、センシング技術をCGの映像制作に持ち込
みたい
![Page 5: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/5.jpg)
センサーデバイスからの インタラクションを 「面白い」に 結びつける過程を お見せします
![Page 6: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/6.jpg)
今回はUnityをベースに
![Page 7: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/7.jpg)
Leap Motionで遊べる アプリを作ってみます。
![Page 8: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/8.jpg)
コンセプト 念力
![Page 9: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/9.jpg)
ソースをここからゲット! https://github.com/naojitaniguchi/
UnityLeapFingerBeamAR
![Page 10: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/10.jpg)
UnityでNew Scene
![Page 11: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/11.jpg)
![Page 12: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/12.jpg)
まずは Leap Motion Demo Pack
![Page 13: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/13.jpg)
![Page 14: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/14.jpg)
![Page 15: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/15.jpg)
手を認識させてみる
![Page 16: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/16.jpg)
![Page 17: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/17.jpg)
念力っぽく指から炎でも出してみる
![Page 18: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/18.jpg)
![Page 19: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/19.jpg)
![Page 20: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/20.jpg)
それぞれの指先の色を変えて派手に!
![Page 21: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/21.jpg)
それぞれの指に対応させる
![Page 22: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/22.jpg)
それぞれの指に対応させる
色設定
![Page 23: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/23.jpg)
スペースキーを押して 指先からパーティクルを
発射!
![Page 24: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/24.jpg)
![Page 25: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/25.jpg)
指先の方向に パーティクルを 飛ばすには?
![Page 26: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/26.jpg)
手の向きが取得できるのでそれを使う
![Page 27: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/27.jpg)
回転角
手のひら
![Page 28: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/28.jpg)
![Page 29: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/29.jpg)
手を触れずに ビームを発射したい
![Page 30: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/30.jpg)
ハンドサインを使う?
![Page 31: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/31.jpg)
せっかくの指から炎が出ている念力感がスポイル
される
![Page 32: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/32.jpg)
“Fire”と叫んでみよう!
![Page 33: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/33.jpg)
マイク入力
![Page 34: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/34.jpg)
![Page 35: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/35.jpg)
![Page 36: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/36.jpg)
効果音も鳴らす
![Page 37: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/37.jpg)
![Page 38: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/38.jpg)
![Page 39: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/39.jpg)
音を作る、使う by
しくみデザイン中村さん
![Page 40: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/40.jpg)
![Page 41: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/41.jpg)
ボリュームでスケール変化
![Page 42: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/42.jpg)
それぞれの パーティクルを 対応付ける
![Page 43: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/43.jpg)
ヴォリュームが10以上でFire!
![Page 44: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/44.jpg)
背景が寂しい..
![Page 45: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/45.jpg)
という時のARアプリ化
![Page 46: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/46.jpg)
![Page 47: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/47.jpg)
![Page 48: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/48.jpg)
とりあえずここまで
![Page 49: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/49.jpg)
さらに、WebCam画像をOpenCVで解析して
FaceTrackingとか
![Page 50: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/50.jpg)
ビームがあたったらWebCamからの画像をい
じるとか
![Page 51: Leap Motionアプリ Live Building @ エフサミ2014](https://reader033.vdocuments.us/reader033/viewer/2022042606/547ce295b4af9fc9158b5275/html5/thumbnails/51.jpg)
Thank You!