😎

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

2023/05/01に公開

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

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

デモ動画

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

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

必要機材

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

事前準備

ARCore API キーの取得

以下のドキュメントを参考に、Google Cloud Platform プロジェクトで ARCore API を有効にしたのち API キーを取得してください。

https://developers.google.com/ar/develop/unity-arf/geospatial/enable-android?hl=ja#api_key_authorization

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

リポジトリのクローン

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

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

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

ARCore API キーの設定

Unity Editor で Edit > ProjectSettings > XR Plug-in Management > ARCore Extensions を選択し、Android API Key または iOS API Key に API キーを入力してください。
ARCore API Key

プロジェクトのビルド

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

Unity build platform

AR アプリケーションの初回起動

AR コンテンツを配置するためのフォルダを作成するため、一度アプリケーションを起動しておいてください。

Spirare Editor Desktop のダウンロード

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

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

Spirare Editor Desktop Release Page

AR コンテンツの作成

シーンの作成

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

Create scene

カメラ位置の変更

画面左上の "latitude, longitude" と書かれた入力欄にコンテンツを配置したい付近の緯度経度(緯度、経度の順でカンマ区切り)を入力し、"Set Camera Target" ボタンを押してください。

Spirare Editor Geo Mode

入力する緯度経度を調べるには Google マップを使うと便利です。
Google マップ上で右クリックすることで表示されるメニューから緯度経度の数値を選択すると、値がクリップボードにコピーされます。
Google Map

PLATEAU 3D 都市モデルの表示(オプション)

画面左上の "PLATEAU Models" ボタンを押し、リストから地域を選択することで、PLATEAU 3D 都市モデルを表示することができます。
(一部地域のみ対応しています)
再度 "PLATEAU Models" ボタンを押すと、リストが非表示になります。

ここで表示される 3D 都市モデルはコンテンツ配置時の参考として利用できるもので、AR コンテンツ自体には含まれません。

Spirare Editor PLATEAU

コンテンツの配置

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

コンテンツのダウンロードと配置

画面左上の "Export" ボタンを押し、.poml.zip という拡張子のファイルをダウンロードしてください。このファイルが AR コンテンツを表すファイルです。

ダウンロードしたファイルを AR 用端末に配置します。

Android の場合、Android\data\jp.co.hololab.spirarebrowsergeospatial\files\LocalContent フォルダ内に .poml.zip を配置してください。

POML Content Android

iOS の場合、ファイルアプリで表示される "この iPad 内" > "SB Geospatial" > "LocalContent" フォルダ内に .poml.zip を配置してください。

POML Content iOS

AR コンテンツの表示

AR 用端末で SB Geospatial アプリを起動してください。
端末内に配置した AR コンテンツ(.poml.zip ファイル)はアプリ起動時に自動的にロードされます。

Geospatial API を利用した位置合わせ

画面左上の "Align" ボタンを押し、端末の位置合わせを行ってください。
画面上部に緯度経度の値が出ない場合や、値が出ているがコンテンツの位置がずれている場合には何度か "Align" ボタンを押して調整してください。

Spirare Browser AR View

関連記事

Discussion