FMCN Kinect ハンズオン

長峰慶三 (Keizo Nagamine)Jollystics Inc.

今日の流れ

はじめに (13:00~13:10)

Kinect について (13:10~13:25)

Unity について (13:25~13:40)

Kinect x Unity ハンズオン (13:45~15:00)

自由制作時間 (15:00~17:00)

はじめに

自己紹介

➢ 長峰慶三 (Keizo Nagamine)

➢ Jollystics Inc.

➢ アプリ開発など（Unity / Xamarin）

➢ 勉強会とかハッカソンとか好き（FMCN / Unity Fukuoka）

➢ Twitter : @KzoNag

FMCNとは

FMCN：Fukuoka MotionControl Network

KinectやOculusRiftなど、センサー＆デバイスに関する

オープンなエンジニアリングコミュニティです。

デジタルなものづくり・ことづくりに関心のある

開発者やデザイナーと共に創る、「共創の場」を生み出します。

今日の資料など

➢ ハンズオンのUnityプロジェクトリポジトリ

○ https://github.com/KzoNag/UnityKinect/tree/master

➢ ハンズオン解説用のGistコード

○ https://gist.github.com/KzoNag/70770b8bfca8a54bd00d

○ https://gist.github.com/KzoNag/3602488de99ff1586e9a

➢ 発表資料

○ http://www.slideshare.net/KeizoNagamine/fmcn-kinect

アンケート

➢ 開発環境はどうですか？（PC, SDK）

➢ Kinectさわったことありますか？

➢ Unityさわったことありますか？

おことわり

➢ 今回はKinect & Unity に触れてみる、導入部分を目的とします

➢ なるべく分かりやすく説明したい

➢ 厳密でなかったり、深く言及しない部分もあります

➢ ハンズオン形式は慣れてないのでゴメンナサイ。。。

➢ 楽しくやりたいので質問などドンドンしてください！

Kinect v2について

RGBカメラ

深度センサ（IRカメラ + IRプロジェクタ)

マイクアレイ

システム要件

OS Windows8 ~

CPU Core i7 3.1GHz以上の64ビットCPU

メモリ 4G以上

USB USB3.0

グラフィック DirectX11 対応グラフィックカード

開発環境 Visual Studio 2012~Unity5

動作仕様 (1/2)

カラー解像度 1920 x 1080

カラーフレームレート 30fps / 15fps(暗所)

深度データ解像度 512 x 424

深度データフレームレート 30fps

深度センサー方式 ToF (Time of Flight)

深度測定範囲 500mm ~ 8000mm

水平視野角 70度

垂直視野角 60度

動作仕様 (2/2)

人の検出人数 6人

人の検出可能距離 500mm ~ 4500mm

骨格数 25カ所 / 人

ジェスチャー検出 ◯

手のポーズ検出 ◯

マイク 4 (マイクアレイ)

音声入力 ◯

接続 (Kinect for Xbox One + PCアダプター)

Kinect for Xbox One

PCアダプター

電源

USB

ソフトウェア構成

Kinect

Kinect Driver

Kinect Service

Kinect SDK

Application

Kinect SDK

Application

Kinect SDK

Application

取得データ①カラー

取得データ②深度データ

取得データ③赤外線画像

取得データ④BodyIndex（人の検出）

取得データ⑤Body（人の骨格）

役に立つツール①Kinect Configuration Verifier

SDK Browserから “Kinect Configuration Verifier” をRun

コンピューターがシステム要件を満たすかを確認できる

役に立つツール②Kinect Studio

Kinectのデータを保存・再生するツール保存したデータがあればKinectがなくても動作確認できる

Kinect Studioでデータを保存

① RECORDタブを選択

② Kinectが接続された状態でConnectボタン

③ 設定ボタンからプレビューするデータを選択

④ 保存するデータを選択

⑤ 録画ボタン

⑥ 録画終了するときはもういちど録画ボタン

①

⑤,⑥

③

④

②

Kinect Studioでデータを再生

① PLAYタブを選択

② 接続状態にする

　（Kinectは実際に接続しなくもOK）

③ 再生ボタン

※別のデータを再生したい場合は FILEから選択

①

②

③

Unityについて

UnityとはUnity Technologies社製のゲームエンジン

2D/3Dのゲームを作るための統合開発環境

GUIベースのUnityエディタ

C#/JSでのスクリプティング

多くのプラットフォーム対応(iOS/Android/Win/Mac/HTML5/...)

ネイティブ機能へのアクセス

AssetStoreの活用

Unityエディタ

Projectビュー

使用するアセット（素材）の一覧

モデル、テクスチャ、オーディオ、スクリプトetc…

追加は “Create”ボタンから

画像や音声などは外部からD&Dできる

移動、削除はProjectビューで行う

Hierarchyビュー

現在のシーンに含まれるゲームオブジェクト

階層構造になっている

“Create”からゲームオブジェクト作成

一部アセット（プレハブなど）はProjectからD&D

Sceneビュー

現在のシーンが表現された3D空間

ゲームオブジェクトの配置等を行う

Gameビュー

実際にゲームプレイ時に表示される画面

カメラと表示対象のゲームオブジェクトの位

置関係、UIオブジェクトの設定などから表

示内容が決まる

Inspectorビュー

ゲームオブジェクトやアセットの設定を行う

Hierarchy/Projectビューで選択するとその設定内

容が表示される

ゲームオブジェクトとコンポーネント①

シーンを構成する要素

シーンビュー、ヒエラルキーで確認

階層化できる

モデルやUIのように見えるオブジェクト

管理用や階層化のための見えないオブジェクト

ゲームオブジェクトとコンポーネント②

ゲームオブジェクトの機能を表す

ひとつのゲームオブジェクトに複数

インスペクターに表示され、設定できる

あらかじめ用意されたもの

自分で作成するもの（C#/JS）

publicで定義したメンバは編集可能に（後述）

スクリプティング

C#/JSで記述できる（今回はC#）

MonoBehaviourを継承するとコンポーネントになる

publicで定義したメンバはInspectorで設定可能

特定のタイミングで実行される特別なメソッドがある

- Start : 最初のUpdateの前に１度だけ実行される

- Update : 毎フレーム実行される

- OnDestroy : ゲームオブジェクトが破棄されるときに実行される

- … 他にもたくさん

ネイティブプラグイン

C++等で記述されたプログラム利用するための仕組み

今回のKinectもこれのおかげで使える

Kinect用プラグインはMicrosoftが公式で配布している

フォルダごとプロジェクトビューにD&Dするだけ

C#からアクセスできるようになる

Kinect x Unityハンズオン

つくるもの

ゲームの世界に入ってみよう！

ゲームの3D空間にカメラから取得した自分の姿を重ねて表示する

デモ

使うデータ

Color

BodyIndex

Depth

Body Index Color

BodyIndexのピクセルに対応するColorのピクセルを参照する（マップする）

このときにDepthデータが引数として必要

人物領域以外は透明（アルファ値 =0）にする

Body Index + Color 3D空間

ゲームの世界にこんにちは！

ステップ

① 3D空間を用意しよう

② BodyIndexを表示しよう

③ Colorデータを参照しよう

ステップ① 3D空間を用意しよう

Unityのプロジェクトを作成する

Unityを立ち上げて”NEW”をクリック

Unityのプロジェクトを作成する

Unityを立ち上げて”NEW”をクリック①3Dを選択②Create project

ビューのレイアウトを調整

①ここを”2 by 3”にすると同じビューのレイアウトになる（自由にしてください）

②Projectビューの設定を”One Column Layout”にすると同じ見た目に（好きなほうでいいです）

3Dの地面を追加

HierarchyのCreateから“3D Object” > “Plane”を選択

Planeをいいかんじに配置する

①HierarchyでPlaneを選択する

②トランスフォームツールを使ってSceneビューで移動・拡縮・回転する

シーンビューでの配置方法

移動 回転 拡縮

右クリック → ドラッグ / WASDキーで視点を移動・回転

Gameビューでいいかんじの見た目になればOK!!

シーンを保存しておこう

Ctrl + S でシーンを保存シーンの状態を変更したらこまめに保存しましょう！

ステップ② BodyIndexを表示しよう

画像を表示するゲームオブジェクトを配置する

①HierarchyのCreateから“UI” > “Raw Image”を選択

②Hierarchyに-Canvas -RawImageができるのでRawImageの配置を調整

Kinectのデータからテクスチャを作りRaw Imageに設定することで表示されます

Kinectを制御するコンポーネントを作成する

①ProjectのCreateから“C# Script”を選択して作成ファイル名は”KinectController”

作成したコンポーネントをRaw Imageにアタッチ

① HierarchyのRaw Imageを選択

①

② ② コンポーネントを InspectorにD&D　（Add Componentボタンあたりに）

Inspectorに作成したコンポーネントの情報が表示されればOK

Unity用のKinect SDKをインポートする①

Unity用KinectプラグインをProjectにD&D

プラグインの入手先https://dev.windows.com/en-us/kinect/tools( "Tools and extensions" の "Unity Pro packages")

Unity用のKinect SDKをインポートする②

すべてチェックされた状態で “Import”

コンポーネントを実装しよう！

作成したコンポーネントをダブルクリックでテキストエディタを開く

全体像は以下のGistで

https://gist.github.com/KzoNag/70770b8bfca8a54bd00d

名前空間の宣言

RawImage

Kinect関連

フィールドの定義

初期化（Start）

初期化（Start）1. センサー取得

2. リーダー取得

3. BodyIndexを受け取るバッファを用意

4. RawImageに表示するテクスチャを用意

5. テクスチャをRawImageにセット

6. センサーを開く

BodyIndexデータ

byte型

ピクセルごとに1つのbyte値

人物領域には0~254の値(ID)

人物以外の領域には255

左上ピクセルから開始される１次元配列

1 255 255 255 2 2 2 2 ...

BodyIndexデータ

Texture2D画像を表すクラス

サイズとフォーマットを指定してインスタンス化する

画像表示オブジェクトにセットすると表示される

byte配列のバッファを読み込んで更新できる

R G B A R G B A R G B A R G ... ...

バッファの構造

Texture2D

終了処理（OnDestroy）

更新処理（Update）1. BodyIndexの最新データを取得

2. ピクセルごとにテクスチャデータを更新

3. テクスチャにデータをロード・反映

BodyIndexの最新データを取得

ピクセルごとにテクスチャデータを更新

各ピクセルごとにBodyIndexの値を調べる

BodyIndexの値に応じてテクスチャデータを更新

255でなければ人物領域なので色付け

255なら人物領域でないので透明に

255 0 0 255 0 0 0 0 ...

1 255 255 255 2 2 2 2 ...BodyIndex

テクスチャデータ

テクスチャにデータをロード・反映

スクリプトのエラーを確認

Window > Console を選択エラーがある場合はここに赤字で表示される

UnityエディタでRawImageを関連づけ

RawImageを選択KinectControllerのRawImageフィールドにD&Dして関連付け

Kinectをつないで実行してみよう！！！

どうですか？

Texture2Dは左下が原点なので上下反転

Raw Imageの設定を調整して上下反転させる

Raw Image の UV Rect を Y = 1 H = -1に設定する

こうなるはずです！

ステップ③ Colorデータを参照しよう

ステップ③ Colorデータを参照しよう

全体像は以下のGistで

https://gist.github.com/KzoNag/3602488de99ff1586e9a

フィールドの定義に追加

初期化（Start）変更・追加

Colorデータ

byte型

ピクセルごとに4つのbyte値

RGBAの値

左上ピクセルから開始される１次元配列

124 213 84 255 145 4 19 255 ...

Depthデータ

ushort型

ピクセルごとに1つのushort値

カメラからの距離(500mm~8000mm)

データが取れない点は 0

左上ピクセルから開始される１次元配列

1200 500 0 7000 5181 2120 ...

更新処理（Update）追加・変更

1. Color, Depthの最新データを取得

2. Colorデータを参照するための対応情報を取得

3. ピクセルごとの処理を変更（人物領域はColorデータを参照して色付け）

Color, Depthの最新データを取得

Colorデータを参照するための対応情報を取得

ColorSpacePointカラー画像の点を表す（X,Y）の値

BodyIndexの任意の点が、カラー画像上のどの点に対応するかを取得できる

bodyIndexData[100]の点カラー画像のX=1100, Y=200の点

ピクセルごとの処理を変更 (1/3)

対応するカラー画像の座標を取得

配列アクセスするためにインデックスを計算

ピクセルごとの処理を変更 (2/3)

対応するカラー座標が適切な範囲内であればデータを参照して色付け

ピクセルごとの処理を変更 (3/3)

適切な範囲内でなければ固定の色をつける

Kinectをつないで実行してみよう！！！

ゲームの世界にこんにちは！

まとめ

➢ KinectのデータはReaderからFrameを取得し、バッファにコピーすることで得られる

➢ KinectのデータをもとにTexture2Dを作ればUnity上で表示できる

➢ データ間の対応関係はCoordinateMapperから取得できる

ここからは自由に遊んでみてください

➢ BodyIndexだけでも「かまいたちの夜」ごっことかできそう

➢ 3Dのキャラクターと共演するとか

➢ Bodyデータを使えば当たり判定もつけられる？