第2回ふくおかAI・IoT祭り内でのハンズオン資料

1. ノンプログラミングで始めよう
HoloLensコンテンツ開発
3.Mar.2018 ふくおかAI・IoT祭り

2. 本日作成するコンテンツ
https://youtu.be/ATl6NMwLB4s

3. 開発環境とツール
開発環境：Unity
 マルチプラットフォーム対応のゲームエンジンおよび開発環境
 GUI上で視覚的にCGを配置したり機能を追加したりできる
 C#でインタラクティブな挙動を記述することが可能
 Unity5.5からはHoloLens標準サポート
開発支援ツール：MixedRealityToolKit
 HoloLens対応システムの開発を支援するツールキット
 様々なサンプルプログラムを提供
 AirTapやカーソルの挙動、空間認識をわずかな手間で利用できる
 Unityエディタ上で視点の移動をする機能なども提供
→ 実機やエミュレータ(Windows10 pro対応)がなくても開発可能

4. まずはUnityの操作の基本

5. プロジェクトを作成
(1) MixedRealityToolkit-Unity-xxx.zipをどこかに解凍
(2) Unityを起動後、画面右上のOPENをクリック
OPEN

6. プロジェクトを作成
HoloToolkit-Unity-masterフォルダを開き、[フォルダーの選択]をクリック
HoloToolkit-Unity-master
フォルダーの選択

7. Unityの操作画面(概要)
ゲーム空間の設計画面
空間に置いた
オブジェクト
の名称一覧
プロジェクトに追加されたAsset(CGやプログラムなど)の一覧

8. ゲーム空間にCGを追加しよう
右クリック
3D Object→Cube

9. 実行してみよう
クリックして実行
クリックして終了
カメラから見た空間

10. CGの詳細情報の編集：色の設定 (1/3)
②右クリック
③ Create
マテリアル（色や質感の設定）を作成
④ Material
①Assets

11. CGの詳細情報の編集：色の設定 (2/3)
作成したマテリアルの色(Albedo)を設定
(2) Albedoの右側をクリックし、色を選択
(1)作成したマテリアルをクリック

12. CGの詳細情報の編集：色の設定 (3/3)
オブジェクト（Cube）のマテリアルを開き、作成したマテリアルを割り当て
(2) Materialsの横の▼
(1)Cube
(3) Element0に
ドラッグ&ドロップ

13. オブジェクトの位置・向き・サイズを調整
クリックして選択
移動 回転 拡大・縮小

14. Scene(設計画面)の視点を変えよう
[←] [→]で左右移動
[↑] [↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右
他にもいろいろ
→ http://goo.gl/Lq1ILT

15. 数値を用いたCG位置・サイズの指定
クリック
Positionを0 0 1.5に変更
Scaleを全て0.2に変更
※位置や大きさの単位はm

16. Sceneの保存
Scene名
 [Ctrl]+[s]でダイアログを開き、好きな名前で保存
 コンテンツ作成中はこまめに[Ctrl]+[s]すること

17. MRToolKitを用いた開発

18. HoloLens Cameraの設定
Main Cameraを削除
→ Deleteキー

19. HoloLens Cameraの設定
Assets → HoloToolkit → Input → Prefabs
HoloLensCameraを
ドラッグ&ドロップ

20. 動作確認
[←] [→]で左右移動
[↑] [↓]で前進/後退
[Q] [E]で上下
右クリック+マウス移動で回転

21. 補足：移動速度の設定方法
(1)操作内容を選択
KeyboardXZTranslation
(2) Sensitivity Scaleを0.5
(3)Axis TypeをKeyboard Arrows
↑↓← →キーのみが移動に対応し、移動量もデフォルトより小さくなる

22. 2つ目のオブジェクトを追加しよう
写真を追加

23. 写真の追加
サンプルまたは好きな写真をAssetsフォルダに追加
Assets
→ Import New Asset

24. 写真を貼り付ける板を作成
右クリック
3D Object → Quad

25. 写真を貼り付けるためのマテリアル作成
②右クリック
③ Create
④ Material
①Assets

26. 写真を貼り付けるためのマテリアル作成
②Shader
③ Unlit
④ Texture
①新しく作ったマテリアル

27. 写真を貼り付けるためのマテリアル作成
写真を今作ったマテリアルのテクスチャに割り当てる
インポートした写真

28. 写真の貼り付け
写真を割り当てたマテリアルをQuadに登録
(2)Materialsの横の▼
(1)Quad
(3) Element0に
ドラッグ&ドロップ

29. 見た目の調整
ほどほどのサイズに調整してCubeの横あたりに配置

30. カーソルの追加
HoloToolkit → Input → Prefabs → Cursor
Basic Cursorをドラッグ&ドロップ

31. カーソルの追加
カーソルが追加されたことを確認。
ただし、まだ頭部の動きとは連動しない
Basic Cursor
をダブルクリック

32. カーソルの挙動やAirTapを管理する機能を追加
HoloToolkit → Input → Prefabs
Input Managerをドラッグ&ドロップ

33. 動作確認
カーソルが頭部の動きに追従
実はこの時点で、カーソルがどのオブジェクトを選択しているかも判別されている

34. Cubeを手で移動できるようにしよう
(1)Cube
(2) AddComponent
(3) Hand Draggable
と検索し、ファイルをクリック

35. UnityEditor内で仮想的にAirTapやドラッグしよう
HoloToolkit → Input → Prefabs
LeftHandInputControlをドラッグ&ドロップ

36. 動作確認
カーソルをあてて [Shift] 手が表示されたら左クリック 握ったらそのまま
カーソルを移動

37. 画像も手で動かせるようにしよう
(1) Quad
(2) AddComponent
(3) Hand Draggable
と検索し、ファイルをクリック

38. HandDraggableの細かい設定
[Rotation Mode]
• Lock Object Rotation
向きは固定で位置だけ移動
• Orient Toward User
常にユーザーの方を向く
ように移動
• Orient Toward User
And Keep Upright
上方向は地面に垂直な状態を
保ちつつユーザーの方向を向く

39. 実機で動かそう : 出力の際の設定
(1)Edit
(2)Project Settings
(3)Player
(4)ProductNameを
自分の名前に
(5)UWP App settings

40. 実機で動かそう : 出力の際の設定
Short nameを
自分の名前に
icon
Publishing Settings
Package Nameを
自分の名前に

41. 実機で動かそう : 出力の際の設定
File
Build Settings

42. 実機で動かそう : Build
Add OpenScenes
Universal Windows Platform
Switch Platform
・ Target device
HoloLens
・ Build Type
D3D
・ SDK
Latest Installed
最後にBuild

43. 実機で動かそう : Build用フォルダの作成
Appと名前を付ける
新しいフォルダ
フォルダーの選択

44. 実機で動かそう
プロジェクト名.sln
Appフォルダ

45. 実機で動かそう : HoloLensへのデプロイ
x86
横の▼
Device
(USB接続の場合)

46. 実機で動かそう : HoloLensへのデプロイ
Debug
Start Without
Debugging

47. 完成