😎

Project Spirare による AR コンテンツ作成 [ARFoundation, Immersal 編]

2023/04/27に公開

2023/4/21 に OSS として公開した Project Spirare を使って AR コンテンツの作成と表示を行う方法について紹介します。
Project Spirare では AR コンテンツのロードを実行時に行えるため、Unity プロジェクトの再ビルドを行わずにコンテンツを変更できます。

今回の記事では、表示端末は ARFoundation 対応端末、位置合わせには Immersal を利用します。

デモ動画

一連の流れをまとめたデモ動画です。
本記事の 「AR コンテンツの作成」 と 「AR コンテンツの表示」 の内容に対応しています。

https://www.youtube.com/watch?v=sFYqx0P2AJw

必要機材

  • AR Foundation 対応端末
    (ARKit 対応 iOS 端末 または ARCore 対応 Android 端末)
  • PC
    (Windows または Intel Mac)

また、AR 用端末と PC は同一ネットワークに接続されており、通信が許可されている必要があります。

事前準備

Immersal アカウントの作成

Immersal アカウントを持っていない場合は、Immersal Developer Portal にてアカウントを作成してください。

AR アプリケーションのビルド

リポジトリのクローン

まず、以下のリポジトリをクローンしてください。
https://github.com/HoloLabInc/ProjectSpirare-for-Unity

Unity プロジェクトのセットアップ

unity/SpirareBrowser-ARFoundation-Immersal フォルダを Unity Editor で開いてください。
(バージョンは Unity 2020.3 を利用してください)

Immersal SDK のインポート

Immersal Developer Portal から Immersal SDK Core (.unitypackage) をダウンロードしてください。
ダウンロードできたら、Unity プロジェクトにインポートしてください。

プロジェクトのビルド

プラットフォームを Android または iOS に変更し、ビルドと端末へのデプロイを行ってください。

Unity build platform

Spirare Editor Desktop のダウンロード

以下のページから、最新の Spirare Editor Desktop アプリの zip ファイルをダウンロードし、展開してください。

https://github.com/HoloLabInc/spirare-babylonjs/releases

Spirare Editor Desktop Release Page

AR コンテンツの作成

Immersal マップの作成

AR 表示を行いたいエリアの Immersal マップを作成します。

マップ作成は Immersal Mapper というアプリケーションを利用します。
詳しくは以下の公式ページをご覧ください。

https://immersal.gitbook.io/sdk/tutorials/how-to-map/immersal-mapper

Immersal Mapper

Immersal マップの glb モデルダウンロード

Immersal Developer Portal より、作成した Immersal マップの glb モデルをダウンロードしてください。

Download Immersal Map glb

Spirare Editor Desktop でのコンテンツ作成

シーンの作成

PC で Spirare Editor Desktop アプリを起動し、"空間配置モード" ボタンをクリックしてシーンを作成してください。

Create scene

Immersal マップのセットアップ

先ほどダウンロードした Immersal マップの glb モデルをアプリウィンドウにドラッグ&ドロップし、シーンに追加してください。
さらに、右側の "INSPECTOR" パネルにて以下のように設定してください。

AR Display Mode: hidden
Space origin: 有効
Space origin space id: <Immersal Map ID>

(2023/11/27 追記)
Spirare Editor v1.15.0 以降では、以下の設定も行ってください

Clickable in Editor: 無効

(追記ここまで)

Spirare Editor Immersal Map

コンテンツの配置

AR で表示したい 3D モデル (.glb), 画像 (.jpg, .png, .gif), 動画 (.mp4) をアプリウィンドウにドラッグ&ドロップし、シーンに追加してください。
その後、GUI で位置、回転、スケールを調整してください。

以下のホットキーが利用可能です。

キー 機能
Esc オブジェクトの選択解除
Q ギズモ表示オフ
W 移動用ギズモ表示
E 回転用ギズモ表示
R スケール変更用ギズモ表示
Ctrl + Z オブジェクト操作の Undo
Ctrl + Y オブジェクト操作の Redo

Spirare Editor Content

また、オブジェクトを削除したい場合には、オブジェクトを選択した状態で "INSPECTOR" 内の "Dispose" ボタンを押してください。

Dispose button

AR コンテンツの表示

AR 用端末で SB Immersal アプリを起動してください。

Immersal マップのロード

画面上の UI で Immersal アカウントの情報を入力し、"Sign In" ボタンを押してください。

SB Imemrsal Sign In

次に、Immersal マップ ID を入力し、"Load Map" ボタンを押してください。

SB Immersal Load Map

マップが正常にロードされると、Map <Map ID> has been loaded というメッセージが表示されます。
また、マップのローカライズに成功すると、On first localization with map <Map ID> というメッセージが表示されます。

AR コンテンツのロード

画面上の UI に http://<PC の IP Address>:8080 を入力し、"Load" ボタンを押してください。
一度 "Load" を行うと、その後の Spirare Editor でのコンテンツの変更は自動的に反映されます。

SB Immersal Content Loading

関連記事

Discussion