2018/06/30に開催したARコンテンツ作成勉強会、HoloLens編の資料。

1. ARコンテンツ作成勉強会
ノンプログラミングではじめるHoloLens
#AR_Fukuoka

2. 自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：九州先端科学技術研究所(ISIT)
専門：AR/VRを用いた情報可視化と各種計測
コミュニティ：ARコンテンツ作成勉強会

3. Twitterと勉強会ページで情報を発信しています
#AR_Fukuoka Googleで「AR勉強会」で検索

4. FacebookグループのxR九州もよろしく

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

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

7. プロジェクトを作成
バージョンの違いに関する確認ダイアログが出た場合はContinueをクリック
Continue

8. 今日の内容
https://youtu.be/YdZdNzZiowQ

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

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

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

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

13. CGの詳細情報の編集：色の設定 (1/4)
マテリアル（色や質感の設定）を作成
①Assets
②空白を右クリック

14. CGの詳細情報の編集：色の設定 (2/4)
マテリアル（色や質感の設定）を作成
①Create
②Material

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

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

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

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

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

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

21. オブジェクトの追加：Asset Storeの利用 (1/8)
Window

22. オブジェクトの追加：Asset Storeの利用 (2/8)
Asset Store

23. オブジェクトの追加：Asset Storeの利用 (3/8)
Kyleと入力

24. オブジェクトの追加：Asset Storeの利用 (4/8)
Space Robot Kyleをクリック

25. オブジェクトの追加：Asset Storeの利用 (5/8)
① ダウンロードをクリック
② インポートをクリック

26. オブジェクトの追加：Asset Storeの利用 (6/8)
Import

27. オブジェクトの追加：Asset Storeの利用 (7/8)
①RobotKyle → Model
②RobotKyle
③Hierarchyにドラッグ&ドロップ

28. オブジェクトの追加：Asset Storeの利用 (8/8)
Position: 任意
Rotation: Yを180
Scale: 全て0.3
①RobotKyle

29. MRToolKitを用いた開発

30. HoloLens用のビルド設定 (1/5)
①File
②BuildSettings

31. HoloLens用のビルド設定 (2/5)
①Add Open Scene
②Universal Windows Platform
③Switch Platform

32. HoloLens用のビルド設定 (3/5)
① 各種設定
・ Target device：HoloLens
・ Build Type：D3D
・ SDK：Latest Installed
②Player Settings

33. HoloLens用のビルド設定 (4/5)
①Product Nameを自分の名前に
②Icon
②Short nameを自分の名前に

34. HoloLens用のビルド設定 (5/5)
①Publishing Settings
②Package nameを自分の名前に

35. HoloLens Cameraの設定 (1/2)
Main Cameraを削除
→ Deleteキー

36. HoloLens Cameraの設定 (2/2)
①Assets → HoloToolkit → Input → Prefabs
②HoloLensCamera
③HoloLensCameraを
ドラッグ&ドロップ

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

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

39. カーソルの追加
①Assets → HoloToolkit → Input → Prefabs → Cursor
②BasicCursor
③Hierarchyにドラッグ&ドロップ

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

41. カーソルの挙動やAirTapを管理する機能を追加
① HoloToolkit → Input → Prefabs
②Input Manager

42. 動作確認
カーソルが頭部の動きに追従
Cubeは選択できるがRobotKyleは選択できていない(要Collider)
Shift + クリックでAirTap

43. 接触判定：Colliderの設定
①RobotKyle
② Add Component

44. 接触判定：Colliderの設定
①Physics ② Box Collider

45. 接触判定：Colliderの設定
①RobotKyle
② BoxColliderの
Edit Colliderをクリック

46. 接触判定：Colliderの設定
各面の緑の点をドラッグしてKyleを内包するサイズに変更

47. 動作確認
今度は接触判定する

48. Cubeを手で移動できるようにしよう
①Cube
② AddComponent

49. Cubeを手で移動できるようにしよう
① Handで検索
② Hand Draggableをクリック

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

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

52. 両手操作で移動・回転・スケーリング
①RobotKyle
② AddComponent

53. 両手操作で移動・回転・スケーリング
① Two Handで検索
②Two Hand Manipulatableをクリック

54. 両手操作で移動・回転・スケーリング
①RobotKyle
② Two Hand Manipulatable
が追加されていることを確認

55. 両手操作で移動・回転・スケーリング
[Manipulation Mode]
• Move
両手で移動
• Scale
両手で拡大縮小
• Rotate
両手で回転
※上記を組み合わせることが可能
[Rotation Constraint]
• 回転する軸(X,Y,Z)を固定
[Enable One Hand Movement]
• 片手で移動or両手で移動

56. 実機で動作確認
①File
② Build Settings

57. 実機で動作確認
Build

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

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

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

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

62. 続いてマーカー認識

63. 次の準備
Sample1を選択してCtrl + D

64. 次の準備
①Sample2をダブルクリック
②Sample2であることを確認

65. 次の準備
Cubeを削除

66. 次の準備
①RobotKyle
②Two Hand...右の
③Remove Component

67. Vuforiaのライセンスキー作成 (1/3)
VuforiaでのARコンテンツ作成には
ライセンスキーを事前に作る必要がある
→ https://developer.vuforia.com/
① Develop
② License Manager
➂ Get Development Key

68. Vuforiaのライセンスキー作成 (2/3)
← アプリ名を入力(半角英数)
チェック
Confirm

69. Vuforiaのライセンスキー作成 (3/3)
ライセンスキーが発行されたことを確認
ライセンスキー
クリック
※ライセンスキーは
原則、アプリ毎に
作成する

70. Vuforia利用のための設定
①Edit
②Project Settings
③Player

71. Vuforia利用のための設定
①Publishing Settings
②Capabilities
InternetClientをオン
WebCamをオン

72. Vuforia利用のための設定
①XR Settings
②Vuforia Augmented Realityをオン

73. Vuforia利用のための設定
Accept

74. Vuforia利用のための設定
②Add Component
①HoloLensCamera

75. Vuforia利用のための設定
Vuforiaで検索
Vuforia Behaviour
をダブルクリック

76. Vuforia利用のための設定
Open Vuforia configuration

77. Vuforia利用のための設定
App License Keyに
ライセンスキーをペースト
Device Typeを
Digital Eyewareに変更
Device Configで
HoloLensを選択

78. マーカーの利用設定
①空白を右クリック
②Vuforia
③Image

79. マーカーの利用設定
画像未割当のマーカー

80. 今回使用するマーカー
人間にとっては認識しやすいが
コンピュータにとっては認識が難しい
コンピュータで認識しやすい目印
のデータを作成してあげる

81. マーカーを作成 (1/5)
以下の順にクリック
[Develop]
→ [Target Manager]
→ [Add Database]
VuforiaのDeveloper Portalサイトにアクセス&ログイン

82. マーカーを作成 (2/5)
1. データベースの名称を指定
2. TypeはDeviceを指定
データベース名
この資料ではTest
ターゲット画像をVuforiaのサイトに保存するためのフォルダ作成
Create

83. ターゲットを作成 (3/5)
Target Managerから使用するデータベース開く
データベースを開く

84. ターゲットを作成 (4/5)
 [Add Target]をクリック
 Single Imageを選択
 ターゲットとして
使用したい画像を選択
(ILoveAR.jpg)
 Widthで画像の幅(m)を入力
 [Add]をクリック
0.160.1

85. ターゲットを作成 (5/5)
[Download Dataset]
→ [Unity Editor]
→ [Download]
分かり易い場所に保存

86. ターゲットをプロジェクトに追加 (1/2)
[Assets]
→ [Import Package]
→ [Custom Package…]
→

87. ターゲットをプロジェクトに追加 (2/2)
Import

88. マーカーの利用設定
②ImageTargetBehaviour
③DataBaseをTestに変更
①ImageTarget

89. マーカーの利用設定
①Advancedの横の▼
②ExtendedTrackingをオン

90. マーカーの利用設定
②OpenVuforiaConfiguration
①HoloLensCamera

91. マーカーの利用設定
【Databases】
Load Test Database
とActivateをオン

92. マーカとCGと対応付け
RobotKyleをImageTarget
にドラッグ&ドロップ

93. マーカとCGと対応付け
RobotKyleがImageTarget
の子要素になっていればOK

94. マーカーの利用設定
ロボットをマーカーの中心に移動

95. HoloLensカメラの微調整
①HoloLensCamera
②Clipping Planes
のNearを0.2

96. 実機で動作確認
Build Settings...

97. 実機で動作確認
①Add Open Scenes
②Sample1オフ
Sample2オン
③Build

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

99. 完成