はじめに

2025/5/18〜5/31に南青山のPot galleryにて開催したグループ展サルからワタシの進化論に出展しました。
今回は初の造形作品に挑戦したんですが、これをどのようなワークフローで作ったのかなどのを話はAudioVisual勉強会#14でLTしたので、こちらのスライドをご参照ください。


グループ展終了後は、会社の入口に勝手に展示中

Photogrammetry、VR Sculpting、3Dプリンタと技術を駆使して作ったものの、十数センチの展示物が１つだけというのも物足りなく感じて、表参道交差点からギャラリーまでの道案内をするARシーンをSTYLYで作っちゃいました。

本稿は、この作り方の解説になります。

STYLY World Canvasとは

現実の都市空間にARコンテンツを展開できる機能です。
任意の座標付近でシーンを起動し、周囲にカメラをかざすことで位置合わせを行います。
これはVPSという技術で、具体的にはGoogle Geospatial APIを利用しています。
シーンの作り方については下記をご参照ください。

基本的にはSTYLY Studio上にAR on CityアセットとCity Anchorアセットを置いて、任意の場所に3Dモデルなどを配置すれば簡単にシーンを作れます。
しかし現状のSTYLY Studioでは指定座標の半径250mしか表示されないため、広い範囲のシーンを作ろうとするとコンテンツの位置を合わせるのが難しいです。

具体的に「STYLYのオフィスから新宿南口までの経路にコンテンツを並べたい」としましょう。

STYLY StudioでCity Anchorを座標値 35.691381698941505, 139.71073683866584 で配置します。

このように配置したいマップ全体が表示されませんね。
まぁ、そもそも表示範囲指定する機能を付けた方がいいのか、とか、それはそれでロード時間もかかるしメモリも圧迫するし、とか色々意見はありますが。
また単純にモデルを置くだけじゃなくて、UnityEditor上で動きを付けるなどの作業時にはマップデータが表示されていて欲しかったりもします。
そこでUnityEditor上にマップデータを表示する方法について説明します。

※ちなみに余談ですが、大雑把にモデルを配置するだけならPLATEAUのデータをUnityEditor上に取り込んで、それをアテにするのも良いでしょう。
ただPLATEAUのデータは地域によって地表面の高さの情報がなかったりします。
冒頭のシーンの例では、表参道から根津美術館近くに至るみゆき通りが緩やかな坂道になっていて、その道に合わせるようにコンテンツを配置したかったので本稿のような対応を行いました。

マップデータ表示までの手順

UnityEditor上でマップを表示するためのGeospatial Creatorの使い方は、下記に公式ドキュメントがあります。
基本的には下記の手順のままステップ５の「アセットに動きを付ける」を行い、アセットだけSTYLYへアップロードすればOKです。
しかし一点引っかかるポイントがあるので簡単に説明していきます。

1. Unityプロジェクト作成

Unity 2022.3.24f1でプロジェクトを作成します。
参考リンク

2. Google Cloudプロジェクトのセットアップ

前述のマニュアルに従ってセットアップを進めてください。

3D Tiles APIを有効にする
ARCore APIを有効にする
APIキーを作成する

3. UnityProjectに必要なpackageをimport

Cesium for UnityをダウンロードしたらUnityProjectにAdd package from tarballしましょう。
マニュアルに従いARCore Extensionsと、そのSamplesにあるGeospatial Sampleもimportします。

4. サンプルシーンのセットアップ、の補足

マニュアルでは次のようになっていますが、ARCoreExtensions 1.50.0ではGeospatialArf4という名前です。

[Project Settings] > [XR Plug-in Management] > [ARCore Extensions] の Android Authentication StrategyをAPI Keyにします。
Android API Keyの項目は空のままで大丈夫です。

5. マップデータの表示

PlatformをAndroidにswitchしないとAR Geospatial Creator Originの項目が表示されないので注意。

後は指示通り、Add Cesium Georeference Componentをクリックして、Google Maps Tile API Keyを入力し、座標を入れればマップが表示されます。
Heightの値は適当に調整してください。

シーン再生状態でGame Viewを確認したい場合は、Canvasを非アクティブにしてAR Session Originをアクティブにしちゃいましょう。
なんか邪魔なテキストが表示されてますが、気にしません。

STYLYへのアップロード

では実際にコンテンツをSTYLYへアップロードしてみて、意図した位置に表示できていることを確認してみましょう。

1. コンテンツの配置

原点位置に空のGameObjectを作成し、Contentという名前にします。
表示したいものはContentの下にぶら下げて、Contentごとprefab化します。
ここでは原点位置に縦に長いCylinderを置いています。

2. STYLY Plugin for Unityのimport

こちらからPluginをダウンロードし、UnityEditorへimportしてください。

3. STYLYへのアップロード

STYLYへのアップロードについては下記を参考にしてください。

しかし実際にContent.prefabをアップロードしようとすると下記のエラーが出て失敗するのではないでしょうか。

Consoleには下記のようなエラーが出ています。

STYLY Pluginは処理の中でOSX platformにswitchします。
そのタイミングでGeospatial Sampleに含まれるスクリプトがエラーを引き起こしているようです。
ワークアラウンドとして Assets->Samples->ARCore Extensions->1.50.0->Geospatial Sample->Scripts->GeospatialController.cs を削除しちゃいましょう。
えっ、そんな対応でいいの！？と思うかもしれませんが、いいんです。

再度、Content.prefabをアップロードしてSTYLY Studio上で配置してみましょう。
UnityEditor上と同じ位置にCylinderが表示されていることを確認できるかと思います。

モデルを道沿いに動かす

曲がりくねったり高低差があったりする道沿いに、どのようにモデルを動かすのか。
ここではCinemachineのDollyTrack + DollyCartを使う方法を説明します。

Cinemachineとは

Cinemachineは、Unityでカメラの動きや制御を簡単に管理できるツールです。
複雑なスクリプトを書かずに、プレイヤー追跡や映画的なカメラワークを直感的なUIで設定できます。

このCinemachineの中でも、カメラを台車に載せて移動させて撮影する機能を提供するのがDollyTrackとDollyCartです。
あくまでもCartの動くパスを定義する機能なので、カメラと無関係のオブジェクトに対して使うこともできます。
今回はこれを利用して、うまく道沿いにパスを設定していきます。

1. Cinemachineパッケージのimport

標準のUnity Registryの中にあるので、Package Managerからimportしてください。

2. Dolly Track with Cartの追加

Hierarchyビューを右クリックしてCinemachine->Dolly Track with Cartを追加します。

CinemachineBrain, Dolly Track, Dolly Cartが追加されるのでContentの下にぶら下げておきましょう。

3. パスの設定

Dolly Trackを選択し、Waypointsを増やしながらそれぞれの位置を調整していきます。

地味な作業ではあるんですが、曲がりくねったりしてもいい感じに補間してくれるのでストレスがなくて楽しいですね。

4. Dolly Cartにモデルを載せる

Dolly Cartの下に適当なモデルをぶら下げましょう。
ここでは3mのCubeを置いています。
現実世界で3mのCubeって、なかなかの迫力ですよ。

Dolly Cart の Position Units を Distance にして Speed を適当な値にしましょう。
ちなみに100は速すぎるぜ。
シーンを再生するとDolly Cartが動き出すのを確認できるかと思います。
Dolly TrackのLoopedにチェックを入れれば、Waypointsの末端と先頭が繋がります。
後はこのDolly Cartを沢山複製して初期Positionをずらしても良し、Speedは0のままAnimationやTimelineでPositionの位置を動かしても良し、Dolly Cartをprefab化してPlaymakerから生成・制御しても良し、と色々応用できますね。

15個のCubeが延々とパス上を高速で移動するARシーンがこちらになります。
STYLYオフィスの1km圏内なら起動できるようにしたので、新宿南口付近でも見れるはず。

おまけ

Dolly Cartの下に、更にDolly Track with Cartを追加してみたり、CubeをLookAtするCameraがRenderTextureに書き込んだものを、uGUIのRawImageに貼り付けたりするとこんな感じになったり。
ちなみにMain Cameraを上空からの俯瞰にしているのは、マップの表示がCameraの表示範囲でカリングされるため。
※STYLY mobileのAR表示時はRenderTextureに書き込むCameraに周りの建物とかは映らないのでご注意。あくまでUnityEditor上のお遊びということで。

サンプルのUnityProjectは下記にあります。
但しAR Geospatial Creator OriginのGoogle Map Tiles API Keyを入力しないとマップは表示されないので、ご自身のAPI Keyを入れてお試しください。