Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

CA.unity #6

41 h0 -シホ- (‪41h0‬)

January 25, 2023
Tweet

More Decks by 41 h0 -シホ- (‪41h0‬)

Other Decks in Technology

Transcript

  1. 都市ARの作り方
    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