【ゼロから丁寧に解説！】Unity × Immersal SDKの手順

# はじめに
普段、<font color="red">IT企業で働いてますプログラマー芸人のジンバ<font color="black">と申します！
今回はUnity × Immersal SDKでVPSを用いたARアプリを実装していきます！
現実空間に正確にオブジェクトを配置することができますよ！

# VPSとは
<ul>
<li>Visual Positioning Systemの略
<li>ARマーカーが無くても、事前にスマホで撮影しておくと空間の形状を記憶してオブジェクトを表示できる。
<li>ARCore Geospatial APIやNiantic LightshipなどのVPSサービスがあるが、今回はImmersalを採用した。
</ul>


![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/f7b65a2d-7f90-172a-a3fd-fc2e2dbec6ca.png)

https://www.sovec.net/xrchannel/feature/vps/　
より

# 手順の注意
・分かりやすいようにかなりスクリーンショットを貼っています。長く感じますが、手順自体は少ないです。
・「Immersal SDK Ver 1.20.0」の情報です。今後アップデートあれば更新します。

それでは手順の説明に移ります！

# アカウント登録
「Immersal Developer Portal」と検索して、Immersal Devloperのアカウントを作成します。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/13f74390-6ec8-ec8b-5022-5a1d6a72eeba.png">

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/5b037e08-0844-7882-0477-62322e8c0ed2.png">

作成が終わると以下のようなポータル画面に移ります。後述しますが、ここでSDKをインストールしたり、マッピングしたデータを取得します。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/21b61a48-def4-448f-be05-67dfcfcad837.png">

# アプリをインストールしてマッピングする
アプリストアで「Immersal Mapper」と検索してインストールしてください。

![image2-1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/74a0c158-ab11-458d-262f-11b8cf9c986e.png)

アプリを開いてNEXTを押します。
<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/7ac194ba-b72d-ab2d-68c3-f3efe3c76a7f.png">

先ほど作成したアカウントでログインします。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/e50129ff-b4dd-6b97-bbff-3fd65b596bac.png">

すると今までのスキャンを閲覧できる画面に移ります。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/4d92ca32-7832-a877-a64b-031c5d275555.png">

マッピング撮影をするときは、下のサイコロのようなボタンを押します。するとこのように撮影画面に移ります。

![image8.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/c14e3c5c-a257-d841-9331-ecdad9a130fe.png)


右上の「M・R」を「M」にします。赤ボタンを押すと撮影が始まります。周りに気をつけながら、対象の物体を色んな方向から撮影します。

![image6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/6008b49b-f526-ef2f-051c-7cb9468505e6.png)

終わったらチェックボタンを押して名前をつけてSAVEします。今回は「Poster」にします。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/cdb0a32a-1ac7-6dc7-9118-489a2ecea860.png">

するとスキャンした一覧に「Poster」が追加されました。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/8f02a7c6-7a38-067b-a834-dfc95e4aa801.png">

これを押して、クラウドボタンを押します。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/f09cb946-535c-27eb-d287-1dd525a77eb2.png">

そしてアップロードします。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/cb7db071-fc55-8f3d-4065-de694e819e13.png">

デベロッパーポータルに戻り、「View your maps」をクリックします。

<img width="400" alt="ファイル名" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/21b61a48-def4-448f-be05-67dfcfcad837.png">

スキャン一覧に「Poster」が追加されたことが分かります。これらのデータは後ほど使用します。

![スクリーンショット 2024-09-12 21.30.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/45606708-1301-2438-5346-83e69449ae32.png)

# サンプルプロジェクトを開き、Unityで開く
デベロッパーポータルで「Download Immersal SDK 1.20.0 Core(.unitypackage)」をクリックしてパッケージをダウンロードします。
次に「Immersal SDK 1.20.0 Samples(Unity)」をクリックします。

![スクリーンショット 2024-09-12 21.29.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/93448ef7-a744-1156-68d1-cf7f42c0157d.png)

GitHubのサンプルプロジェクトのページに飛ぶのでクローンします。

![スクリーンショット 2024-09-12 21.45.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/7b1d66ce-976f-25a9-89f1-88b888d3c8c5.png)

サンプルプロジェクトをUnityで開きます。以下のような警告が出ますが無視して進みます。

![スクリーンショット 2024-09-12 21.51.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/50b21bef-0b21-c180-ee05-bc7a3df2e844.png)

プロジェクトを開くとエラーが出ます。これはまだImmersal SDKをインストールしていないからです。

![スクリーンショット 2024-09-12 21.52.15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/c7efc878-8c68-338f-aa6a-8bc3998f2ff5.png)

「Assets→Import Package→Custom Package」で先ほどダウンロードしたパッケージを選択します。

![スクリーンショット 2024-09-12 22.01.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/9c7c12bb-7aa0-69ce-6da0-f7f7412d35b1.png)

![スクリーンショット 2024-09-12 22.01.32.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/690de77b-6fd6-ba92-99f7-108a1bade92b.png)

するとエラーが消えます。

![スクリーンショット 2024-09-12 22.23.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/6c1ea979-930c-7577-dc1a-07c9f847c309.png)


# マッピングデータをインポートして、オブジェクトを配置する
デベロッパーポータルを開き、マッピングデータをダウンロードします。
「Download Map」と「Download metadata JSON」を押してダウンロードしてください。


![スクリーンショット 2024-09-14 12.42.13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/28635b13-f4e6-3938-f258-249bca097d37.png)

![スクリーンショット 2024-09-14 12.42.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/af4a12c5-e4de-dd36-bb24-10fdc9b522d0.png)

これらのファイルをプロジェクトの「Map Data」フォルダに入れます。

![スクリーンショット 2024-09-14 12.43.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/800957d4-0d46-5a94-d4c2-710cca4ab009.png)

「Immersal SDK→Samples→Scenes→ContentPlacementSample」を開きます。

![スクリーンショット 2024-09-22 22.41.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/76118385-776e-9ff8-469b-e29127165ed3.png)

AR Space配下に3つオブジェクトがありますが、その内2つを消して残った1つをわかりやすいように「Poster Map」に変更します。

![スクリーンショット 2024-09-14 13.13.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/f5ba01a9-0d30-e61f-adb6-c7b95ff41a03.png)

PosterMapのARMap(Script)のMap Fileにダウンロードしてきた「.bytes」ファイルをアタッチします。

![スクリーンショット 2024-09-14 13.14.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/9e13c6d7-937a-05b3-23ff-174c01fad995.png)

すると先ほど撮っていたポストの形状が点群で出るので、好きな位置にオブジェクトを置きます。今回はポスターの上にCubeを置きました。

![スクリーンショット 2024-09-14 13.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/874edc38-8dc5-7f7a-0ec7-b5a239d71dfa.png)

このままだと初めからCubeが表示されるので、一度非アクティブにします。

![スクリーンショット 2024-09-14 22.58.01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/b7da3df7-63f5-47dd-984b-9f85d196c821.png)

PosterMapの「AR Map→Events→On First Localization」でCubeをアタッチしてSetActiveを指定します。これでフィールドが認識したときにCubeが表示されます。

![スクリーンショット 2024-09-14 22.58.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/06d5a966-73bd-e4e6-191e-39d74117f5ac.png)


## 撮影時に「M・R」でMにすると
先ほど、M・RでRにしましたがMで撮影してみます。(自分で毎回シャッターを押す必要があります。)

![S__131833861.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/b087827b-b4c4-565e-08a0-97593efeb3fa.jpeg)

するとglbファイルをダウンロードできるので
![スクリーンショット 2025-02-08 22.22.04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/eb60f99f-551e-ded3-711b-9701245caddd.png)

「glTFast」をインポートして持ってくると...
https://github.com/atteneder/glTFast
glbファイルをエディタ上で確認できます！

![スクリーンショット 2025-02-08 22.24.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/06252d50-5ec5-fdfc-aff0-2912d25fef4d.png)

元の点群と重ねて、よりどこに置けばいいか分かりやすくしましょう！



# ビルドして撮影場所でアプリを起動する
Build SettingsでPlatformをAndroidまたはiOSにします。
また、Scenes in BuildをContentPlacementSampleにします。

![スクリーンショット 2024-09-14 22.23.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/7ae2c17e-72d4-0c6b-b01a-de72958ae32a.png)

撮影場所で起動するとオブジェクトが現れました！

![成功.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/97faf3bd-40b1-0dbc-48e5-d8420ee8f8c8.png)

# 応用
例えば複数場所のマッピングデータを使いたい場合以下のようにAR Space以下を増やします。このようにしても、別場所のマッピングのオブジェクトが表示されることはないので安心してください。

![スクリーンショット 2024-09-22 22.54.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/8c017308-2696-9cd5-c620-611ba09460f8.png)

# マッピングの注意点
### ツルツルしたところに点群ができない
画像のように左側の木目のところは点群ができますが、右側のツルツルなところは点群ができません。
コーディングされた床などは苦手かもしれないです

![ツルツル.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/4d69dc7f-1a47-d114-76f9-d12af0384f35.png)

### 周りに障害物や人がいるとオブジェクトが表示されない
マッピングしたあとビルドして、周りに障害物や人がいる現地で起動してもオブジェクトが表示されないことがあります。
これはVPSが「違う場所だ」と判断してしまうからです。


# 告知
ご覧いただきありがとうございました！
<font color="red"><b>普段、IT企業で働いてます「プログラマー芸人」ジンバです！</b><font color="black">
YouTubeもご覧くださいー！↓

https://youtu.be/4sfvz4kov84

![初テレビ.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3574599/dbffa7f4-70ac-e1ef-4f7f-1ab18a6c9d04.png)