2016/11/27 オープンソースカンファレンス広島 で使ったスライドです。

1. Kinect や
センサーデバイスと連動した
楽しいアプリ開発
一般社団法人T.M.C.N
株式会社システムフレンド
前本 知志

2. ・会社ではセンサー＆デバイス部長やってます！
KINECT等のセンサーを使ったアプリ（イベントコンテンツ、画像処理、画像認識、医療ヘルスケア系）
スマフォのARアプリなどを作っています。
http://www.systemfriend.co.jp/kinect_nui https://youtu.be/ZSXwhj8HqkE
・TMCN (Tokyo MotionControl Network) Co-founder(共同創設者)
https://www.facebook.com/TokyoMotioncontrolNetwork
・著書「Intel RealSense SDK センサープログラミング」
https://www.shoeisha.co.jp/book/detail/9784798139630
・HoloMagicians – 日本初のホロレンズ開発者チーム
http://holomagicians.azurewebsites.net/
・Microsoft MVP for Windows Development
https://mvp.microsoft.com/ja-jp/PublicProfile/5002154?fullName=Satoshi%20%20Maemoto
まえもと さとし
2
今日名刺を忘れてしまいました！
Facebook 前本 知志
Twitter @peugeot106s16

3. https://www.facebook.com/TokyoMotioncontrolNetwork
https://www.facebook.com/HiroshimaMotionControlNetwork/

4. 安価なデバイスと開発環境
 高性能なデバイスやセンサーが比較的安価に手に入るようになった
 無料で利用できる開発環境が手に入るようになった

5. 最近いろいろ流行ってますよね！

6. やっぱりキネクトが好き！
 全身をトラッキングできる
 6人まで骨格情報が同時にとれる
 カメラ映像も綺麗になった
>> みんなで一緒に盛り上がれる！ <<

7. Unityと相性がよい
 Kinect for Windows v2 SDKが公式にUnityプラグインを提供
>> 簡単にKINECTを使えるプレファブ群
>> サンプルシーンの提供
 Visual Studio 2015 Tools for Unity
>> Visual Studioでデバッグが可能
>> UnityのGameObject用コード補完

8. KINECT V2とUnityなら
こんなことやりたくなるよね

9. 座標系合わせたくなるよね
 KINECTの3D骨格情報を取得(メートル座標系)
 Unity座標系と対応させる
（1Unity＝1メートル設定で考える）
X
Y Z
1メートル
↓
1Unity

10. リアルとバーチャルを
シンクロしたくなるよね
 KINECTのリアル位置とUnity内のカメラ位置、角度、視点を合わせる
 カメラ映像とのシンクロを取る
＜三種の神器＞
• メジャー
• 養生テープ
• 三角関数

11. 3Dモデルを操りたくなるよね
 骨格情報をリアルタイムに3Dモデルに反映してみると…
このコンテンツは、『ユニティちゃんライセンス』で提供されています。

12. やばい、たのしい！！！
https://youtu.be/M8e9mCI-u80

13. KINECT と Unityで
いろいろ作ってみた

14. PROJECT DAFTY
DAFTY Live System

15. エアーシンセ
 一緒に踊ってエアーで音を鳴らすアプリ（単純）
http://www.systemfriend.co.jp/airsynth

16. 子どもは大好きみたいです

17. いろんなパーティにオファーが！
 アキバで学べるパーティAKIPARTY vol.3 ～くりすますだお☆～

18. 学校でもやっちゃったw
(横浜 岩崎学園ISCプログラミングコンテスト)
https://youtu.be/ivL6ZxukTlo

19. http://www.systemfriend.co.jp/charamirror

20. ユニティちゃんと踊れる！
抱っこだってできる！
2015/08/28
CEDEC 2015
https://youtu.be/ZSXwhj8HqkE

21. 子どもが狂ったように遊びます

22. 現実空間とCGのミキシング -> MR
https://youtu.be/YxCGnmfChKk

23. KINECT-MR
GPU処理について

24. リアルとバーチャルの
重なりを計算する
 KINECTのDepthとCGのZバッファをGPUで高速に比較し物体の前後関係を判定
し表示する

25. GPUでの処理 – UnityでShaderを書く
 基本的にはこんなに簡単
if (KINECTのDepth<CGのZバッファ)
{
return KINECTのColor;
}
else
{
return CGのピクセル
}
CGのZバッファ（_CameraDepthTexture）からはスクリーン座標をキーにして
アクセスします。詳しくは調べてみてください^^

26. だが言うは易し…
発生する課題
 スムーズな体験をするためには秒間30フレームを下回らない処理スピードを保
持する
 メインメモリ→GPU転送は低速だが、下記は転送しなければならない
1. RGBカラー映像（1920x1080 Full-Color Full-HD）
2. KINECTのDepthデータ（512×424）
3. RGBとDepthのマッピングデータ（1920x1080 ）
 Zバッファに書き込みをしないshaderを使っているオブジェクトやパーティク
ルは表示されなくなる

27. だが言うは易し…
「きゃらみらー」では、、
 メインメモリ→GPUへのデータ転送を数フレームに渡って分割したり、送る頻
度を展示中でもリアルタイムに調整できる
→少々送るのがずれても体験として気にならないものを見極め、この処理の対
象とする
 パーティクルについては専用の表示レイヤーを設けて表示されるようにしてい
る。
その代わりパーティクルについてはMRでなくAR表示となるがあまり気になら
ない感じ

28. AR・VR・MR

29. AR : Augumented Reality
現実世界の上に仮想世界(CG)を上書きする。
現実世界の映像上にCGを重ね合わせる。
映像の表示優先度は常に 現実世界＜CG
Screen
High layer

30. ARの例

31. まあ、今はこれですよね。

32. VR : Virtual Reality
現実世界からの情報を100%カットし、仮想世界(CG)に没
入する。
現実世界の映像、自分の手などの物体をセンシングして
融合する場合もCGオブジェクトとしてそれらが登場す
る。
映像の表示比率は常に 現実世界:CG = 0:100
Screen
Separate
CG World
Include

33. VRの例

34. HTC VIVE やばい。。
https://youtu.be/40Xogw0mg4Q?t=14m3s
VRとポジショントラッキングが合わさるとすごい

35. 複合現実
（ふくごうげんじつ、英: Mixed Reality、MR）
とは、現実空間と仮想空間を混合し、現実のモノと仮想的なモノがリアル
タイムで影響しあう新たな空間を構築する技術全般を指す。複合現実感と
も。
拡張現実と拡張仮想を包含する概念である。
空間的整合性、時間的整合性、光学的整合性など実空間と合致させる要素
によって、その性質が評価される。
Wikipediaより

36. MR : Mixed Reality
現実世界と仮想世界(CG)を融合する。
融合結果の前後関係を反映した状態の映像が創り出され
る。
MRを実現するためには現実世界の3Dスキャンが必要と
なる。
Screen
+
MR World
CG World
Real World

37. MR の例

38. 知っておくと頭が良さそうに思われる？表
日本語名 見分けるポイント 必要な処理能力
AR（エイアール) 拡張現実 カメラ映像で現実世界が見え
る
CGに自分の手をかざすと絶対
手より前にCGが表示される
低
VR（ブイアール） 仮想現実 宇宙とか体内とか女の子の部
屋とか、ありえない場所に放
り込まれる
振り向くとゾンビがいる
中～高
MR（エムアール） 複合現実 カメラ映像または普通に眼鏡
越しで現実世界が見える
CGに自分の手をかざすと手よ
り前のCGは見えるし、手より
奥のCGは手に隠れる
中～高

39. HoloLens

40. こんなイメージですよね
かわいくないよう。。

41. かわいい子を
呼び出したくなりますよね。
https://youtu.be/_st7Z_L-Aw8

42. では、作り方を。

43. 最低限必要なもの
 Visual Studio 2015 Update 3
Universal Windows App Development Tool
- Tools (1.4) and Windows 10 SDK (10.0.10586) を選択
https://developer.microsoft.com/en-us/windows/downloads
 Unity HoloLens Technical Preview
Unity5.4.0f3のHoloLens開発用特別版
https://unity3d.com/jp/partners/microsoft/hololens
 Unityちゃん3Dモデルデータ
http://unity-chan.com/

44. 超便利なツールキット
HoloToolkit-Unity
 ジェスチャー入力や、空間マッピングなどなど豊富な機能を備
えたUnityプロジェクト
 HoloLens開発をサポートしてくれるエディタ拡張もある
 かなりアクティブに更新されてる
 もちろんオープンソースなので、困ったときに読み込むと結構
答えがあったりする。
https://github.com/Microsoft/HoloToolkit-Unity/

45. Unityプロジェクトとシーンの設定
 HoloToolkit-Unityのエディタ拡張でHoloToolkitメニューが現れる
 Apply HoloLens Project Settings でプロジェクト設定がいいかんじに
 Apply HoloLens Scene Settings でシーン設定（カメラなど）がいい感じに
https://developer.microsoft.com/en-us/windows/holographic/unity_development_overview
手動設定はめんどくさい

46. Unityプロジェクトとシーンの設定
 MainCameraのClipping Planes – Near を小さくするとより一層彼女と
親密になれます

47. Unityプロジェクトとシーンの設定
 現実世界をスキャンしてメッシュ化してくれるSpatialMappingプレファブを配
置します

48. ユニティちゃんを配置
 ユニティちゃんの入れ方はわかるよね？
(PrefabなどなどをもってきてAssetsにいれてね）
 MainCameraの視野内で少し高めに配置する事

49. ユニティちゃんへの設定
 物理エンジン系設定を追加
Colliderはこんな感じに↓

50. コンテンツの制御
 空のGameObjectにScriptをぺたん。

51. コンテンツの制御

52. 実機にデプロイ

53. ビルド設定
 Windows Store (UWP)アプリとして書き出します
→Visual Studioのソリューションができる

54. Visual Studioでビルドする
 HoloLensをPCにUSB接続し、x86デバイスとして実行する

55. ふぅ。
https://youtu.be/_st7Z_L-Aw8

56. まとめ
 KINECTやHoloLensのアプリはUnityでつくれる
 Unityを使えば現実空間とCGをミックスした楽しいコンテンツが作れる
 HoloLensのアプリはUnityからWindows Store(UWP)プロジェクトを書き
出す流れで実機へデプロイする
 HoloLensのアプリをつくるには以下の3つのスキルがいりそうです。
1. Unityをつかえる
2. 現実空間とVR空間のことがわかる
3. Windows Store(UWP)アプリが作れる（凝り始めると必須）
https://github.com/SystemFriend/HoloLensUnityChan/
ソースコードはこちら