別に、作ってしまっても構わないのだろう？ARクラウドを

本稿は2021/01/16と2021/02/13に開催された[「東京23区から新しい世界を創るアイデアソン／ハッカソン」](https://asciistartup.connpass.com/event/198420/)で、筆者が参加したチームで何を作ったかというお話です。
主に技術面と、筆者が何を考えながらこれを作ったかというところを中心に解説していきたいと思います。

本題に先駆けて、チームリーダーのmiyaura（@takabrz1）さん、一緒にアイディアを議論し開発した、@HNohitoさん、松尾さん、Akaiさん、Shirasuさん、お疲れ様でした。とても有意義な時間で楽しかったです。ありがとうございました。
本稿の内容は、このチームでの成果の私の視点での解説となります。よろしくお願いいたします。

# 作ったもの

LITというプロダクトを製作し、発表しました。
実際にクライアントを動かしているところの動画を挙げます。

[![LitMovie.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30257/bf6b6b05-d82d-bc86-bc14-7b12c761cdf0.png)](https://youtu.be/73xO1ekPLro)

これは、[PLATEAU](https://www.mlit.go.jp/plateau/)の3D都市モデルデータを活かした、ARクラウドのオーサリングツールとクライアントです。
多様なコンテンツを現実世界に重畳するためのプラットフォームとして企画したので、分かりにくくてあまり審査員受けは良くなかったのかもしれません。

PLATEAUは国土交通省が主導して進めているプロジェクトで、日本全国の3D都市モデルの整備、オープンデータ化のプロジェクトです。今回のアイディアソン・ハッカソンではこのデータを活用したものを提案、作成するというものでした。

我々のPLATEAU活用のポイントは、精細な3Dモデルを使うことで現実に則した形での直感的なARコンテンツの配置をオーサリングツールで実現することと、VPSを用いた正確な位置合わせとPLATEAUのデータを合わせることで、地理空間情報をARコンテンツとして配置可能にしたところです。

もう一つ重要なコンセプトが、「世界をHackableに！」です。
現状の現実空間に3Dコンテンツを重畳するものは、見た目だけの拡張現実になっているものがほとんどです。我々はWeb的な技術を取り込むことで現実に重畳する3Dオブジェクトをインターネットサービスの世界につなげることを可能にしました。それにより、現実空間に対して機能を拡張するARを実現できたと思います。
Webそしてインターネットの接続性により、動的なコンテンツ、インタラクティブなコンテンツ、パーソナライズされたコンテンツといったものが可能になります。
また、IoTデバイスなどとも容易に接続することができるでしょう。

# システム構成図

![ハッカソンで使う資料.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30257/b8c60017-9c43-c0a7-3ac4-e54b053f806d.png)

# 使用技術

オーサリングツール、クライアントともにUnityを使っています。
VPSとして、[Immersal](https://immersal.com/)を使用しました。
ライブラリとして、[MRTK](https://github.com/microsoft/MixedRealityToolkit-Unity)、[UniTask](https://github.com/microsoft/MixedRealityToolkit-Unity)、[UniVRM](https://github.com/vrm-c/UniVRM)などを使っています。

サーバー側は、[Google App Engine](https://cloud.google.com/appengine/)のPythonインスタンスで動かしています。
データストレージは[DataStore](https://cloud.google.com/datastore/)です。

3Dオブジェクトのマークアップ言語は独自実装ですが、[A-Frame](https://aframe.io)を参考に（可能な限り互換になるように）しています。
スクリプト実行エンジンとしてLua言語のC#実装である、[MoonSharp](https://www.moonsharp.org)を使っています。マークアップのパーサーとして[HTMLAgilityPack](https://html-agility-pack.net)を使っています。

コンテンツとしてのマークアップのファイルや画像などの配信サーバーとしては、今回はGithub Pagesを活用しましたが、原理上は任意のファイルを公開できるWebサーバーであればなんでも使えます。

# チャレンジとポイント

## オーサリングツール

#### MRTKでオブジェクトの操作を実装

オーサリングツールでは、3Dオブジェクトの場所や向き大きさなどをインタラクティブに操作する必要があります。

Mixed Reality Toolkit（以下MRTK）は、Microsoft社が公開しているMRアプリケーション用のUIツールキットです。
MRTKはHoloLens向けの開発などでよく使われますが、調べてみるとマウス操作にも対応しています。
MRTKでは様々な3DのUIビルディングブロックが用意されているので、今回はそれらを使って難しい3DインタラクションUIの開発を容易にしました。当初デスクトップアプリケーションとして使えるのか不安でしたが、実際に動かしてみるといくつかの制限があるものの、比較的すんなり動き、しかも便利なコンポーネントを使って非常に楽に動くものを作ることができました。

最も大きな制約としては、通常一般的に使われるuGUIのコンポーネントがMRTK下だとうまく動かないというところでしたが、今回はTABキーによる編集モードの切り替えという荒業で回避しました。

マウスによる操作を可能にするためには、MRTKのProfile設定で、`Input Data Provider`として、`Unity Mouse Device Manager`を追加したProfileを作成します。Cameraに`EventSystem`などのUI制御用のコンポーネントの追加も必要なようです。
モード切替時は、`MixedReality Toolkit`GameObjectのアクティブを切り替えることと、`Cursor.visible`、`Cursor.lockState`を切り替えることでMRTK制御のマウスカーソルとシステムのマウスカーソルを切り替えています。

今回はこれでうまくいきましたが、なんとなくしっくりこない部分が多いので、うまく使いこなすためにMRTKにおけるマウスの管理についてより調べる必要がありそうです。

空間に配置する3Dオブジェクトには、`ObjectManipulator`と`BoundsControl`を生成時にスクリプトからアタッチすることで、マウスによるTransformの操作をほとんどコードを書かずに実現しました。

`ConstraintManager`などをうまく設定することで、もっと使いやすいシステムにできると思います。

以下の画像が、実際にオーサリングツールを動かしているところです。
![LitAuthorImage.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/30257/d474b664-14df-b67c-2ad6-67550b042de7.png)

ユーザービリティというか、使いやすさというか、UI/UXというか、そういうところは現状では大いに課題です。

## クライアント

### 建物のマテリアルについて

当初どういう表現にするか迷ったのですが、結果半透明に表示するマテリアルを設定しました。
その際、単なる半透明だと建物が重なってしまって、ARコンテンツも現実も見にくい状態になるので、2Passで、最初のパスでZ値だけ書き込み、2番目のパスでZTestしながら半透明にしたカラーを書き込むシェーダーにしました。個人的にはあまり2Pass以上のシェーダーを書いたことがなかったので、UnityのShaderLabチュートリアルを読みながら勉強になりました。

もっとうまい方法があると思いますが、ここはとりあえずこんな感じで。

### 俯瞰モード

一人称視点だけでなく、広域を俯瞰で見ることで情報を把握しやすくなるのではという意見があり、上空からの俯瞰モードを備えています。
現状では単に上空のカメラに切り替わるだけなのですが、うまく作ればとても便利なのではないかという可能性を感じます。

## データやAPI

今回のハッカソンでは、サーバーはちゃんと機能するけどあまりコストをかけないという方針で作りました。
100行に満たないPythonプログラムがサーバーのすべてです。

このサーバーで管理している情報は、オブジェクトの配置されるTransformについての情報とオブジェクトのマークアップファイルを参照するURL、そして紐付ける場所に関する情報とコンテンツの分類のデータです。

基本的にはDataStoreに対してのCRUDしかしていないサーバーです。プライマリキーとしてオーサリングツール側で生成したUUIDを使っているので、複数の作業者でキーがバッティングしないようにするのは、UUIDの確率的に重複しない性質によっています。つまりプライマリーキーの管理もオーサリングツール任せになっています。

同じオブジェクトの同時編集などを考えると、ロック処理などもしていないので現状のサーバー側はかなり不足です。また、認証認可がないので、セキュリティ対策もゼロです。誰でも編集出来てしまいます。
なので、実際にプロダクトレベルにしていくコストは結構かかりそうですね。

## マークアップ言語

マークアップのデータを処理して3Dオブジェクトを構築する部分は、私が以前から取り組んできたOrthoverseという仕組みのエンジンをほぼそのまま使っています。
Orthoverseについては、以前に発表した内容がありますので、気になる方はそちらをご覧ください。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/TMCN?src=hash&amp;ref_src=twsrc%5Etfw">#TMCN</a> <a href="https://twitter.com/hashtag/HoloLens?src=hash&amp;ref_src=twsrc%5Etfw">#HoloLens</a> <br>Tokyo HoloLens Meetup vol.21で発表したLTの資料です。<br>「xRブラウザを作っている話」<a href="https://t.co/ACk8QO2nWY">https://t.co/ACk8QO2nWY</a></p>&mdash; Ohoooo (@ohomagic) <a href="https://twitter.com/ohomagic/status/1288468776233525248?ref_src=twsrc%5Etfw">July 29, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">先ほどの発表資料です。よろしくお願いします。<a href="https://twitter.com/hashtag/WebXRTech?src=hash&amp;ref_src=twsrc%5Etfw">#WebXRTech</a><a href="https://t.co/YKUvKG3ycq">https://t.co/YKUvKG3ycq</a></p>&mdash; Ohoooo (@ohomagic) <a href="https://twitter.com/ohomagic/status/1297861125267062786?ref_src=twsrc%5Etfw">August 24, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ざっくりとした動作としては、マークアップで書かれたテキストデータを読み込み、各タグを解釈しつつUnityで扱うMeshやGameObjectを都度生成していくという動きです。
適切にコンポーネントを管理しながら動かしているので、マークアップに`<script>`タグで含まれるLuaスクリプトからのコンポーネントへのアクセスなども制限付きで可能です。

マークアップの仕様自体は前述のようにA-Frameを参考にして、必要なものを実装しています。

今回使用したバージョンでは、各種の立体プリミティブを出すこともできますし、3Dオブジェクトへの簡単なアニメーションの付加、
テクスチャとしてオンラインの画像の読み込みや、OBJ、GLTF、VRMといった3Dモデルのオンライン読み込みにも対応しています。
しかし、こちらのマークアップもオーサリングツールがあった方がいいだろうなと今回強く思いました。

また、サーバー側で動的にマークアップを生成する仕組みも、可能なのですが今回はそこまで作ることができませんでした。

# 見えてきた課題

## LITをリリースするためにはの課題

実際にこのシステムをサービスとしてリリースすることを考えると、足りないものはたくさんあります。
基本的な認証認可さえないので、アカウント管理と認証認可あたりから作りこまなければいけません。

もちろんセキュリティ的なところも考慮して設計を練り直す必要があるでしょう。

ベースマップとしての3D都市モデルも、現状のままでは取り回しが困難なので、タイルに分割するなどや、扱いやすくコンパクトな形式にして、CDNに置くなどの対応、さらに、都市モデルの更新や端末キャッシュの仕組みなど、ここだけでも相当様々なことを考えないといけなさそうです。

プログラムの作りの観点からも、現状だとデータとコードの分離がされていない箇所ばかりなので、根本的な設計のし直しが必要だなぁと思います。各所にハードコードがたくさんあるため、コンテンツのバリエーションを増やす場合などにアプリのビルドし直しが必要で、そのあたりプロダクトにしていくには、色々必要なところです。

あとはプライバシー配慮として、カメラで周囲を撮影する行為がどうとらえられるかというところを考えないといけないかなと思っています。

## ARクラウド実現のための課題

### 人類の生活域を広範囲で一元的にカバーするVPSの実現

今回作っていて、ARクラウドインフラの実現に圧倒的に不足していると感じる技術が、自己位置推定のLocalizeの仕組みです。GPS(GNSS)の精度向上は著しく、民生レベルでも数cmで測位できるモジュールなども販売されていますが、スマホなどの情報端末で一般的に使えるようになるかは悲観的に見ざるを得ないでしょう。

また、今回利用したImmersalのような、カメラ画像から位置を推定するVPS系の仕組みは、広範囲をカバーするためには膨大なデータを収集する必要があり、インフラとして一般的に生活圏の広範囲で利用できるように整備するのは大変でしょう。
さらに、現状使えるVPSは独自座標で運用されることが多いので、よく使われている緯度経度をもとにした空間情報との相性があまりよくないところも課題です。
（Immersalはマップの作成時に端末のGPSから座標値を取ってLocalize時に変換できる機能がありますが、端末のGPS精度に依存します。）

Enterpriseでは、そのあたりを解決できるっぽいVPSもあるようですが、私がそれらについて詳しくないので、ここではこのような評価とします。

今回のハッカソンにおける議論の中で、VPSによる点群マップをPLATEAUの3Dデータとマッチングすることで、緯度経度とVPS座標のマッチングをしたらどうかという議論が@HNohitoさんとできました。また、高精度3Dモデルデータを元にVPSを構築することができるのではないかという議論もハッカソン内の雑談でありました。

一方で、VPSのための画像取得がプライバシーなどについて問題になりそうなところでもあります。

どちらにしろ、自己位置推定では一つの方法ではなく複数の方法をうまく組み合わせて、いわゆるセンサーフュージョンしてうまくやっていくことになるのだろうと思いますが、引き続き注目していきたい部分です。

### ARでの場所の権利の管理

今回の我々のプロダクトでは、コンテンツ種類ごとに表示を分ける構造を作りましたが、場所の権利者とARコンテンツの配置の管理は、実際にこうしたシステムが社会のインフラになっていくときには大きな課題になるでしょう。

何ら制限がない場合には、自社のビルに競合社が無断で広告を出すとか、AR誹謗中傷・ARハラスメントとか、不適切なコンテンツの配置や広告の嵐など、広範囲に様々な課題が出てきそうです。

今回、PLATEAUには、属性情報として建物の所有者などの情報や、土地の活用種類などの情報が入っていました。
こういった情報を活用して、この場所は住宅地だからこういうコンテンツは置けないとか、ある程度の管理ができるようになるといいのではないかと思います。「電脳コイル」におけるホームドメインとか寺社ドメインみたいな感じになるのかもしれませんね。

# おわりに

ARクラウドという言葉自体は、結構ひとによって定義にブレがあり難しいところもあります。
本稿タイトルがある意味死亡フラグみたいなものなので、まぁ実際にやると今だとこんなものかなと思ってもらえばいいかなと思いますが、
人によっては逆に、今でもここまではできるのかと思うのかもしれません。俺ならもっとできるという人もいるでしょう。

今回は、私自身は自分自身の今どこまでできて何が足りないのかというところを確認するよい機会になったかなと思っています。
どちらにしろ、私としてはARクラウドがインフラとなり、現実世界がさらに便利に楽しくなる世界を夢見ています。可能ならそれを実現する側に居たいなとも。ARクラウドの実現に取り組むプロジェクトがあれば、是非声をかけていただきたいです。

最後に、LITの元ネタをまだ誰にも明かしていなかったので、ここでネタばらししておきましょう。
私はSFをよく読むのですが、ラリー・ニーブン氏のノウンスペースシリーズにでてくる人類の植民惑星にプラトーという惑星がありまして、そこにある山の名前が、Mt.Lookitthatという設定があります。「あれを見ろ！」という言葉は今回のプロダクトにも合うかなと思ってイニシャルをとってLITと提案させてもらった次第です。

メタバースなどもSFからですし、XRの未来を考えるときSFは素晴らしいアイディアの宝庫なのではないかと思います。つまり...
SFはいいぞ！