MultiUserCapabilitiesTutorialsやーる（HoloLens2、Unity2019.4.1f1、MRTK2.4.0、Photon2.22、AzureSpatialAnchors2.2.1）

# はじめに
マルチデバイスでオブジェクトの共有ができるチュートリアルをやっていきます。公式のドキュメントは[こちら](https://docs.microsoft.com/ja-jp/windows/mixed-reality/develop/unity/tutorials/mr-learning-sharing-01)です。Photonでオブジェクトを共有して、Azure Spatial Anchorsでオブジェクトの位置合わせるという感じです。ビルドでちょっとハマったので備忘録です。

# 開発環境
- Windows 10
- HoloLens 2
- Unity Hub 
- Unity 2019.4.1f1
- MRTK 2.4.0 
- Azure Spatial Anchors 2.2.1
- AR Foundation 2.1.8 
- PUN 2 FREE 2.22

# 導入 
1．Unityプロジェクトを作成し、Microsoft.MixedReality.Toolkit.Unity.Foundation.2.4.0.unitypackageをインポートします。

2．MRTK Project Configuratorが表示されたら、Applyします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e394ae53-fec0-eed5-d688-08183b1c7132.png)

3．こちらもApplyします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4aff8556-ad18-c83d-570d-16f4f9aefb37.png)

4．File -> Build Settingsを開き、UWPを選んで、Switch Platformをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/a6a8fb50-8b8d-7b4d-76b0-6b71c0c40f3b.png)

5．Applyします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/bcae0473-76b4-51cd-52d2-e6326f50b037.png)

6．Build Settings->Player Settingsをクリックし、Publishing Settings->CapabilitiesのInternetClient、InternetClientServer、PrivateNetworkClientServer、Microphone、SpatialPerception、GazeInputにチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/52d1866d-5f10-5040-6ea5-d771cd53fa7f.png)

7．Mixed Reality ToolkitからAdd to Scene and Configureをクリックし、Hierarchyビューに配置されたMixedRealityToolkitを選択します。Inspector ViewからDefaultHoloLens2ConfigurationProfileをクローンします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e7969d6c-f65c-fe5e-031d-ceac8f49247f.png)

8．任意の名前を付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/58219308-b1f8-218f-47b5-0d802f7f8f74.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/df7eb271-fa75-a86a-5890-fb71b2fc7b13.png)

9．Spatial AwarenessのEnable Spatial Awareness Systemにチェックを入れ、DefaultMixedRealitySpatialAwarenessSystemProfileをクローンします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5020d954-e012-81d1-a995-7a1ce6bc7cb6.png)

10．任意の名前を付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/24f16b0d-5cb6-7d47-8346-bd9b9d9470ca.png)

11．DefaultMixedRealitySpatialAwarenessMeshObserverProfileをクローンします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/b1a8015f-ceb7-f1d8-5960-82873032cea8.png)

12．任意の名前を付けます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/478381b9-c0a6-86de-0fa1-ed80b74bed6c.png)

13．Display OptionでOcculusionを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/3b7b8569-c983-7334-eacf-60a380f29ecf.png)

14．Window->Package ManagerからAR Foundationをインストールします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6bc6297a-2d86-9d5b-d820-693e00f9fde2.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/eaf77c68-6498-f252-c57c-6eee9a651a97.png)

15．公式サイトにある下記のunitypackageをインポートします。
AzureSpatialAnchors.unitypackage (version 2.2.1)
MRTK.HoloLens2.Unity.Tutorials.Assets.GettingStarted.2.4.0.unitypackage
MRTK.HoloLens2.Unity.Tutorials.Assets.AzureSpatialAnchors.2.4.0.unitypackage
MRTK.HoloLens2.Unity.Tutorials.Assets.MultiUserCapabilities.2.4.0.unitypackage

16．Window->Asset Store からPUN 2 - Freeを検索、インポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/c91ccd24-19ac-d80b-4420-c0ca2c1f7f34.png)

17．セットアップウィザードは一旦閉じてOKです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/89cf4527-f575-a8b6-7cd4-67adaf6962c8.png)

18．[Photon Dashboard](https://dashboard.photonengine.com/)を開き、Photon Type: Photon PUN、Nameは任意の新しいアプリケーションを作成します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6c8030ac-c423-1755-21ba-488447ca50e3.png)

19．作成したPhoton PUNアプリケーションのApp IDをコピーします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/6db0489f-c006-68c0-feb5-48ee9352a1eb.png)

20．Window->Photon Unity Networking->PUN Wizardを開き、
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e8315c9b-9e16-092c-a24c-8164b414a7ec.png)

21．Setup Projectをクリック。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/e2012bbb-b268-c376-97ee-7b54cd46578b.png)

22．App IDを入れて、Setup Projectをクリックします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/8aac287d-324e-3aee-ae6a-faa248ceca6a.png)

23．TMP Importerが表示されたらインポートします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/bd63ae41-6189-f175-9fbd-51f8158cbcc2.png)

24．ProjectビューからAssetsのMRTK.Tutorials.AzureSpatialAnchors->Prefabs->DebugWindowとMRTK.Tutorials.MultiUserCapabilities->PrefabsのNetworkLobbyとSharePlaygroundをHierarchyにD&Dします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/b4b8f012-41ab-5bc1-4972-5068015b8689.png)

25．HierarchyからCreate Empty->GameObjectを作り、名前をPhotonUserとします。PhotonUserのInspectorViewからPhotonUserとGenericNetSyncとPhotonViewをAddComponentします。GenericNetSyncのIsUserにチェックを入れます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/de800349-1894-0c22-d443-0de33e42ebdd.png)

26．PhotonUserに子オブジェクトのSphereを作成、MeshRendererのElement 0にMRTK_Standard_Whiteをアタッチします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/1bd8ac00-7c1c-954b-ec7f-dbdc006d4a11.png)

27．PhotonUserをMRTK.Tutorials.MultiUserCapabilities->ResourcesへD&Dし、Hierarchyビューから削除します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/af8808e4-7c66-4e5f-2fc5-db9ca02b69bd.png)

28．NetworkRoomにPrefab化したPhotonUserをアタッチします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/2fd0f703-68c9-f8e3-9ba5-71f82482a737.png)

29．Player SettingsのXR Settingsを忘れずに。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/99df535b-e919-86e1-0d24-42d7f31a99e4.png)

30．BuildSettingsからビルドします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/96afeee4-074c-bc01-5cc3-3972fd77a71b.png)

31．Holo2フォルダを作成し、選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/f0939b4f-c7e0-cafd-cb02-45b89283f22a.png)

32．エラーが出ました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/eabbf57c-5160-4c02-3020-e412a82d0dc8.png)

33．Unityによるゲーム開発にチェックをいれて、Visual Studio 2019を更新しましたがエラーは出たままでした。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/4856bce5-bfaa-fa42-a69e-c4a26ba8511c.png)

34．ProjectビューのPhoton->Photon Chatフォルダを消して、Photon->PhotonLibs->Metro->Photon3Unity3D.dllを選択、InspectorViewでScriptingBackendをIl2Cppにするとビルドできました。
[PUN 2 UWP Build Errors](https://forum.photonengine.com/discussion/16942/pun-2-uwp-build-errors)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/269e53c5-d6d6-7b48-82c8-843f99ed74b9.png)

35．Player Settings->Other Settins->Graphics Jobsのチェックも外しておきます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/d8ee715c-dcdf-54a5-586f-84ac55cf050d.png)

35．ビルドしてできた.slnファイルをVisual Studio 2019で開き、Release／ARMで実機へデプロイします。

36．HoloLens2とUnityEditorをスタートし、Sphereが共有できることを確かめましょう！
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63863/5c2dcf95-a097-32cd-662e-c9899b4111b6.png)

これでPhotonを用いてオブジェクトの共有ができました。
Azure Spatial Anchorsを用いて現実世界の同じ位置に表示して共有する方法（続く）