マルチデバイス間でシェアリングできるAzure Spatial Anchorsをやってみた（HoloLens、iOS、ARKit）

HoloLens2が発表されましたね！
視野が２倍以上に広がり、見た感じ軽く、重心も中央に寄り、心地よさ３倍！w ジェスチャやアイトラッキング、ハンドトラッキングなど、驚く機能が公開されました。ヘルメットも開発されてるし、レンズを上にあげることもできるし、Dynamics365 Guidesなど、嬉しいことばかりでしたね！値段は3500ドル。Azure Kinectも気になりますね！早く欲しい！

Azure Mixed Realityの3つの機能も発表されました。

- Azure Spatial Anchors ・・・マルチデバイス間でアンカーを共有
- Azure Remote Rendering ・・・ハイクオリティな3Dコンテンツをリアルタイムで描画
- Azure Digital Twins・・・デジタルソースと現実世界を関連づけるプラットフォーム

[Azure Spatial Anchors](https://azure.microsoft.com/en-us/services/spatial-anchors/)のプレビューが公開されていたので、早速、試してみました。

## HoloLensアプリ(Unity)の作成
[Quickstart: Create a HoloLens Unity app using Azure Spatial Anchors](https://docs.microsoft.com/ja-jp/azure/spatial-anchors/quickstarts/get-started-unity-hololens)

### 開発環境
- Windows 10 PC
- Unity 2018.3.6f1
- Visual Studio 2017
- HoloLens

### Azure Spatial Anchorsの作成

1．Azure Portalを開き、Spatial Anchorsを新規作成します
2．下記のように設定します
![spatialanchors02.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/5ccbf7d6-7e6d-2bf2-d305-17dab15990a4.png)
3．Account IDとKeyをメモしておきます。
画像
![spatialanchors15.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/ccc54993-af56-66ed-1832-ba42d1bfb2e3.png)

### サンプルプロジェクト

1．[azure-spatial-anchors-samples](https://github.com/Azure/azure-spatial-anchors-samples.git)をダウンロードし、UnityフォルダをUnityで開きます。
2．Build Settingsは以下のようにします。
![spatialanchors06.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/bd3bacf5-387e-edfb-4850-245e360ec8ad.png)

3．プロジェクトビューの`Assets/AzureSpatialAnchorsPlugin/Examples/AzureSpatialAnchorsBasicDemo.unity`を開き、 ヒエラルキーにあるAzureSpatialAnchors のインスペクタービューから先ほどメモしたAccount IDとKeyを入力します。
![spatialanchors05.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/a661d1a2-4223-5bcc-2308-99608be672cc.png)

4．Appフォルダにビルドして、できた`HelloAR U3D.sln`を開き、HoloLensへデプロイします。
5．実行すると、アンカーの登録、検索、削除を繰り返すデモアプリが体験できます。

Next: Create Azure Spatial Anchors Session と表示され、AirTapしたら進んでいきます、

1．Next: Create Azure Spatial Anchors Session 
2．Next: Configure Azure Spatial Anchors Session 
3．Next: Start Azure Spatial Anchors Session 
4．Tap a surface add the Local Anchor. 
5．Next: Save Local Anchor to cloud 
6．Saving...
7．Next: Stop Azure Spatial Anchors Session 
8．Next: Create Azure Spatial Anchors Session for query 
9．Next: Start Azure Spatial Anchors Session for query 
10．Next: Look for Anchor 
11．Looking for Anchor...
12．Next: Delete Anchor 
13．Next: Stop Azure Anchors Session for query 
14．Next: Restart demo 

の繰り返しになります

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Anchor登録して、探して、消すサンプル <a href="https://t.co/LbvPkO8IDl">pic.twitter.com/LbvPkO8IDl</a></p>&mdash; 藤本賢志(ガチ本) (@sotongshi) <a href="https://twitter.com/sotongshi/status/1099766021710180353?ref_src=twsrc%5Etfw">February 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## HoloLensアプリ(C++/WinRT/DirectX)の作成
[Quickstart: Create a HoloLens app with Azure Spatial Anchors, in C++/WinRT and DirectX](https://docs.microsoft.com/de-de/azure/spatial-anchors/quickstarts/get-started-hololens)

Unityのアプリとやってることは同じです。

### 開発環境
- Windows 10 PC
- Visual Studio 2017
- [C++/WinRT Visual Studio Extension (VSIX)](https://marketplace.visualstudio.com/items?itemName=CppWinRTTeam.cppwinrt101804264)
- HoloLens

### Azure Spatial Anchorsの作成
上と同じです。Account IDとKeyをメモしておきます。

### サンプルプロジェクト

1．[azure-spatial-anchors-samples](https://github.com/Azure/azure-spatial-anchors-samples.git)の`HoloLens\DirectX\SampleHoloLens.sln`を開きます。
2．`HoloLens\DirectX\SampleHoloLens\ViewController.cpp`のAccount IdとKeyを編集します。
![spatialanchors16.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/18ba7704-9154-10c9-28c4-b28521b0363e.png)

3．HoloLensにデプロイします。
![spatialanchors07.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/5aa73a67-23e6-6bd8-3ae2-ce172487327b.png)
4．実行すると、アンカーの登録、検索、削除を繰り返すデモアプリが体験できます。

airtap to beginと表示され、エアタップしたら進んでいきます。

1．airtap to begin
2．factory created airtap to create session
3．session created. not configured airtap to configure session 
4．session configured, not started airtap to start session
5．session started airtap to place anchor
6．local anchor created airtap to prepare a cloud anchor 
ここでエアタップしたところでアプリが落ちちゃいました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">なんかアンカー作ったっぽい <a href="https://t.co/Kw4ojDm6Ba">pic.twitter.com/Kw4ojDm6Ba</a></p>&mdash; 藤本賢志(ガチ本) (@sotongshi) <a href="https://twitter.com/sotongshi/status/1099764458832814080?ref_src=twsrc%5Etfw">February 24, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## Unityでシェアリング
[Tutorial: Sharing across sessions and devices with Azure Spatial Anchors](https://docs.microsoft.com/de-de/azure/spatial-anchors/tutorials/tutorial-share-anchors-across-devices)

### 開発環境
- Windows 10 PC
- Visual Studio 2017
- [.NET Core 2.2 SDK](https://dotnet.microsoft.com/download)
- Unity 2018.3.6f1
- iPhone 8 Plus
- Mac Book Pro 2018 
- Xcode 10.1
- [CocoaPods](https://cocoapods.org)
- Unity ARKit Plugin v2.0.0

### Azure Spatial Anchorsの作成
上と同じです。Account IDとKeyをメモしておきます。

### サンプルプロジェクト（SharingService）
1．[azure-spatial-anchors-samples](https://github.com/Azure/azure-spatial-anchors-samples.git)の`Sharing\SharingServiceSample\SharingService.sln`を開きます。
2．SharingServiceを右クリックし、発行をクリックします。
![spatialanchors08.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/59d52ab3-988b-d6b5-470c-9fa6b0175b61.png)
3．App Serviceを作成します。
![spatialanchors09.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/9d022f87-a448-9b3c-cd31-79c577000d35.png)
![spatialanchors10.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/c550508c-e8b8-6cad-14d9-bbaba63b9872.png)
4．ウィンドウが現れます。`http://<app_name>.azurewebsites.net/index.html`
![spatialanchors11.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/4d2ce5c1-7f99-51d1-6562-aad35b37311d.png)

###  iOS Deviceのサンプルプロジェクト
1．[azure-spatial-anchors-samples](https://github.com/Azure/azure-spatial-anchors-samples.git)のUnityフォルダをUnityから開きます。
2．Build Settingsは以下のようにします。
![spatialanchors14.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/9d25fc67-8a09-98ba-2d9c-85db737265e2.png)

3．[Unity ARKit Plugin v2.0.0](https://bitbucket.org/Unity-Technologies/unity-arkit-plugin/get/v2.0.0.zip)をダウンロードし、Assetsフォルダの中をサンプルプロジェクトのAssetsフォルダへコピペします。
![spatialanchors13.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/1d717430-b98d-44c4-639b-6486ae6e872d.png)

4．`Assets/AzureSpatialAnchorsPlugin/Examples/AzureSpatialAnchorsLocalSharedDemo.unity`を開き、ヒエラルキーの`AzureSpatialAnchors`のインスペクタービューの`Base Sharing Url`、`Account ID`、`Key`を入力します。
Base Sharing Url: `http://<app_name>.azurewebsites.net/api/anchors`
![spatialanchors12.PNG](https://qiita-image-store.s3.amazonaws.com/0/63863/931101f4-e240-a799-1b8b-4ae929b92d02.png)

5．`AzureSpatialAnchorsPlugin/Examples/AzureSpatialAnchorsLocalSharedDemo`のみにチェックが入っていることを確認し、ビルドします。

6．あとはXCodeでiPhoneにデプロイします。

# ここから保留、できたら更新します。

## Unityでシェアリング(Azure Cosmos DBを使う)
[Tutorial: Sharing across sessions and devices with Azure Spatial Anchors and an Azure Cosmos DB back-end](https://docs.microsoft.com/de-de/azure/spatial-anchors/tutorials/tutorial-use-cosmos-db-to-store-anchors)