見出し画像

【技術解説】AR x Unity x VPS 〜AR MAPのすすめ〜

デザイニウム

初めまして、デザイニウムのムーラです。
突然ですが皆様は、先日『スパイダーマン：ノー・ウェイ・ホーム』のデジタル配信/Blu-ray&DVD発売記念に公開されたARアプリをご存知でしょうか。

こちらのアプリ、実はデザイニウムにて制作させて頂きました👏
今回は、このアプリ制作に使用したAR MAPというサービスについて紹介していきます。

1. AR MAPとは？

AR MAP とは、ソニーセミコンダクタソリューションズ （以下SSS）がローンチしている、VPSを使ったARコンテンツが簡単に作れるサービスです。
AR MAP SDK というUnityパッケージと、AR MAP Web ToolというWebページを使ってアプリの運用ができます。
これらのパッケージやWebページは、現状誰でもアクセス出来るわけではな
く、利用したい場合にはSSSに直接連絡を取って頂く形になります。既に多機能かつ安定しているので十分に実用可能だと思います！
まずは、AR MAPの主な機能について紹介いたします。

VPS (Visual Positioning Service/System)

VPSとは、カメラの映像から得られた情報をもとに、スマホなどの端末の位置や向きなどを推定するシステムです。
AR MAP SDKは、カメラの画像から特徴抽出を行いクラウドに送信します。
そしてクラウドにて端末の位置や向きを特定し、仮想コンテンツを指定の場所にオーバーレイすることでVPSを実現しています。
画像自体を送信することはないので、データプライバシーへの配慮にもつながります。

AR MAP SDKを利用したUnityアプリでの、ロケーションシステムの振る舞い

ナビゲーション機能

ナビゲーション機能は、現在の位置から指定場所へのルートを取得できるシステムです。
AR MAP SDKがUnityのNavigationと連携することでユーザーの可動領域内で通るべきルートが取得できます。

目的地へ向かう矢印

リソース管理(AR MAP Web Tool)

AR MAPには、AR MAP Web ToolというWeb上でリソースを管理できるシステムがあります。
事前にMapとリソースを登録しておくことで、Web上でMapの好きな位置にリソースを追加や削除、位置や向きの変更などができます。
配置したリソースはアプリ内で取得及び表示することができ、全てのリソースを一度に表示することもできれば、スマホなど端末の現在位置から一定範囲内に配置されたリソースのみを取得し表示することもできます。

作成したリソースがAR MAPのクラウドを経由してUnityアプリに表示される仕組み

リソースを登録する方法は、配置したいPrefabを用意して、AR MAP SDKに同梱されているExporterで出力して、アップロードするだけです。
この時にPrefabファイルをアセットバンドルとして登録するので、デフォルトのアセットバンドルはローカルに配置して、アップデートがある場合はAR MAP Web Toolからダウンロードした新しいリソースを表示し直すこともできます。
またAR MAP Web Toolでは、リソースに追加情報を付与することが出来ます。
Unity側で事前に、この情報を元に挙動を変えるように実装することで、アプリ上でのインタラクションに対する挙動をビルド無しで変更できるようになり、かなり幅広いオーサリングがWeb上のみで実現できます。

AR MAP Web Toolにてリソースに追加情報を付与している

2. AR MAP vs Immersal

VPSを実現するサービスとしてはImmersalが知られています。
ということで、AR MAPとImmersalの差分についていくつか紹介します。

Immersalについて詳しく知りたい方は、デザイニウムのARエンジニアMattが書いてくれた過去記事を参照ください！

Immersalにはオフラインロケーションがある

Immersalは、事前に特徴データをUnityで配置することで、ネットに繋がなくてもロケーションが動きます。
また、ランタイムで特徴データをダウンロードしてくることもできます。AR MAPの場合は必ずサーバーを介してロケーションが走るので、ネット回線の使えない場所でのコンテンツにはImmersalを使う必要があります。

AR MAPはリソース管理ができる

先ほども触れたのですが、AR MAPにはリソース管理をするための環境が用意されています。このおかげで、現地についてからリソースの配置を修正したい場合にも、Webサイトから簡単に行えるので、アプリをビルドし直す必要がありません。
リソースの個数を増やして、位置や向きを変えてなど、コンテンツの重要な部分をビルドせずに変更できるのは便利です。
(※ Immersalでもオブジェクトの移動はできますが、UnityRemoteConfigを使用する必要があり、超便利とまでは言えません。)

AR MAP Web Toolにて、渋谷のMapにリソースが配置されている

ロケーションの仕組みの違い

Immersalでは、ARのマップなどを管理するARSpaceというオブジェクトの配下にリソースを配置することで、親との相対位置でコンテンツの位置を合わせています。
対してAR MAPでは、特徴データから得られたデバイスの位置や向きをもとに、シーン内のカメラオブジェクトの位置と向きを調整します。

Map作成や管理の方法の違い

Immersalの場合、Map作成はとても簡単で、公式アプリにて現地の画像を複数枚撮影すると、数分後には公式デベロッパーポータルサイトにてデータが落とせます。ただし、広域であったり人通りの多い場所のMap作成はコツがいるように思います。
画像を重ねる、人が写り込まないようにする、撮るべきものは撮る、でも画像の枚数は多すぎないようにする、などに気をつける必要があります。
小さくて単純なMapを作るのは非常に簡単ですが、大きくて複雑なMapを作るには練習が必要です。

対してAR MAPの場合は、次のような手順で作成しました。

  1. 360度動画を撮影します。歩き回りながら、対象の空間を全てカバーできるように撮影します。

  2. AR MAP用のスキャンアプリで対象のエリアをスキャンします。

  3. ウォークスルー動画を撮影します。通常ユーザーがどのように空間を見ているかを動画で記録します。

  4. 主要な特徴を計測します。例えば道路の幅は何メートルかなどです。

今回のアプリ制作に使った渋谷駅周辺の広域Mapデータも、この方法で制作しました。手順は少し多いですが、その分確実に高精度なMapデータを作ることができます。

3. オリジナルのベースパッケージ開発

今回デザイニウムでは、AR MAPを使ったコンテンツを量産するためのベースとなるパッケージをUnityで作成しました。

画面遷移、写真/動画撮影などの基本的な機能から、ARリソースとのインタラクションやナビゲーション周りなどの機能が既に実装されている状態なので、簡易的なARアプリならすぐに作れる状態になりました。
VPSで作成できるアプリの一例として、このベースパッケージで作ったアプリを2つ紹介します。

つくも神AR

可愛い”つくも神達”が渋谷の街を闊歩しているARです。
渋谷の道路や、ハチ公の周りを自由に動き回っている子たちや、大きな建物の側面に張り付いた動画などは、まさにVPSだからこそできる機能ですね。

スパイダーマンAR

冒頭でも紹介した、『スパイダーマン：ノー・ウェイ・ホーム』ARアプリです。
渋谷の街にスパイダーマンが現れるARアプリなのですが、こちらは是非ご自分の目で確かめに行ってみてください！といいたいところですが、アプリの公開期間が残念ながら5月末だったので動画を貼っておきますね。

4. AR MAP開発におけるTips

ベースパッケージを作るにあたって得られたAR MAPでの開発に関するTipsをいくつか紹介します。

現地に行かずにデバッグできる

AR MAPでは一枚の画像から特徴データを抽出して位置の特定に使っています。
なので当然、現地に行かなくても現地の画像が一枚あればロケーションに成功します。(途中まで気がつきませんでした…)現地に何度も行けないという場合は、マップを作成する時に一緒にデバッグ用の写真も何枚か撮影しておくと良いです。
なお、AR MAPのロケーションはデバイスが地面に垂直な方が成功しやすいので、デバッグ用の写真もスマホを地面に垂直にして撮影しましょう。

「周りに注意してね！」の文言を入れる

これはARアプリ全般に言えることなのですが、GooglePlayStoreの方針で、13歳未満の人を対象としたARアプリは、注意文言を表示する必要があります。

AR MAPを使ったアプリを作る場合も、ARの表示がされる前に注意文言を表示しましょう。

iOSでリリースする際は審査時に現地でのプレイ動画を添付する

VPSを使ったアプリは、基本的には現地で使うことを想定しています。
そのため、現地に行けないApple審査チームによって却下されてしまいます。
その際にメールで頂いたレビューによると、各機能が実際に動いているところを動画に納めて添付してくれれば良いとのことでした。

ドキュメントが豊富

SDKに同梱されている開発者ドキュメントに、基本的な使い方やAPIドキュメントが日本語で記載されておりとても便利だったのですが、
それだけでなく、ARアプリの作成に使いそうな基本的な機能のサンプルコードであったり、トラブルシューティングなども含まれていました。

開発がお手軽

これはTipsというよりは感想なのですが、開発してみた体感としてImmersalのお手軽さと比べても遜色がないくらいシンプルだったと思います。
ロケーションに関して少しコードを書く必要はあったのですが、ドキュメントにある2~30行のコードをコピペしたら十分でした。

5. 最後に

今回は、AR MAPというサービスについて紹介しました。デザイニウムでは、今後もAR MAPを使って色々なものを作っていく予定です。
みなさんも、新しいARコンテンツを作成するときは、是非AR MAPを選択肢に入れてみてください！

------------------------------------
全ての運命が集結する　スパイダーマンを愛するすべての人へー
『スパイダーマン：ノー·ウェイ·ホーム』
デジタル好評配信中/ブルーレイ＆DVD好評発売中！

© 2021 Columbia Pictures Industries, Inc. and Marvel Characters, Inc. All Rights Reserved. MARVEL and all related character names: © & ™ 2022 MARVEL

6. 編集後記

こんにちは！広報のマリコ（@marikocco）です。AR MAPをつかったARアプリ開発記事はいかがでしたか？『スパイダーマン ノー・ウェイ・ホーム』は私もデジタル配信で観たばかりで、今回のARアプリはとっても興奮しました📱✨
デザイニウムではこのような楽しいARのアプリやサービスの開発が盛り沢山です❗そして一緒に開発してくれる仲間を募集しています💻✨Unityや
 C, C#, C++が使えるエンジニアの方でARや体験型コンテンツの開発に興味がある！という方はぜひご連絡ください😊

The Designium.inc
Official website
Interactive website
Twitter （フォローお待ちしてます😉✨）
Facebook




この記事が気に入ったらサポートをしてみませんか？