PLATEAU の3D 都市モデル(3D Tiles)をシーンレイヤー(I3S)に変換を試してみました

はじめに

ArcGISブログの「PLATEAU の 3D 都市モデルの活用サイトが公開されました！」でご紹介したように、国土交通省都市局が推進する 3D 都市モデル「Project PLATEAU」の、CityGML 形式のデータを変換するツール（3D 都市モデルデータ変換ツール for ArcGIS）、および変換済みの全56都市分のファイルジオデータベースを公開し、「3D 都市モデルの ArcGIS における活用事例を集めた活用サイト」から、アクセスできるようにしています。

加えて米国Esri では、2021年3月のEsri Developer Summit の「Indexed 3D Scene Layer (I3S) Support in Open Frameworks （英語）」で発表している、次のような取り組みも行っております。

1) loaders.gl や deck.gl でのI3Sのサポート

（参考: loaders.gl のI3S Loaderのサンプル、deck.gl のTile3DLayerのリファレンス）

2) 3D Tiles形式とI3S形式の相互変換ツール（Tile converter）

（参考: loaders.gl のTile converterのリファレンス）

3) Cesium.JSにおけるI3S 1.7 のサポートに向けた取り組み

（参考: cesium のGitHub のプルリクエスト）

4) pdao.io を使ったPCSL から LASへの変換

（参考: PDAL のreaders.i3s のリファレンス）

今回は上記の2) のTile converterのリファレンスや Indexed 3D Scene Layer (I3S) Support in Open Frameworks を参考にしてWindows 10の環境に環境構築を行い、3D 都市モデル（3D Tiles）の建物をシーンレイヤーパッケージ（SLPK）に変換し、ArcGIS Online に登録してシーンビューアで表示することを試してみました。

事前条件

Tile converter を使う場合、次の３つが必要になります。

Node.js
GeographicLib で楕円体から重力補正したフォーマットへの計算時に利用するジオイドデータセット（*.pgmファイル）
アーカイバ（Windows の場合は7-zip）。

※2. は下記の環境構築に記載の npx tile-converter --install-dependencies 時に、デフォルトで使用する"egm2008-5.pgm"がインストールされます。デフォルト以外のファイルを利用する場合は、 GeographicLib から自分で取得して配置し、オプションで指定することが可能です。

※3. はデフォルトパス（C:\Program Files\7-Zip\7z.exe）以外にインストールしている場合、オプションで指定することが可能です。

環境構築

a) フォルダーの作成と移動

コマンドプロンプトを起動し、Tile converter をインストールするフォルダーを作成し、ディレクトリを移動します（今回の例では[tile_converter] というフォルダを作成し、移動しています）。

mkdir tile_converter

cd tile_converter

b) インストール

次にTile Converterをインストールします。

npm i @loaders.gl/tile-converter

c) デフォルトのジオイドデータセットのインストール

最後にデフォルトのジオイドデータセットをインストールします（deps フォルダー下に"egm2008-5.pgm"ファイルがインストールされます）。

npx tile-converter --install-dependencies

以上で環境構築は完了ですので、実際にデータを入手して変換を行います。

3D TilesからI3S への変換

今回は、G空間情報センターの3D都市モデルポータルサイトから八王子市の3D Tilesが入ったデータをダウンロードし変換してみます。

ダウンロードしたzipファイルを解凍後、”13201_hachioji-shi_building”のデータを、Tile converterのリファレンスを参考にしながら、次のようなコマンドで変換しました。

npx tile-converter --input-type 3DTILES --tileset ./13201_hachioji-shi_3DTiles_GeoPackage_Json/01_building/13201_hachioji-shi_building/13201_hachioji/tileset.json --name 13201_hachioji-shi_building_3dtiles --output ./output --slpk

結果として、output フォルダーの下に"13201_hachioji-shi_building_3dtiles.slpk" という、シーンレイヤーパッケージが出来上がります。

ここまで出来ると、後はArcGIS Pro でシーンレイヤーパッケージ（slpk）を直接読み込んで表示するか、ArcGIS Enterprise / ArcGIS Online に登録して、シーンビューアで確認するかです。

今回は、クレジットの心配が少ない有償のArcGIS Developer Subscriptionで利用可能なArcGIS Onlineの組織サイト（開発およびテスト用途限定）に登録し、シーンビューアで見てみます。※開発およびテスト用途限定ですが、操作は通常のArcGIS Online と全く変わりません。

TIPS-A!： ArcGIS Pro でシーンレイヤーパッケージ（slpk）を直接読み込む場合でも、ファイルジオデータベース内のフィーチャクラスを読み込む場合に比較して、高速に描画されます。

ホストシーンレイヤーの公開

ArcGIS Online にログイン後、コンテンツページの[マイコンテンツ]タブから、 [新しいアイテム] をクリックします。

[お使いのデバイス] をクリックしてデバイスからファイルを選択で、変換した"13201_hachioji-shi_building_3dtiles.slpk" を選択します。

画面に表示される追加する方法として、下の画面のように"13201_hachioji-shi_building_3dtiles.slpk を追加してホストシーンレイヤーを作成" を選択し、[次へ] をクリックします。

必要に応じてタイトル、フォルダーを変更します。また、必要に応じてタグ、サマリーを入力し、[保存] をクリックします。

上記までの操作によって、ArcGIS Online へのアイテム登録とシーンレイヤーの作成が開始されます。

シーンレイヤーの作成までが終了すると、[シーンビューアで開く] がアクティブな状態になり、シーンビューアで操作することが可能です。

シーンビューアで試す

[シーンビューアで開く]をクリックし操作してみました。一見よさそうだったのですが、どうも建物がないところが。。。

確認のため、「3D 都市モデルの ArcGIS における活用事例を集めた活用サイト」で公開しているファイルジオデータベースを利用し、八王子市のlod1_Building, lod2_Building のそれぞれのフィーチャクラスからシーンレイヤーパッケージ（SLPK）を作成し、同様にホストシーンレイヤーを公開して、シーンビューアに追加して見てみました。

TIPS-B！：シーンレイヤーパッケージ（SLPK）の作成には、ArcGIS Pro の[3D オブジェクトシーンレイヤーパッケージの作成 (Create 3D Object Scene Layer Package) ] のジオプロセシングツールを利用します。詳細な操作方法は、ArcGIS ProのHelpの"3D オブジェクトシーンレイヤーパッケージの作成 (Create 3D Object Scene Layer Package) (データ管理)"をご参照ください。

TIPS-C！：編集可能なWeb レイヤーとしての利用や、フィーチャクラスに設定してあるコード値ドメインをそのまま使いたい場合は、ArcGIS Pro のシーンに、それぞれlod1_Building, lod2_Building のフィーチャクラスを追加後、[コンテンツ] ウィンドウで 3D レイヤーを右クリックし、[共有] をポイントして [Web レイヤーとして共有] で、公開する必要があります。詳細な操作方法は、ArcGIS Pro のHelpの”関連するフィーチャレイヤーを含むシーンレイヤーの編集”をご参照ください。

黒で表示されるのが、今回、Tile Converterで変換した建物で、やはり、一部の建物の変換が上手くいっていないものがあるようです。

図 - シーンレイヤーパッケージの作成方法の違いによるシーンレイヤーの比較

まとめ

シーンレイヤーパッケージ（SLPK）の作成は、通常だとArcGIS Pro の[3D オブジェクトシーンレイヤーパッケージの作成 (Create 3D Object Scene Layer Package) ]のジオプロセシングツールを使って作成するのが一般的なワークフローです。

ですが、今回の記事ではあえてオープンソースのTile converter を使って3D Tiles からSLPK に変換して試してみました。変換されたデータの結果はまだまだな部分がありますが、それは今後の開発に期待したいと思います。

国土交通省都市局が推進する 3D 都市モデル「Project PLATEAU」の取り組みにより、今までより簡単に3Dデータが入手できるようになりました。

ArcGIS ではArcGIS Pro, ArcGIS Enterprise / ArcGIS Online の製品をはじめ、3Dに対応した各種APIが揃っており、さらにUnreal Engine / Unity に対応したSDKのリリースへの準備も進んでいます。

これを機会に、ArcGIS 製品を活用して3D GISの世界への準備を始めてみてはいかがでしょうか？

おまけ：ArcGIS API for JavaScript で試すには？

ArcGIS API for JavaScript での動作確認は、Intro to SceneLayer のSample Code を使うと、次のように元のサンプルから2箇所を変更することで、すぐに動作確認が可能です。

<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>Intro to SceneLayer | Sample | ArcGIS API for JavaScript 4.21</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }
    </style>

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.21/"></script>

    <script>
      require(["esri/Map", "esri/views/SceneView", "esri/layers/SceneLayer"], (
        Map,
        SceneView,
        SceneLayer
      ) => {
        // Create Map
        const map = new Map({
          basemap: "topo-vector", //"dark-gray-vector",
          ground: "world-elevation"
        });

        // Create the SceneView
　　　　　// サンプルからの変更-その1
        const view = new SceneView({
          container: "viewDiv",
          map: map,
          camera: {
            // position: [-74.0338, 40.6913, 707],
            // tilt: 81,
            // heading: 50
            position: [139.375, 35.59, 5000],
            tilt: 30,
            heading: 10
          }
        });

        // Create SceneLayer and add to the map
		　　// サンプルからの変更-その2
        /* 
        開発用のArcGIS OnlineにホストしたシーンレイヤーのアイテムID
        a) 3D TilesからSLPKに返還してシーンレイヤーにしたもの
             id: "691330dc93e34bfdb48f2432b57e3798"
        b) フィーチャクラス（lod1_Building）からSLPKを作成してシーンレイヤーにしたもの
             id: "3addcce0f74f475187b8ae95bd73c3e3"
        c) フィーチャクラス（lod2_Building）からSLPKを作成してシーンレイヤーにしたもの
             id: "9905b40c966448b89f530efa9cb75578"
        */
        const sceneLayer = new SceneLayer({
          portalItem: {
            //id: "2e0761b9a4274b8db52c4bf34356911e"
            id: "691330dc93e34bfdb48f2432b57e3798"
          },
          popupEnabled: true //false
        });
        
        map.add(sceneLayer);

        // Create MeshSymbol3D for symbolizing SceneLayer
        const symbol = {
          type: "mesh-3d", // autocasts as new MeshSymbol3D()
          symbolLayers: [
            {
              type: "fill", // autocasts as new FillSymbol3DLayer()
              // If the value of material is not assigned, the default color will be grey
              material: {
                color: [244, 247, 134]
              }
            }
          ]
        };
        // Add the renderer to sceneLayer
        sceneLayer.renderer = {
          type: "simple", // autocasts as new SimpleRenderer()
          symbol: symbol
        };
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

おまけ：I3S Loader での表示

別の確認手段として、GitHub のI3S Loader のサンプルをもとに、同じシーンレイヤーを表示してみました。こちらもやはり、一部の建物の変換が上手くいっていないものがあることがわかります。

図 - loaders.gl のI3S Loader でのシーンレイヤーの表示例

PLATEAU の3D 都市モデル(3D Tiles)をシーンレイヤー(I3S)に変換を試してみました