都市ＡＲの作り方 PLATEAU ✖ Geospatial API

自己紹介 41h0(シホ) / twitter :@41h01 Unity/xRエンジニア 株式会社バルテスモバイルテクノロジー所属 会社ではUnityで3Dモデルの ビューワーアプリを開発しています (iOS/Android/PC/VR/AR) 個人ではゲームやVRアプリや VRSNSのワールド...etcを作ってます

本日のアジェンダ ・PLATEAUとGeospatial APIについての説明 ・PLATEAU SDK導入、PLATEAUモデルの取得方法解説 ・Geospatial API導入、サンプルシーンから 　都市ARを作成する方法解説

先日こんな都市ARアプリを作りました

どうやって作ったか？

PLATEAUとは？ 国土交通省が主導する、 日本全国の3D都市モデルの整備・活用・オープンデータ化 プロジェクトのこと このプロジェクトで作成された3Dモデルは無料で 利用することができる Unty,UnrealEngineSDKがある

No content

Geospatial APIとは？ Googleストリートビューで地図が見られる場所であれば カメラの情報から位置情報を推測、 利用することができるAPI Googleストリートビューの数百億単位の画像から 機械学習を用いて正確な位置情報を提供している 2023/1/22現在は無料で利用できる

UnityでPLATEAUモデルの　　　 GeoSpatialAPIで 位置を元に3Dモデルを配置　　　 現実世界の位置情報に 　　　　　　　　　　　　　　　 3Dモデルを表示 都市ARの仕組み

実際にやってみた (Unity iOS AR環境構築は終わってる前提からSTART) ※環境情報 Unity 2021.3.15f1 PLATEAU SDK for Unity 0.6.0 AR Foundation 4.27 ARKit XR Plugin 4.27 ARCore Extensions 1.35.0 Xcode 14.2

PLATEAUSDKの導入(1/3) 下記リンクにある最新版の tgzファイルをダウンロードする https://github.com/Synesthesias/ PLATEAU-SDK-for-Unity/releases

PLATEAUSDKの導入(2/3) Package Managerの Add package from tarballから 先ほどダウンロードしたSDKを インポートする

PLATEAUSDKの導入(3/3) 3D都市モデル（Project PLATEAU） ポータルサイトから 欲しい地域のCityGMLを ダウンロードし、 ダウンロードしたZipファイルは 解凍しておく https://www.geospatial.jp/ ckan/dataset/plateau

PLATEAUのモデルを生成する(1/4) PLATEAU SDKウィンドウを表示し、 先ほどダウンロードした CityGML内のudxフォルダの 一つ上の階層のフォルダパスを SDKのフォルダパスを設定し、 範囲選択ボタンを押す

PLATEAUのモデルを生成する(2/4) モデルを生成したい範囲を選択し、 範囲選択決定ボタンを押下する

PLATEAUのモデルを生成する(3/4) モデルをインポートボタンを押すと...

PLATEAUのモデルを生成する(4/4) 選択した範囲のモデルが生成されます！ ※ このまま使うと 裏でスクリプトが走り、 シーン開くたびに 結構待つので FBX Exporterとかで FBXにして 再インポートして 使うとよい テクスチャが 剥がれますが、 都市ARでは 使わないので問題なし

Geospatial API導入(1/4) Google Cloud Platformでプロジェクトを作成し、 AR Core APIを有効にする

Geospatial API導入(2/4) 作成したプロジェクトの APIとサービス>認証情報>認証情報を作成からAPIキーを作成し、 控えておく

Geospatial API導入(3/4) UnityのPackage ManagerのAdd package from git URLで “https://github.com/google-ar/arcore-unity-extensions.git” を入力し、Google ARCore Extensions for AR Foundationを インポートする インポート出来たらSamplesの中にあるGeospatialSampleをインポートする

Geospatial API導入(4/4) Project SettingsのARCore Extensionsの設定画面で iOS Support Enabled, Geospatialの有効化 先ほど作成したAPIキーの設定を行う

サンプルシーンをビルドすると タッチした場所にかなり正確にアンカーを置くことができる

都市AR作成(1/7) 作成したPLATEAUモデルの位置を参考に3Dモデルを配置し、 まとめて一つのPrefabにする 配置が完了したらPLATEAUモデルは非表示にしておく ※ARオクルージョンで使えるのでPLATEAUモデルは削除せずに残すとよい

都市AR作成(2/7) サンプルシーンで不要な処理やUIをコメントアウトしてから GeospatialController.csに先ほど作成した都市ARモデルPrefabを 現実世界に表示するための処理を追加する public void ShowModel() { if (createModelObj == null) { var anchor = AnchorManager.AddAnchor(latitude, longitude, altitude, quaternion); Instantiate(createModelPrefab, anchor.transform); } } 緯度 経度 高度 モデルの Rotation Finished localization (カメラ位置情報検出完了)の タイミングくらいで表示させる

都市AR作成(3/7) 緯度と経度はGoogleMapでPrefabの原点位置のリアル緯度、経度を 設定する ※double型で設定すること！ 　floatだと桁落ちが発生し、 　1km位置がずれることが 　あります...

都市AR作成(4/7) 高度は現地でサンプルシーンを動かして表示される値を使うのが確実 もしくはジオイド高+標高で計算する ARCore Geospatial APIハンズオン by AR Fukuokaのスライドで丁寧な説明が されているので詳細はこちらをご覧ください https://www.docswell.com/s/Tks_Yoshinaga/ Z86Q2K-geospatial-api#p201

都市AR作成(5/7) 都市ARのオクルージョンは以下2つに分けて考えます ①自分の体が前に来て3Dモデルが 隠れるオクルージョン ②現実の建物が前に来て3Dモデルが 隠れるオクルージョン ①はAR FoundationのAR Occlusion Managerで 実現可能です。 ②はAR Occlusion Managerで実現不可のため、 シェーダーで実現させます。 手や建物が 映り込んだら その部分を遮蔽して 描画する

都市AR作成(6/7) ①自分の体が前に来て3Dモデルが隠れるオクルージョン AR用のカメラに以下設定でAR Occlusion Managerを追加すればOKです

都市AR作成(7/7) ②現実の建物が前に来て3Dモデルが隠れるオクルージョン 建物オクルージョン用のシェーダーを作成し、 PLATEAUモデルのマテリアルに設定、表示する Shader "Stealth" { SubShader { Tags { "RenderType"="Opaque" "Queue"="Geometry-1"} Pass { ColorMask 0 CGPROGRAM #pragma vertex vert #pragma fragment frag struct appdata { float4 vertex : POSITION; }; struct v2f { float4 pos : SV_POSITION; }; v2f vert(appdata v) { v2f o; o.pos = UnityObjectToClipPos(v.vertex); return o; } half4 frag(v2f i) : COLOR { return half4(0, 0, 0, 0); } ENDCG } } } シェーダーの詳細については KENTOさんの下記記事をご覧ください https://zenn.dev/kento_o/articles/a55d8d0e 8651d6

No content

ご清聴ありがとうございました！ 新宿にあるNEUUで体験できるので よければ遊びに来てください