ARコンテンツ作成勉強会
ノンプログラミングで始めるAR開発 with MRTK
自己紹介
氏名:吉永崇(Takashi Yoshinaga)
所属:Steampunk Digital株式会社
九州先端科学技術研究所(ISIT)
専門:医療支援AR,運動計測,ホログラム
AR×医療支援:超音波診断
https://youtu.be/zI8S49qpiOs
ウェアラブル・モーションキャプチャの開発
https://youtu.be/Po-orPCgi4E
趣味開発: Volumetric Video
Kinect等で取得したPoint Cloudを配信し、各種のARデバイスで表示
https://youtu.be/Pu2QlBQJoUo
ARコンテンツ作成勉強会の紹介
 2013年5月に勉強会をスタートし
 ARコンテンツの作り方をハンズオン形式で学ぶ
 人数は5~10名程度の少人数で実施
 参加条件はAR/VRに興味がある人(知識不要)
 各地で開催 (福岡、熊本、宮崎、長崎、大分、 鹿児島、山口、広島、北海道)
Twitterと勉強会ページで情報を発信しています
#AR_Fukuoka Googleで「AR勉強会」で検索
#AR_Fukuoka
ハッシュタグ
Special Thanks
エンジニアカフェ
今日の内容
MRTKを使ったオブジェクトの表示〜手やカーソルを使った操作
https://youtu.be/Yae3bOtidTk
素材のダウンロード
http://arfukuoka.lolipop.jp/mrtk_np/Sample.zip
SDKのダウンロード (1/3)
https://github.com/Microsoft/MixedRealityToolkit-Unity
Releases
SDKのダウンロード (2/3)
今回はMicrosoft Mixed Reality Toolkit v2.4.0を使用
少し下にスクロール
SDKのダウンロード (3/3)
Foundation.2.4.0.unitypackageをダウンロード
Foundation.2.4.0.unitypackage
プロジェクトの作成 (1/6)
UnityHubを起動して画面左側のプロジェクトをクリック
プロジェクト
プロジェクトの作成 (2/6)
新規作成の右側にある▽をクリック
新規作成横の▽
プロジェクトの作成 (3/6)
2018.4.xxf1 (資料では2018.4.25f1)を選択
2018.4.xxf1
プロジェクトの作成 (4/6)
①3D ②プロジェクト名を入力
(例:ARFukuoka_MRTK)
③保存するフォルダを選択
プロジェクトの作成 (5/6)
作成
プロジェクトの作成 (6/6)
ウィンドウが表示されればOK
SDKのインストール (1/3)
ダウンロードしたunitypackageをダブルクリックし、
Import Unity Packageダイアログ内の[Import]をクリック
Microsoft.MixedReality.
Toolkit.Unity.Foundation
.2.4.0.unitypackage
Import
SDKのインストール (2/3)
Apply
ApplyをクリックしてxR用のセッティングを行う
SDKのインストール (3/3)
閉じる
MRTK Project Configuratorを閉じる
Unityの操作画面(概要)
ゲーム空間の設計画面
空間にCGを追加しよう (1/3)
何も選択していない状態で
空白を右クリック
空間にCGを追加しよう (2/3)
①3D Object
②Quad
空間にCGを追加しよう (3/3)
四角形が追加される
※角度によっては見えない
Scene内の視点の変更
[←][→]で左右移動
[↑][↓]でズームイン/アウト
[Alt]+ドラッグで回転
+ドラッグで上下左右
Quadが見えなくなってしまった場合
Hierarchy内のオブジェクトのダブルクリックでオブジェクトを視界の中央に
Quadをダブルクリック
動作確認
カメラから見た空間
が表示される
をクリックして実行
クリックして終了
オブジェクトの位置・向き・サイズを調整
Quadをクリック
オブジェクトの位置・向き・サイズを調整
移動 回転 拡大・縮小
数値入力による位置・向き・サイズ調整
Quadをクリック
数値入力による位置・向き・サイズ調整
 オブジェクトの詳細の表示・追加・変更はInspectorタブ内で行う
 位置や角度、スケールを数字を用いて指定することも可能
Inspector
数値入力による位置・向き・サイズ調整
 オブジェクトの詳細の表示・追加・変更はInspectorタブ内で行う
 位置や角度、スケールを数字を用いて指定することも可能
[下記設定にする]
Positionを 0 0 1
Rotation 0 0 0
Scale 0.3 0.3 0.3
補足:x,y,z軸について
Y
Z
X
この図ではカメラから見て横がX、奥行方向がZ、そして地面に対して垂直がY
Scene内の視点の調整
拡大・縮小や移動により見づらくなった
Scene内の視点の変更 (再)
Hierarchy内のオブジェクトのダブルクリックでオブジェクトを視界の中央に
Quadをダブルクリック
Next Step
Inspectorで操作できる詳細情報には
位置・角度・サイズ以外にも
見た目(色や質感)、挙動なども含まれる
見た目の変更の概要 (1/4)
① Quad
② Mesh Rendererに注目
③ Materialsを開く
見た目の変更の概要 (2/4)
Element0
見た目の変更の概要 (3/4)
ここに紐づけられるMaterialで
色や質感を設定している
見た目の変更の概要 (4/4)
Materialの詳細はInspectorの下方で確認
できるがDefault-Materialは編集できない
見た目を変えるにはMaterialファイルを作る必要がある
マテリアルの作成 (1/3)
マテリアル(色や質感の設定)を作成
①Assets
②右クリック
マテリアルの作成 (2/3)
マテリアル(色や質感の設定)を作成
①Create
②Material
マテリアルの作成 (3/3)
New Materialができているはず
マテリアル(色や質感の設定)を作成
マテリアルの適用 (1/3)
オブジェクト(Quad)のマテリアルを開く
② Default-Materialに注目
①Quad
マテリアルの適用 (2/3)
オブジェクト(Quad)のマテリアルを開く
Default-Material
にドラッグ&ドロップ
マテリアルの適用 (3/3)
①Quad
②New Materialに
置き換わっていればOK
テクスチャを適用してみよう
テクスチャの適用 (1/8)
②ドロップダウンを開く
③Unlit
④Transparent①New Materialに注目
テクスチャの適用 (2/8)
①▼をクリックして
NewMaterialを開く
②ここで画像(テクスチャ)を指定
テクスチャの適用 (3/8)
①Assets
②Import New Asset
テクスチャの適用 (4/8)
①arfukuoka.png
②Import
テクスチャの適用 (5/8)
①Quad
②New Materialを開く
テクスチャの適用 (6/8)
①Assets
②arfukuoka.pngに注目
テクスチャの適用 (7/8)
arfukuoka.pngをNone(Texture)に
ドラッグ&ドロップ
テクスチャの適用 (8/8)
テクスチャが反映される
現状を保存 (1/4)
File
現状を保存 (2/4)
SaveAs...
現状を保存 (3/4)
①Sample1とする
②保存
現状を保存 (4/4)
Sample1ができていればOK
次回以降は
Ctrl / Command + S
で上書き保存可能
ここからようやくMRTK
始めに実現すること
UnityEditor内で移動や手を使った操作を行う準備
MRTK用のカメラや表示の設定 (1/3)
MixedRealityToolkit
MRTK用のカメラや表示の設定 (2/3)
Add to Scene and Configure...
MRTK用のカメラや表示の設定 (3/3)
MixedRealityToolKitと
MixedRealityPlayspaceが
追加されていればOK
動作確認 (1/4)
Playをクリック
動作確認 (2/4)
[A][D]で左右移動
[W][S]でズームイン/アウト
[Q][E]で上下移動
右クリック+ドラッグで回転
動作確認 (3/4)
[Shift]で左手を表示
[Space]で右手を表示
手を表示した状態+
[クリック]でつまむ
[スクロール]で前後移動
※今のところオブジェクトは操作できない
動作確認 (4/4)
Playを再度クリックして停止
(青くなければOK)
オブジェクトを手で操作しよう
Quadを操作可能にする (1/3)
①Quad
②Add Component
Quadを操作可能にする (2/3)
manipulationで検索
ManipulationHandlerを選択
Quadを操作可能にする (3/3)
①Quad
②ManipulationHandler
が追加される
オプション
①Quad
②One Hand Rotation Farを
Gravity Aligned Maintain Rotation To User
動作確認 (1/4)
Playをクリック
片手での操作
動作確認 (2/4)
ShiftまたはSpaceで手を表示
動作確認 (3/4)
指の先から出ているカーソルを合わせる
動作確認 (4/4)
ドラッグして移動
両手での操作
動作確認 (1/5)
Shiftで左手を表示
動作確認 (2/5)
①カーソルを合わせてクリック
② [T]を押下して手を固定
動作確認 (3/5)
Spaceで右手を表示
動作確認 (4/5)
カーソルを合わせてドラッグ
動作確認 (5/5)
前後左右に動かして回転・拡大縮小
スマホを想定した操作
動作確認 (6/7)
よく見ると丸いカーソルが視界の中央にある
動作確認 (7/7)
そのままドラッグして移動
自前のオブジェクトを追加しよう
(今回は事前に用意したオブジェクト)
OBJファイルを追加 (1/6)
Assets
OBJファイルを追加 (2/6)
Sampleフォルダ → Model
OBJファイルを追加 (3/6)
ModelフォルダをAssetsに
ドラッグ&ドロップ
OBJファイルを追加 (4/6)
Model
OBJファイルを追加 (5/6)
model.obj
OBJファイルを追加 (6/6)
Hierarchyにドラッグ&ドロップ
オブジェクトの微調整 (1/3)
①model
椅子を適当な位置に配置
Position 0.5 0 1
オブジェクトの微調整 (2/3)
model左の▼をクリック
して下の階層を開く
オブジェクトの微調整 (3/3)
modelの下の階層のmodel
椅子を適当な位置に配置
Position 0 -0.45 0
Rotation 0 180 0
上の階層のmodelだけでも調整可能。
今回はこの後の操作の都合上分けている。
カーソルや手との接触判定
接触判定をするにはmodel.objに
Colliderを追加する必要がある
Colliderの追加 (1/5)
①model
(上の階層の方) ②Add Component
Colliderの追加 (2/5)
①Boxで検索
②BoxCollider
Colliderの追加 (3/5)
バウンディングボックスが表示される
Colliderの追加 (4/5)
①model
②Edit Collider
Colliderの追加 (5/5)
各面の■を動かして大きさを編集
椅子を手で操作可能にする (1/5)
①model
②Add Component
椅子を手で操作可能にする (2/5)
①maipulationで検索
②ManipulationHandler
椅子を手で操作可能にする (5/5)
①model
② Manipulation Handlerが追加される
両手操作時は回転のみにする
①model
②Two Hand Manipulation Type
をScaleにする
動作確認
動作確認
Stop
パフォーマンスの表示を消す
これを消す
MRTKの詳細設定
①MixedRealityToolKit
②Mixed Reality Toolkit
の下のドロップダウンメニュー
MRTKの詳細設定
①MixedRealityToolKit
②DefaultHololens2ConfigureProfile
MRTKの詳細設定
Clone
MRTKの詳細設定
①ProfileNameをSample1 MixedRealityToolkit...
に変更 (NewをSample1に変えるだけ)
②Clone
MRTKの詳細設定
①Diagnostics
②Enable Diagnostics System
のチェックを外す
動作確認
パフォーマンス表示が消えた
動作確認
Stop
 HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール
 HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール
Build Setting for HoloLens2
File
Build Setting for HoloLens2
Build Setting
Build Setting for HoloLens2
①Universal Windows Platform
②Switch Platform
Build Setting for HoloLens2
Apply
Build Setting for HoloLens2
Player Settings...
Build Setting for HoloLens2
①XR Settings
②Depth Formatを 16-bit depthに変更
Build for HoloLens2
Build
Build for HoloLens2
新しいフォルダー
Build for HoloLens2
buildに名前を変更
Build for HoloLens2
①buildを選択
②フォルダーの選択
しばらく待つ
Build for HoloLens2
buildを開く
Build for HoloLens2
ソリューション(*.sln)をVisualStudio2019で開く
Build for HoloLens2
Release ARM
Build for HoloLens2
▼
Build for HoloLens2
デバイス
HoloLens2とPCをUSBで接続
Build for HoloLens2
①デバッグ
②デバッグなしで開始
動作の様子
 HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール
 HoloLens2
 ARFoundation(ARKit/ARCore)
実機へのインストール
ARFoundationの導入
Window
ARFoundationの導入
Package Manager
ARFoundationの導入
Advanced
ARFoundationの導入
Show preview packagesのチェックをオン
ARFoundationの導入
①AR Foundation
②バージョンのリストを開く
ARFoundationの導入
①All Version
②1.5.0-preview.6
ARFoundationの導入
Install
ここからiOS向けの手順
(Androidユーザーはちょっと待ってて)
ARKitの導入 (for iOS)
①ARKit XR Plugin
②2.1.2
ARKitの導入 (for iOS)
Install
ここからAndroid向けの手順
(iOSユーザーはちょっと待ってて)
ARCoreの導入 (for Android)
①ARCore XR Plugin
②2.1.2
ARCoreの導入 (for Android)
Install
ここからARCore/ARKit共通
Build Setting for ARFoundation
MixedRealityToolkit
Build Setting for ARFoundation
①Camera
②Clone
Build Setting for ARFoundation
①ProfileNameをSample1 MixedRealityCameraProfile
に変更 (NewをMobileに変えるだけ)
②Clone
Build Setting for ARFoundation
Camera Setting Providers
Build Setting for ARFoundation
Windows Mixed Reality Camera Settings
Build Setting for ARFoundation
Typeに注目
Build Setting for ARFoundation
ドロップダウンを開く
Build Setting for ARFoundation
①MicrosoftMixedReality.Toolkit.Experimental.UnityAR
②UnityARCameraSetting
Build for ARFoundation
File
Build for ARFoundation
Build Settings...
Build for ARKit(iOS)
①iOS
②Switch Platform
Build for ARCore(Android)
①Android
②Switch Platform
Build for ARFoundation
Apply
Build for ARFoundation
Player Settings...
ここからiOS向けの手順
(Androidユーザーはちょっと待ってて)
Build for ARKit(iOS)
Other Settings
Build for ARKit(iOS)
Bundle Identifierを設定
例) com.Yoshinaga.ARFukuoka
Build for ARKit(iOS)
Strip Engine CodeをOff
ここからAndroid向けの手順
(iOSユーザーはちょっと待ってて)
Build for ARCore(Android)
Package Nameを設定
例)com.yourname.arfukuoka
ARCore/ARKitそれぞれの方法で
ビルドして実機にインストールしてください
動作の様子
Ctrl / Command + S
現状を保存
バウンディングBoxを使った操作
続いては...
やりたい事
バウンディングボックスの追加
①model
②Add Component
バウンディングボックスの追加
①boundingで検索
②BoundingBoxをクリック
動作確認
Dockにオブジェクトを収納
続いては...
Dockオブジェクトを作成
何もないところを右クリック
Dockオブジェクトを作成
Create Empty
Dockオブジェクトを作成
①GameObject
②Dock1にリネーム
Dockオブジェクトを作成
Add Component
Dockオブジェクトを作成
sphereで検索
SphereCollider
Dockオブジェクトを作成
SphereColliderが追加されている
Dockオブジェクトを作成
Radius(半径)を0.1m相当にする
Dockオブジェクトを作成
Add Component
Dockオブジェクトを作成
Dockで検索
DockPosition
Dockオブジェクトを作成
DockPositionが追加される
Dockオブジェクトを作成
①Dock1を右クリック
②3D Object
③Quad
Dockオブジェクトを作成
位置・角度・サイズの変更
Position: 0, -0.1, 0
Rotation: 90, 0, 0
Scale: すべて0.2
Dockオブジェクトを作成
①MeshRenderer
②Materialsを開く
Dockオブジェクトを作成
Element0の右の をクリック
Dockオブジェクトを作成
HolographicBackPlateCircular
Dockオブジェクトを作成
こんな感じ
Dockオブジェクトを作成
dock1
Dockオブジェクトを複製
Duplicate
Dockオブジェクトを複製
Dock1(1)
Dock2にリネーム
オブジェクトをDockに収納可能にする
①Quad
②AddComponent
オブジェクトをDockに収納可能にする
dock
Dockable
オブジェクトをDockに収納可能にする
Dockable
オブジェクトをDockに収納可能にする
①model
②AddComponent
オブジェクトをDockに収納可能にする
dock
Dockable
オブジェクトをDockに収納可能にする
Dockable
オブジェクトをDockに収納
①Dock1
①Dock Position
オブジェクトをDockに収納
①Quadに注目
②Docked Objectにドラッグ&ドロップ
オブジェクトをDockに収納
①Dock2
①Dock Position
オブジェクトをDockに収納
①modelに注目
②Docked Objectにドラッグ&ドロップ
Dockの位置を調整
①Dock1
Position:-0.2,-0.2,0.5
Dockの位置を調整
①Dock2
Position: 0.2,-0.2,0.5
Fin.

ノンプログラミングで始めるAR (HoloLens 2 / ARCore / ARKit) 開発 with MRTK