HoloLens 2 × iPhone XS × Pixel 3 を使って Spectator View for Mobile を試してみた K o b e H o l o L e n s M e e t u p ! V a l . 2 2 0 2 0 . 1 . 2 6 Futo Horio / Kobe Digital Labo, Inc. © 2019 Kobe Digital Labo, Inc. All Rights Reserved.

・ 堀 尾 風 仁 ・ ・ 神 戸 デ ジ タ ル ・ ラ ボ ・ 新 事 業 創 造 係 班 班 長 ・ ・ コ ミ ュ ニ テ ィ オ ー ガ ナ イ ザ ー A B O U T M E https://codezine.jp/article/detail/11433 © 2019 Kobe Digital Labo, Inc. All Rights Reserved.

M i c r o s o f t M i x e d R e a l i t y P a r t n e r プ ロ グ ラ ム 認 定 ( 2 0 1 8 . 7 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 日 本 全 国 2 6 社 パ ー ト ナ ー が あ り 、 関 西 で は 唯 一 パ ー ト ナ ー 認 定 い た だ い て お り ま す 。 ただいまMRエンジニア 絶賛募集中です！ 興味ある方は堀尾まで お声がけ下さい！ https://blogs.windows.com/japan/2018/07/17/microsoft-mixed-reality-partnerprogram-4/#Zsh7YroL1iPyXpqW.97

I g n i t e T h e T o u r : O s a k a に 登 壇 し て き ま し た ( 1 / 2 3 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. https://azure-tech-love.connpass.com/ ハッシュタグ #azuretechlove

Agenda : 目次 ・Spectator View for Mobile とは ？ ・Spectator View :単一方向へのコンテンツ共有の仕組み ・Spatial Alignment Strategy : 空間位置合わせ方法 ・Unity プロジェクト : セットアップ方法 ( Build2019DEMO.unity ) ・デモ ( HoloLens 2 × iPhone XS × Pixel 3 ) ・まとめ © 2019 Kobe Digital Labo, Inc. All Rights Reserved.

Spectator View for Mobile とは？ HoloLens の AR (拡張現実) 体験を、その他のデバイス ( HoloLens, Android, iOS ) に共有するための仕組み 1. コンテンツ配信元 ( User / Host ) ⇒ HoloLens のみ対応 [コンテンツ操作可能] 2. コンテンツ配信先 ( Spectator ) ⇒ HoloLens / iOS / Android に対応 [コンテンツの閲覧のみ] 出典: https://docs.microsoft.com/ja-jp/windows/mixed-reality/spectator-view © 2019 Kobe Digital Labo, Inc. All Rights Reserved. ※ Spectator とは・・・「 (スポーツ・ショーなどの) 見物人、観客 」という意味を持つ英単語 Spectator View の ロール (2種類)

Spectator View ( GitHub ) 出典: https://github.com/microsoft/MixedReality-SpectatorView © 2019 Kobe Digital Labo, Inc. All Rights Reserved. MIT License にて提供 ✔ 商用可能 ✔ 改編 ✔ 再配布 ✔ 私用可能 ✖ 保証 ✖ 責任 誰でも簡単に自分の Unityプロジェクト に 組み込み実装することが可能です。 Microsoft/MixedReality-SpectatorView リポジトリにてソースコードが公開されています ( OSS )

Spectator View : 単一方向へのコンテンツ共有の仕組み © 2019 Kobe Digital Labo, Inc. All Rights Reserved. iPhone XS HoloLens 2 （ HoloLens [1st gen] ） Pixel 3 ① アプリを起動し、指定ポート (4710)をリッスン状態にする ② ローカルアプリケーションの起点となる 空間座標をARCore または、ARKit を用いて トラッキングを開始します。 ③ モバイルデバイスは HoloLens 上の ソケットに対して直接接続 ( TCP Connection ) を試みます。 ④ モバイルデバイス と HoloLens の ローカルアプリケーションの起点 となる空間座標を共有します。 ( Spatial Alignment Strategy ) ⑤ モバイルデバイスは 3.で取得した 2つのローカルアプリケーション ( HoloLens と Mobile ) の空間座標を 元に、カメラ位置の変換を行います。 ⑥ HoloLens から Mobile へ向けてシーン の更新情報を送信し、これを元に Mobile 端末上のコンテンツを更新。 ( オブジェクトの位置、ポインター位置 etc.. ) User (コンテンツ配信元) Spectator (見物人)

Spectator View : 処理フロー (動画編) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. https://twitter.com/Futo_Horio/status/1218570446334906371 実際に HoloLens 2 と iPhone XS、Pixel 3 を使って Spectator View のサンプルを動かしてみました 【 注意 】 動画ではコンテンツが動かせていませんが、 HL2上からオブジェクトの操作が可能です。 頭に HL2 を装着して、 両手に iPhone XS, Pixel 3 を持って 1人で撮影しています。

Spatial Alignment Strategy : 空間位置合わせ方法 HoloLens と モバイル端末で空間位置合わせ方法は 3種類 から選択することが可能。 © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 出展: https://github.com/microsoft/MixedReality-SpectatorView/ blob/master/doc/SpectatorView.Setup.md#spatial-alignment-strategy-dependencies 1. Azure Spatial Anchors (ASA) ・・・ 2. QR Code Detection ・・・ 3. ArUco Marker Detection ・・・ ポイントクラウド ( Point Cloud ) から特徴点のみを抽出、 アンカー ( ユニークID ) として登録、座標共有する方法 OSレベルのQRコード認識機能を使用し、座標共有する方法 OpenCVライブラリを使用したQRコード認識機能を使用し、 座標共有を行う方法

Spectator View ( GitHub ) – samples 出典: https://github.com/microsoft/MixedReality-SpectatorView © 2019 Kobe Digital Labo, Inc. All Rights Reserved. Microsoft/MixedReality-SpectatorView リポジトリには、以下2つのサンプルプロジェクトが公開されています 1. MixedReality-SpectatorView/samples/Build2019DEMO.Unity 2. MixedReality-SpectatorView/samples/SpectatorView.Example.Unity ( samples 配下に以下2つの Unityプロジェクト が含まれています )

Spectator View ( GitHub ) – samples © 2019 Kobe Digital Labo, Inc. All Rights Reserved. ② Build2019DEMO.Unity ( Azure Spatial Anchors ) ① SpectatorView.Example.Unity ( QR Code Detection ) 異なった Spatial Alignment Strategy ( 2種類 ) の サンプルプロジェクトが公開されています。 https://github.com/microsoft/MixedReality-SpectatorView/blob/master/samples/README.md

Spectator View : セットアップ方法 © 2019 Kobe Digital Labo, Inc. All Rights Reserved. ※ Spatial Alignment Strategy ( 空間位置合わせ方法 ) によって Unityプロジェクトでのセットアップ方法が異なります。 また、既存プロジェクトに追加する場合は SpectatorViewリポジトリ をサブモジュールとして管理する必要があります。 【 サンプルを動かす場合 】 $ git clone [SpectatorViewリポジトリ(URL)] 【 既存プロジェクトに組み込む場合 】 $ git submodule add https://github.com/microsoft/MixedReality-SpectatorView.git sv ※ git submodule add [リポジトリURL] (サブモジュールのディレクトリ名)

Spectator View : セットアップ方法 ( Build2019DEMO.unity ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 今回は、Build2019DEMO.unity プロジェクトの実機デプロイ方法をご紹介したいと思います。 【 今回の検証環境 】 Windows PC ・Unity 2018.4.3f1 ・Visual Studio Community 2017 ( Version 15.9.8 ) ・Windows SDK ( 10. 0.18362.0 ) HoloLens 2 ( OSビルド : 10.0.18362.1005 ) Pixel 3 ( Android : 9.0 Pie) iPhone XS ( iOS : 13.3 ) Mac ( Xcode : iPhone XS へのデプロイ時にのみ使用 ) https://github.com/microsoft/MixedReality-SpectatorView/blob/master/samples/Build2019Demo.Unity/README.md

Spectator View : セットアップ方法 ( Build2019DEMO.unity ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 1. git clone https://github.com/microsoft/MixedReality-SpectatorView.git を実行する 2. git fetch origin release/1.1.0 ( release/1.1.0 ブランチをダウンロード ) 3. git checkout release/1.1.0 ( release/1.1.0 ブランチをチェックアウト ) 4. 管理者権限でコマンドプロンプトを開き、tools¥Scripts¥SetupRepository.bat を実行 ⇒ external/ディレクトリ配下に、MRTK/ARCore/Azure-Spatial-Anchors-Samples がダウンロード ⇒ Unity プロジェクト Assetsディレクトリ 配下から external/配下が呼び出せるようシンボリックリンクを作成 ⇒ ARKit-Unity-Plugin はダウンロードされないので、手動でダウンロードする必要がある SpectatorView release/1.1.0 ブランチを使用する際の注意点 SpectatorView release/1.1.0 ブランチは ARFoundation ( ARCore と ARKit のラッパーライブラ リ ) に対応しておらず、ARCore に限って言うと、ARCore v1.7.0 のみテストを行い、それ以外では 動作テストを行っていないので検証する際はご自身の判断・責任で試してみてくださいとの記載あり。 https://github.com/microsoft/MixedReality-SpectatorView/blob/master/doc/SpectatorView.Setup.md#android-requirements

Spectator View : セットアップ方法 ( Build2019DEMO.unity ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 5. Azure Spatial Anchors サービスを作成し、[Account ID] と [Primary Key] をメモしておく。 Primary Key を確認したいときは、[Access Keys →]ボタンを押すと右側に表示される。

Spectator View : セットアップ方法 ( Build2019DEMO.unity : HoloLens 2 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 6. Build2019DEMO.unity プロジェクトを Unity で開く ( MixedReality-SpectatorView¥samples¥Build2019DEMO.unity ) 7. Finished_Scene.unity を開く 8. グローバルメニュー から Spectator View を選択し、Update All Assets Caches を実行する ⇒ Generated.StateSynchronization.AssetCaches コンテンツの状態を同期するためのアセットキャッシュが生成

Spectator View : セットアップ方法 ( Build2019DEMO.unity : HoloLens 2 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 9. グローバルメニュー から [Spectator View] > [Edit Settings] を開く 10. Spatial Anchors Coordinate Localization Initializer の値を変更 Account Id ・・・ Azure Spatial Anchors の Account ID Account Key ・・・ Azure Spatial Anchors の Primary Key 11. Spatial Anchors Coordinate Localization Initializer を Spatial Localization Initialization Settings [Element 0] へドラッグ＆ドロップ 12. Broadcaster Settings の Automatically Broadcast All Game Objects 項目へチェックを入れておく ( 全ての GameObject のステータスを同期 ) ⇒ 個別で設定をチューニングしたい場合はタグを使用する (以下URL参照) https://github.com/microsoft/MixedReality-SpectatorView/blob/master/src/SpectatorView.Unity/ Assets/SpectatorView/Scripts/StateSynchronization/README.md#performance-settings

Spectator View : セットアップ方法 ( Build2019DEMO.unity : HoloLens 2 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 13. Build Settings > Other Settings > Script Define Symbols に以下を追加する SPATIALALIGNMENT_ASA; STATESYNC_TEXTMESHPRO ASA処理に関するソースコードを コンパイル対象に含めるため。 https://github.com/microsoft/MixedReality-SpectatorView/blob/fc5e31e6834a7d95f91d9e13901f855086dc8064/ src/SpectatorView.Unity/Assets/SpatialAlignment.ASA/Scripts/SpectatorView/SpatialAnchorsLocalizer.cs ソースコード実装例 SpatialAnchorsLocalizer.cs

Spectator View : セットアップ方法 ( Build2019DEMO.unity : HoloLens 2 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 14. SpectatorView (Prefab) 上の Platform Switcher で HoloLens を選択する https://github.com/microsoft/MixedReality-SpectatorView/blob/5ea4cbc63cd20858a4aa8cc0a23cc92c5901ef8b/ src/SpectatorView.Unity/Assets/SpectatorView.Editor/Scripts/PlatformSwitcherEditor.cs ⇒ Unity デフォルト の Switch Platform を使用するのではなく、 SpectatorView (Prefab) の GUI ボタンから実行することにより PlatformSwitcherEditor の処理が実行され、 最適なチューニングが 実行される。 バックグラウンド処理内容 PlatformSwitcherEditor.cs

Spectator View : セットアップ方法 ( Build2019DEMO.unity : HoloLens 2 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 15. Unity プロジェクトをビルドする → Visual Studio 2017 にて ARM : Release 実機ビルドを行う https://github.com/microsoft/MixedReality-SpectatorView/blob/5ea4cbc63cd20858a4aa8cc0a23cc92c5901ef8b/ src/SpectatorView.Unity/Assets/SpectatorView.Editor/Scripts/PlatformSwitcherEditor.cs 以上で、HoloLens 2 (User) へのデプロイ作業は終了です。

Spectator View : セットアップ方法 ( Build2019DEMO.unity : Android ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 1. SpectatorView.Android.unity シーンを開く 2. Building Settings > Other Settings > Scripting Define Symbols に以下を設定する ⇒ SPATIALALIGNMENT_ASA; STATESYNC_TEXTMESHPRO 3. Spectator View (Prefab) にて Platform Switcher [Android] を押下する 4. Unity プロジェクトのビルドを実行する ⇒ ビルドを実行する際は以下シーンを含める (右図参照) SpectatorView.Android 0 Finished_Scene 1 https://github.com/microsoft/MixedReality- SpectatorView/blob/master/samples/Build2019Demo.Unity/README.md#android

Spectator View : セットアップ方法 ( Build2019DEMO.unity : iOS ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 1. SpectatorView.iOS.unity シーンを開く 2. Building Settings > Other Settings > Scripting Define Symbols に以下を設定する ⇒ SPATIALALIGNMENT_ASA; STATESYNC_TEXTMESHPRO 3. Spectator View (Prefab) にて Platform Switcher [iOS] を押下する 4. Unity プロジェクトのビルドを実行する ⇒ ビルドを実行する際は以下シーンを含める (右図参照) SpectatorView.iOS 0 Finished_Scene 1 https://github.com/microsoft/MixedReality- SpectatorView/blob/master/samples/Build2019Demo.Unity/README.md#ios

Spectator View : セットアップ方法 ( Build2019DEMO.unity : iOS ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 5. Unity で Export したフォルダを Mac ターミナル で開く 6. pod install で Azure Spatial Anchors ライブラリをインストールする ( pod install --repo-update ) 7. Unity-iPhone.xcodeproj ではなく、Unity-iPhone.xcworkspace を開く ( open ./Unity-iPhone.xcworkspace ) https://docs.microsoft.com/en-us/azure/spatial-anchors/quickstarts/get-started-unity-ios #convert-the-xcode-project-to-xcworkspace-containing-azure-spatial-anchors-references 8. 通常 .xcodeproj 同様、iPhoneに接続し、 実機デプロイを実行する ※ 6.7 の手順を無視すると Xcode 上で下記エラーが発生し (100個)、実機デプロイができないので注意！ 'Undefined symbols for architecture arm64' and 'framework not found Pods_Unity_iPhone'

✔ SpatialCoordinateSystem © 2019 Kobe Digital Labo, Inc. All Rights Reserved. ✔ StateSynchronization Spectator View : セットアップ方法 基本的には、SpectatorView (Prefab) を追加することで実装することが可能です 以下、SpectatorView (Prefab) は大きく2つの機能コンポーネントを保持しています 空間座標システム : シーンの位置合わせ処理 状態同期システム : 単一方向へのコンテンツ同期

© 2019 Kobe Digital Labo, Inc. All Rights Reserved. Spectator View : セットアップ方法 基本的には、SpectatorView (Prefab) を追加することで実装することが可能 ・Role (User/Spectator) ・Spatial Alignment ⇒ Default Spatial Localization Initializers ( 空間ローカライゼーション初期化方法 ) ・Debugging ⇒ SpectatorView をデバッグするための設定 Visual Prefab は 2つの空間座標の起点となる位置をビジュアル化

Spectator View : セットアップ方法 ( Build2019DEMO.unity ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. その他、セットアップ時に詰まった点を紹介

Spectator View : セットアップ方法 ( 既存プロジェクトへ組み込み時の注意点 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. https://github.com/microsoft/MixedRealityToolkit-Unity/issues/7106 既存コードに SpectatorView を組み込み場合、MRTK v2.2.0 を使っているとコンパイルに失敗する ( HoloLens ) (2020.1.26 現在) MRTK v2.2.0 ＋ SpectatorView Release/1.1.0 を組み合わせると左記のエラーが発生し、 正常にコンパイルを終了することができない。 【 エラー原因 】 MRTK v2.2.0 を使用することにより、 Unity Editor 上で UWP_WINDOWS が解決され、 Windows SDK Camera API が利用できないため。 MRTK v2.2.0 でインポートする DotNetWinRTアダプターが名前解決を混乱させている!?

Spectator View : セットアップ方法 ( 既存プロジェクトへ組み込み時の注意点 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. ちなみに samples ディレクトリ で使われている MRTKブランチ を調査すると、mrtk_development でした https://github.com/microsoft/MixedReality-SpectatorView/blob/release/1.1.0/.gitmodules SpectatorView リポジトリ README には、 対応しているMRTKバージョンの記載なし。 （mrtk_development のみ 動作確認済み）

Spectator View : セットアップ方法 ( HL2 : QR Code Detection 注意点) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. HoloLens 2 で QR Code Detection を行う場合、SpectatorView.WinRTExtensions.dll をビルド時に含める必要がある。 https://github.com/microsoft/MixedReality-SpectatorView/blob/master/src/SpectatorView.Native/README.md DLL を作成するためには、 SpectatorView.Native.sln を Visual Studio でビルドする必要がある ( x86 Release ) HoloLens 2 で 使用する .dll (ダイナミックリンクライブラリ) なので、 ARM 向けにビルドした .dll を使いたくなるが、アプリが正常に動作しないので、注意が必要。 SpectatorView.WinRTExtentions.dll を生成する際は、x86 Release ビルド を行う。

Spectator View : Performance ( チューニング方法 ) © 2019 Kobe Digital Labo, Inc. All Rights Reserved. HoloLens と Unity を使って接続テストを行うことが可能 (SpectatorView.Performance) 1. Unity 上で SpectatorView.Performance シーンを再生する 2. HoloLens で Spectator View アプリを起動する 3. Performance タブで HoloLens の IPアドレスを入力 ⇒ Connect ボタンを押下 4. 正常に接続ができれば、パフォーマンスのモニタリングログが表示される ※ グローバルメニュー [Spectator View] から [Performance] タグを追加 詳細は以下 GitHub ページをご覧下さい。 https://github.com/microsoft/MixedReality-SpectatorView/blob/master/src/SpectatorView.Unity/Assets/ SpectatorView/Scripts/StateSynchronization/README.md#performance-monitoring

DEMO HoloLens 2 × iPhone XS × Pixel 3

まとめ © 2019 Kobe Digital Labo, Inc. All Rights Reserved. 1. Spectator View for Mobile は 低コスト でコンテンツ同期が可能なので最高！ 2. User ( コンテンツ配信元 ) として使えるデバイスは HoloLens のみ 3. Spectator ( コンテンツ配信先 ) はコンテンツの操作は行えない ( 単一方向への同期 ) 4. SpectatorView のサンプルで使用されている MRTKブランチは mrtk_development ブランチ ( ※ MRTK v2.2.0 と組み合わせる際はバグで詰まる可能性大 ) 5. iOSへの実機デプロイには CocoaPods というiOS/Mac向けのライブラリ管理ツールのインストールが必要 6. エラーが出た際は、Google より HoloDevelopers (グローバルMRコミュニティSlack) で検索がお勧め！ 7. モバイル端末側を先に起動すると、コネクション接続に失敗するので HoloLens 側を先に立ち上げる 8. Azure Spatial Anchors を使用して空間位置合わせを実施するとズレる場合があるので、何回か試してみるべし 9. HoloLens / Mixed Reality に興味ある方は 是非 KDL にお越しください！

No content

Kobe HoloLens Meetup! vol.2 - HoloLens 2 関西上陸記念勉強会 本日のタイムテーブル ( 14:00～18:30 ) イベントハッシュタグ #AR_KOBE #HoloLensMeetup 3部構成で開催いたします ・MR関連セッション (4名) ・LT (5名) ・懇親会

Kobe HoloLens Meetup! vol.2 - HoloLens 2 関西上陸記念勉強会 そんなことより… イベントハッシュタグ #AR_KOBE #HoloLensMeetup 登壇者の方々豪華すぎませんか？

Kobe HoloLens Meetup! vol.2 - HoloLens 2 関西上陸記念勉強会 本日ご登壇いただく皆さん！ 日本マイクロソフト Mixed Reality Marketing プロダクトマネージャー 上田欣典さん Microsoft MVP (for Windows Development) / 大阪駆動開発 宮浦恭弘さん 関西の HoloLensの人 山地直彰さん Microsoft 社 Cloud Developer Advocate 千代田まどかさん イベントハッシュタグ #AR_KOBE #HoloLensMeetup ( LT枠 )

Kobe HoloLens Meetup! vol.2 - HoloLens 2 関西上陸記念勉強会 せっかくの機会なので… イベントハッシュタグ #AR_KOBE #HoloLensMeetup 神戸じゃこんなチャンスもうないかも... しれないので、次も来たいと思ってもらえるように みなさん盛り上がっていきましょう！

No content