51
Leap Motion App Live Building @ エフサミ2014 Naoji Taniguchi

Leap Motionアプリ Live Building @ エフサミ2014

Embed Size (px)

DESCRIPTION

エフサミ2014でLeap Motionを使ったアプリをUnityで、壇上で作りました。Slide Share用にUnityのスクリーンショットや、コードのスクリーンショットを追加したものです。

Citation preview

Page 1: Leap Motionアプリ Live Building @ エフサミ2014

Leap Motion App Live Building @ エフサミ2014

Naoji Taniguchi

Page 2: Leap Motionアプリ Live Building @ エフサミ2014

自己紹介

谷口 直嗣

Page 3: Leap Motionアプリ Live Building @ エフサミ2014

フリーランスで インタラクティブコンテンツ、 スマートフォンアプリ、 の企画、ディレクション、開発 CGスタジオでのR&Dをしております。

Page 4: Leap Motionアプリ Live Building @ エフサミ2014

GPU大好き! !

Shader野郎 !

リアルタイム、インタラクティブ、センシング技術をCGの映像制作に持ち込

みたい

Page 5: Leap Motionアプリ Live Building @ エフサミ2014

センサーデバイスからの インタラクションを 「面白い」に 結びつける過程を お見せします

Page 6: Leap Motionアプリ Live Building @ エフサミ2014

今回はUnityをベースに

Page 7: Leap Motionアプリ Live Building @ エフサミ2014

Leap Motionで遊べる アプリを作ってみます。

Page 8: Leap Motionアプリ Live Building @ エフサミ2014

コンセプト 念力

Page 9: Leap Motionアプリ Live Building @ エフサミ2014

ソースをここからゲット! https://github.com/naojitaniguchi/

UnityLeapFingerBeamAR

Page 10: Leap Motionアプリ Live Building @ エフサミ2014

UnityでNew Scene

Page 11: Leap Motionアプリ Live Building @ エフサミ2014
Page 12: Leap Motionアプリ Live Building @ エフサミ2014

まずは Leap Motion Demo Pack

Page 13: Leap Motionアプリ Live Building @ エフサミ2014
Page 14: Leap Motionアプリ Live Building @ エフサミ2014
Page 15: Leap Motionアプリ Live Building @ エフサミ2014

手を認識させてみる

Page 16: Leap Motionアプリ Live Building @ エフサミ2014
Page 17: Leap Motionアプリ Live Building @ エフサミ2014

念力っぽく指から炎でも出してみる

Page 18: Leap Motionアプリ Live Building @ エフサミ2014
Page 19: Leap Motionアプリ Live Building @ エフサミ2014
Page 20: Leap Motionアプリ Live Building @ エフサミ2014

それぞれの指先の色を変えて派手に!

Page 21: Leap Motionアプリ Live Building @ エフサミ2014

それぞれの指に対応させる

Page 22: Leap Motionアプリ Live Building @ エフサミ2014

それぞれの指に対応させる

色設定

Page 23: Leap Motionアプリ Live Building @ エフサミ2014

スペースキーを押して 指先からパーティクルを

発射!

Page 24: Leap Motionアプリ Live Building @ エフサミ2014
Page 25: Leap Motionアプリ Live Building @ エフサミ2014

指先の方向に パーティクルを 飛ばすには?

Page 26: Leap Motionアプリ Live Building @ エフサミ2014

手の向きが取得できるのでそれを使う

Page 27: Leap Motionアプリ Live Building @ エフサミ2014

回転角

手のひら

Page 28: Leap Motionアプリ Live Building @ エフサミ2014
Page 29: Leap Motionアプリ Live Building @ エフサミ2014

手を触れずに ビームを発射したい

Page 30: Leap Motionアプリ Live Building @ エフサミ2014

ハンドサインを使う?

Page 31: Leap Motionアプリ Live Building @ エフサミ2014

せっかくの指から炎が出ている念力感がスポイル

される

Page 32: Leap Motionアプリ Live Building @ エフサミ2014

“Fire”と叫んでみよう!

Page 33: Leap Motionアプリ Live Building @ エフサミ2014

マイク入力

Page 34: Leap Motionアプリ Live Building @ エフサミ2014
Page 35: Leap Motionアプリ Live Building @ エフサミ2014
Page 36: Leap Motionアプリ Live Building @ エフサミ2014

効果音も鳴らす

Page 37: Leap Motionアプリ Live Building @ エフサミ2014
Page 38: Leap Motionアプリ Live Building @ エフサミ2014
Page 39: Leap Motionアプリ Live Building @ エフサミ2014

音を作る、使う by

しくみデザイン中村さん

Page 40: Leap Motionアプリ Live Building @ エフサミ2014
Page 41: Leap Motionアプリ Live Building @ エフサミ2014

ボリュームでスケール変化

Page 42: Leap Motionアプリ Live Building @ エフサミ2014

それぞれの パーティクルを 対応付ける

Page 43: Leap Motionアプリ Live Building @ エフサミ2014

ヴォリュームが10以上でFire!

Page 44: Leap Motionアプリ Live Building @ エフサミ2014

背景が寂しい..

Page 45: Leap Motionアプリ Live Building @ エフサミ2014

という時のARアプリ化

Page 46: Leap Motionアプリ Live Building @ エフサミ2014
Page 47: Leap Motionアプリ Live Building @ エフサミ2014
Page 48: Leap Motionアプリ Live Building @ エフサミ2014

とりあえずここまで

Page 49: Leap Motionアプリ Live Building @ エフサミ2014

さらに、WebCam画像をOpenCVで解析して

FaceTrackingとか

Page 50: Leap Motionアプリ Live Building @ エフサミ2014

ビームがあたったらWebCamからの画像をい

じるとか

Page 51: Leap Motionアプリ Live Building @ エフサミ2014

Thank You!