2020/08/13に開催したMRTKハンズオンの資料

1. ARコンテンツ作成勉強会
ノンプログラミングで始めるAR開発 with MRTK

2. 自己紹介
氏名：吉永崇(Takashi Yoshinaga)
所属：Steampunk Digital株式会社
九州先端科学技術研究所(ISIT)
専門：医療支援AR,運動計測,ホログラム

3. AR×医療支援：超音波診断
https://youtu.be/zI8S49qpiOs

4. ウェアラブル・モーションキャプチャの開発
https://youtu.be/Po-orPCgi4E

5. 趣味開発： Volumetric Video
Kinect等で取得したPoint Cloudを配信し、各種のARデバイスで表示
https://youtu.be/Pu2QlBQJoUo

6. ARコンテンツ作成勉強会の紹介
 2013年5月に勉強会をスタートし
 ARコンテンツの作り方をハンズオン形式で学ぶ
 人数は5~10名程度の少人数で実施
 参加条件はAR/VRに興味がある人(知識不要)
 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、北海道)

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

8. #AR_Fukuoka
ハッシュタグ

9. Special Thanks
エンジニアカフェ

10. 今日の内容
MRTKを使ったオブジェクトの表示〜手やカーソルを使った操作
https://youtu.be/Yae3bOtidTk

11. 素材のダウンロード
http://arfukuoka.lolipop.jp/mrtk_np/Sample.zip

12. SDKのダウンロード (1/3)
https://github.com/Microsoft/MixedRealityToolkit-Unity
Releases

13. SDKのダウンロード (2/3)
今回はMicrosoft Mixed Reality Toolkit v2.4.0を使用
少し下にスクロール

14. SDKのダウンロード (3/3)
Foundation.2.4.0.unitypackageをダウンロード
Foundation.2.4.0.unitypackage

15. プロジェクトの作成 (1/6)
UnityHubを起動して画面左側のプロジェクトをクリック
プロジェクト

16. プロジェクトの作成 (2/6)
新規作成の右側にある▽をクリック
新規作成横の▽

17. プロジェクトの作成 (3/6)
2018.4.xxf1 (資料では2018.4.25f1)を選択
2018.4.xxf1

18. プロジェクトの作成 (4/6)
①3D ②プロジェクト名を入力
(例:ARFukuoka_MRTK)
③保存するフォルダを選択

19. プロジェクトの作成 (5/6)
作成

20. プロジェクトの作成 (6/6)
ウィンドウが表示されればOK

21. SDKのインストール (1/3)
ダウンロードしたunitypackageをダブルクリックし、
Import Unity Packageダイアログ内の[Import]をクリック
Microsoft.MixedReality.
Toolkit.Unity.Foundation
.2.4.0.unitypackage
Import

22. SDKのインストール (2/3)
Apply
ApplyをクリックしてxR用のセッティングを行う

23. SDKのインストール (3/3)
閉じる
MRTK Project Configuratorを閉じる

24. Unityの操作画面(概要)
ゲーム空間の設計画面

25. 空間にCGを追加しよう (1/3)
何も選択していない状態で
空白を右クリック

26. 空間にCGを追加しよう (2/3)
①3D Object
②Quad

27. 空間にCGを追加しよう (3/3)
四角形が追加される
※角度によっては見えない

28. Scene内の視点の変更
[←][→]で左右移動
[↑][↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右

29. Quadが見えなくなってしまった場合
Hierarchy内のオブジェクトのダブルクリックでオブジェクトを視界の中央に
Quadをダブルクリック

30. 動作確認
カメラから見た空間
が表示される
をクリックして実行
クリックして終了

31. オブジェクトの位置・向き・サイズを調整
Quadをクリック

32. オブジェクトの位置・向き・サイズを調整
移動 回転 拡大・縮小

33. 数値入力による位置・向き・サイズ調整
Quadをクリック

34. 数値入力による位置・向き・サイズ調整
 オブジェクトの詳細の表示・追加・変更はInspectorタブ内で行う
 位置や角度、スケールを数字を用いて指定することも可能
Inspector

35. 数値入力による位置・向き・サイズ調整
 オブジェクトの詳細の表示・追加・変更はInspectorタブ内で行う
 位置や角度、スケールを数字を用いて指定することも可能
[下記設定にする]
Positionを 0 0 1
Rotation 0 0 0
Scale 0.3 0.3 0.3

36. 補足：x,y,z軸について
Y
Z
X
この図ではカメラから見て横がX、奥行方向がZ、そして地面に対して垂直がY

37. Scene内の視点の調整
拡大・縮小や移動により見づらくなった

38. Scene内の視点の変更 (再)
Hierarchy内のオブジェクトのダブルクリックでオブジェクトを視界の中央に
Quadをダブルクリック

39. Next Step
Inspectorで操作できる詳細情報には
位置・角度・サイズ以外にも
見た目(色や質感)、挙動なども含まれる

40. 見た目の変更の概要 (1/4)
① Quad
② Mesh Rendererに注目
③ Materialsを開く

41. 見た目の変更の概要 (2/4)
Element0

42. 見た目の変更の概要 (3/4)
ここに紐づけられるMaterialで
色や質感を設定している

43. 見た目の変更の概要 (4/4)
Materialの詳細はInspectorの下方で確認
できるがDefault-Materialは編集できない

44. 見た目を変えるにはMaterialファイルを作る必要がある

45. マテリアルの作成 (1/3)
マテリアル（色や質感の設定）を作成
①Assets
②右クリック

46. マテリアルの作成 (2/3)
マテリアル（色や質感の設定）を作成
①Create
②Material

47. マテリアルの作成 (3/3)
New Materialができているはず
マテリアル（色や質感の設定）を作成

48. マテリアルの適用 (1/3)
オブジェクト（Quad）のマテリアルを開く
② Default-Materialに注目
①Quad

49. マテリアルの適用 (2/3)
オブジェクト（Quad）のマテリアルを開く
Default-Material
にドラッグ&ドロップ

50. マテリアルの適用 (3/3)
①Quad
②New Materialに
置き換わっていればOK

51. テクスチャを適用してみよう

52. テクスチャの適用 (1/8)
②ドロップダウンを開く
③Unlit
④Transparent①New Materialに注目

53. テクスチャの適用 (2/8)
①▼をクリックして
NewMaterialを開く
②ここで画像(テクスチャ)を指定

54. テクスチャの適用 (3/8)
①Assets
②Import New Asset

55. テクスチャの適用 (4/8)
①arfukuoka.png
②Import

56. テクスチャの適用 (5/8)
①Quad
②New Materialを開く

57. テクスチャの適用 (6/8)
①Assets
②arfukuoka.pngに注目

58. テクスチャの適用 (7/8)
arfukuoka.pngをNone(Texture)に
ドラッグ&ドロップ

59. テクスチャの適用 (8/8)
テクスチャが反映される

60. 現状を保存 (1/4)
File

61. 現状を保存 (2/4)
SaveAs...

62. 現状を保存 (3/4)
①Sample1とする
②保存

63. 現状を保存 (4/4)
Sample1ができていればOK

64. 次回以降は
Ctrl / Command + S
で上書き保存可能

65. ここからようやくMRTK

66. 始めに実現すること
UnityEditor内で移動や手を使った操作を行う準備

67. MRTK用のカメラや表示の設定 (1/3)
MixedRealityToolkit

68. MRTK用のカメラや表示の設定 (2/3)
Add to Scene and Configure...

69. MRTK用のカメラや表示の設定 (3/3)
MixedRealityToolKitと
MixedRealityPlayspaceが
追加されていればOK

70. 動作確認 (1/4)
Playをクリック

71. 動作確認 (2/4)
[A][D]で左右移動
[W][S]でズームイン/アウト
[Q][E]で上下移動
右クリック+ドラッグで回転

72. 動作確認 (3/4)
[Shift]で左手を表示
[Space]で右手を表示
手を表示した状態+
[クリック]でつまむ
[スクロール]で前後移動
※今のところオブジェクトは操作できない

73. 動作確認 (4/4)
Playを再度クリックして停止
(青くなければOK)

74. オブジェクトを手で操作しよう

75. Quadを操作可能にする (1/3)
①Quad
②Add Component

76. Quadを操作可能にする (2/3)
manipulationで検索
ManipulationHandlerを選択

77. Quadを操作可能にする (3/3)
①Quad
②ManipulationHandler
が追加される

78. オプション
①Quad
②One Hand Rotation Farを
Gravity Aligned Maintain Rotation To User

79. 動作確認 (1/4)
Playをクリック

80. 片手での操作

81. 動作確認 (2/4)
ShiftまたはSpaceで手を表示

82. 動作確認 (3/4)
指の先から出ているカーソルを合わせる

83. 動作確認 (4/4)
ドラッグして移動

84. 両手での操作

85. 動作確認 (1/5)
Shiftで左手を表示

86. 動作確認 (2/5)
①カーソルを合わせてクリック
② [T]を押下して手を固定

87. 動作確認 (3/5)
Spaceで右手を表示

88. 動作確認 (4/5)
カーソルを合わせてドラッグ

89. 動作確認 (5/5)
前後左右に動かして回転・拡大縮小

90. スマホを想定した操作

91. 動作確認 (6/7)
よく見ると丸いカーソルが視界の中央にある

92. 動作確認 (7/7)
そのままドラッグして移動

93. 自前のオブジェクトを追加しよう
(今回は事前に用意したオブジェクト)

94. OBJファイルを追加 (1/6)
Assets

95. OBJファイルを追加 (2/6)
Sampleフォルダ → Model

96. OBJファイルを追加 (3/6)
ModelフォルダをAssetsに
ドラッグ&ドロップ

97. OBJファイルを追加 (4/6)
Model

98. OBJファイルを追加 (5/6)
model.obj

99. OBJファイルを追加 (6/6)
Hierarchyにドラッグ&ドロップ

100. オブジェクトの微調整 (1/3)
①model
椅子を適当な位置に配置
Position 0.5 0 1

101. オブジェクトの微調整 (2/3)
model左の▼をクリック
して下の階層を開く

102. オブジェクトの微調整 (3/3)
modelの下の階層のmodel
椅子を適当な位置に配置
Position 0 -0.45 0
Rotation 0 180 0
上の階層のmodelだけでも調整可能。
今回はこの後の操作の都合上分けている。

103. カーソルや手との接触判定
接触判定をするにはmodel.objに
Colliderを追加する必要がある

104. Colliderの追加 (1/5)
①model
(上の階層の方) ②Add Component

105. Colliderの追加 (2/5)
①Boxで検索
②BoxCollider

106. Colliderの追加 (3/5)
バウンディングボックスが表示される

107. Colliderの追加 (4/5)
①model
②Edit Collider

108. Colliderの追加 (5/5)
各面の■を動かして大きさを編集

109. 椅子を手で操作可能にする (1/5)
①model
②Add Component

110. 椅子を手で操作可能にする (2/5)
①maipulationで検索
②ManipulationHandler

111. 椅子を手で操作可能にする (5/5)
①model
② Manipulation Handlerが追加される

112. 両手操作時は回転のみにする
①model
②Two Hand Manipulation Type
をScaleにする

113. 動作確認

114. 動作確認
Stop

115. パフォーマンスの表示を消す
これを消す

116. MRTKの詳細設定
①MixedRealityToolKit
②Mixed Reality Toolkit
の下のドロップダウンメニュー

117. MRTKの詳細設定
①MixedRealityToolKit
②DefaultHololens2ConfigureProfile

118. MRTKの詳細設定
Clone

119. MRTKの詳細設定
①ProfileNameをSample1 MixedRealityToolkit...
に変更 (NewをSample1に変えるだけ)
②Clone

120. MRTKの詳細設定
①Diagnostics
②Enable Diagnostics System
のチェックを外す

121. 動作確認
パフォーマンス表示が消えた

122. 動作確認
Stop

123.  HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール

124.  HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール

125. Build Setting for HoloLens2
File

126. Build Setting for HoloLens2
Build Setting

127. Build Setting for HoloLens2
①Universal Windows Platform
②Switch Platform

128. Build Setting for HoloLens2
Apply

129. Build Setting for HoloLens2
Player Settings...

130. Build Setting for HoloLens2
①XR Settings
②Depth Formatを 16-bit depthに変更

131. Build for HoloLens2
Build

132. Build for HoloLens2
新しいフォルダー

133. Build for HoloLens2
buildに名前を変更

134. Build for HoloLens2
①buildを選択
②フォルダーの選択

135. しばらく待つ

136. Build for HoloLens2
buildを開く

137. Build for HoloLens2
ソリューション(*.sln)をVisualStudio2019で開く

138. Build for HoloLens2
Release ARM

139. Build for HoloLens2
▼

140. Build for HoloLens2
デバイス

141. HoloLens2とPCをUSBで接続

142. Build for HoloLens2
①デバッグ
②デバッグなしで開始

143. 動作の様子

144.  HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール

145.  HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール

146. ARFoundationの導入
Window

147. ARFoundationの導入
Package Manager

148. ARFoundationの導入
Advanced

149. ARFoundationの導入
Show preview packagesのチェックをオン

150. ARFoundationの導入
①AR Foundation
②バージョンのリストを開く

151. ARFoundationの導入
①All Version
②1.5.0-preview.6

152. ARFoundationの導入
Install

153. ここからiOS向けの手順
(Androidユーザーはちょっと待ってて)

154. ARKitの導入 (for iOS)
①ARKit XR Plugin
②2.1.2

155. ARKitの導入 (for iOS)
Install

156. ここからAndroid向けの手順
(iOSユーザーはちょっと待ってて)

157. ARCoreの導入 (for Android)
①ARCore XR Plugin
②2.1.2

158. ARCoreの導入 (for Android)
Install

159. ここからARCore/ARKit共通

160. Build Setting for ARFoundation
MixedRealityToolkit

161. Build Setting for ARFoundation
①Camera
②Clone

162. Build Setting for ARFoundation
①ProfileNameをSample1 MixedRealityCameraProfile
に変更 (NewをMobileに変えるだけ)
②Clone

163. Build Setting for ARFoundation
Camera Setting Providers

164. Build Setting for ARFoundation
Windows Mixed Reality Camera Settings

165. Build Setting for ARFoundation
Typeに注目

166. Build Setting for ARFoundation
ドロップダウンを開く

167. Build Setting for ARFoundation
①MicrosoftMixedReality.Toolkit.Experimental.UnityAR
②UnityARCameraSetting

168. Build for ARFoundation
File

169. Build for ARFoundation
Build Settings...

170. Build for ARKit(iOS)
①iOS
②Switch Platform

171. Build for ARCore(Android)
①Android
②Switch Platform

172. Build for ARFoundation
Apply

173. Build for ARFoundation
Player Settings...

174. ここからiOS向けの手順
(Androidユーザーはちょっと待ってて)

175. Build for ARKit(iOS)
Other Settings

176. Build for ARKit(iOS)
Bundle Identifierを設定
例) com.Yoshinaga.ARFukuoka

177. Build for ARKit(iOS)
Strip Engine CodeをOff

178. ここからAndroid向けの手順
(iOSユーザーはちょっと待ってて)

179. Build for ARCore(Android)
Package Nameを設定
例)com.yourname.arfukuoka

180. ARCore/ARKitそれぞれの方法で
ビルドして実機にインストールしてください

181. 動作の様子

182. Ctrl / Command + S
現状を保存

183. バウンディングBoxを使った操作
続いては...

184. やりたい事

185. バウンディングボックスの追加
①model
②Add Component

186. バウンディングボックスの追加
①boundingで検索
②BoundingBoxをクリック

187. 動作確認

188. Dockにオブジェクトを収納
続いては...

190. Dockオブジェクトを作成
何もないところを右クリック

191. Dockオブジェクトを作成
Create Empty

192. Dockオブジェクトを作成
①GameObject
②Dock1にリネーム

193. Dockオブジェクトを作成
Add Component

194. Dockオブジェクトを作成
sphereで検索
SphereCollider

195. Dockオブジェクトを作成
SphereColliderが追加されている

196. Dockオブジェクトを作成
Radius(半径)を0.1m相当にする

197. Dockオブジェクトを作成
Add Component

198. Dockオブジェクトを作成
Dockで検索
DockPosition

199. Dockオブジェクトを作成
DockPositionが追加される

200. Dockオブジェクトを作成
①Dock1を右クリック
②3D Object
③Quad

201. Dockオブジェクトを作成
位置・角度・サイズの変更
Position: 0, -0.1, 0
Rotation: 90, 0, 0
Scale: すべて0.2

202. Dockオブジェクトを作成
①MeshRenderer
②Materialsを開く

203. Dockオブジェクトを作成
Element0の右の をクリック

204. Dockオブジェクトを作成
HolographicBackPlateCircular

205. Dockオブジェクトを作成
こんな感じ

206. Dockオブジェクトを作成
dock1

207. Dockオブジェクトを複製
Duplicate

208. Dockオブジェクトを複製
Dock1(1)
Dock2にリネーム

209. オブジェクトをDockに収納可能にする
①Quad
②AddComponent

210. オブジェクトをDockに収納可能にする
dock
Dockable

211. オブジェクトをDockに収納可能にする
Dockable

212. オブジェクトをDockに収納可能にする
①model
②AddComponent

213. オブジェクトをDockに収納可能にする
dock
Dockable

214. オブジェクトをDockに収納可能にする
Dockable

215. オブジェクトをDockに収納
①Dock1
①Dock Position

216. オブジェクトをDockに収納
①Quadに注目
②Docked Objectにドラッグ&ドロップ

217. オブジェクトをDockに収納
①Dock2
①Dock Position

218. オブジェクトをDockに収納
①modelに注目
②Docked Objectにドラッグ&ドロップ

219. Dockの位置を調整
①Dock1
Position:-0.2,-0.2,0.5

220. Dockの位置を調整
①Dock2
Position: 0.2,-0.2,0.5

222. Fin.