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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  9. 実際にやってみた
    (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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  16. PLATEAUのモデルを生成する(4/4)
    選択した範囲のモデルが生成されます!

    このまま使うと
    裏でスクリプトが走り、
    シーン開くたびに
    結構待つので
    FBX Exporterとかで
    FBXにして
    再インポートして
    使うとよい
    テクスチャが
    剥がれますが、
    都市ARでは
    使わないので問題なし

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  19. 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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  23. 都市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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. 都市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 full-size slide

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

    View full-size slide