都市ARの作り方 PLATEAU ✖︎ Geospatial API

CA.unity #6

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

5. どうやって作ったか？
   

   View Slide

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

   View Slide

7. View Slide

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

   View Slide

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

   View Slide

10. 実際にやってみた
    (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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

20. 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をインポートする
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

24. 都市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
    (カメラ位置情報検出完了)の
    タイミングくらいで表示させる
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

29. 都市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
    

    View Slide

30. View Slide

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

    View Slide