3D都市モデル(PLATEAU)のデータを使ってやってみたこと。

概要

国土交通省主導の、都市の3Dデータをオープンデータとして公開するプロジェクト「PLATEAU

東京以外の都市でも公開されたデータが増えてきて、いろいろと遊べるようになってきました。

私はDeck.glというWebGLベースの3D表現に長けた地図ライブラリをよく使っているのですが、日本ではなかなか建物の3Dデータを手に入れるのはコストが高かったため、ちょっとした思いつきを試してみるのもハードルが高かったのですが、PLATEAUのおかげで思いついたアイデアを色々と試すことができるようになったので、とてもありがたく思ってます。

そこでここ最近、いろいろ試してみたことを一通りのせてみました。

PLATEAUのデータを使ってできることの一部ではありますが、「3D都市データがあると、こんなことができるんだな」という参考になればさいわいです。

CityGMLや3D-tileなど今まで触ったことのないデータを扱うため、試行錯誤の最中のものになりますが文中の「View Code」のリンクからサンプルコードが確認できます。

実験的に作っているものばかりで結構重かったりするので、サンプルコード(CodeSandbox)に飛ぶ際は気をつけてください。できればグラボの載ったPCで観てもらうのが安全かと思います。

主観視点

View code

deck.glにはデフォルトのMapVIewの他にFirstPersonViewという一人称視点のViewがあります。

これを使うとカメラの動作が主観視点(FPSゲームのカメラのような動き)になります。

以前からこのViewをなんか活用してみたいと思っていたのですが、そもそも3Dデータを手に入れるのが大変だったので保留していました。

今後はいろいろと思いつきを試せるので期待しています。

3Dベクトルタイル

VIew code

CityGMLというデータは他のフォーマットに変換して使うのが前提となっているところがあって、データの取り扱いになれていないと既存の地図ライブラリに取り込んで使うのが難しかったります。

そんな中、インディゴ株式会社さんが東京都全域のCityGMLをMVT(Mapbox Vector Tile)フォーマットに変換したデータを公開してくださいました。

3D都市モデル(Project PLATEAU)東京都23区(Building-MVT 2020年度) – データセット

ありがたい!

ベクトルタイルの説明を始めると長くなるのでやめますが、MVTだとMapbox.glやDeck.glなどwebGLベースの地図ライブラリの多くが対応しているので変換処理などを行わなくてもデータを活用することができます。(上記は、Deck.glのMVTLayerで表示したサンプルです)

高さ計測

View Code

スライダーを動がして〇〇m以上のビルが可視化できる地図です。

ソースコードを観てもらればわかるのですが、前述のベクトルタイルを読み込むサンプルに数行コードを足しただけです。

具体的には東京都全域を括るポリゴン(GeoJSON)を作って、その高さを可変させています。

ツイートにも書いたとおり、あくまで目安でしかわかりませんが、結構面白かったりします。

ボクセル

Aerialod

以前、Facebookでこんなことをつぶやいていたのですが、この「海外でみつけたおもしろそうなツール」というのがAerialodでした。

ボクセルエディターとして有名なMagicaVoxelの作者さんが開発したアプリケーションで、サンプルに掲載されていた建物データを用いたボクセル化をやってみたかったのですが、当時はDSMという建物の高さを含む日本のデータを手に入れる事ができなかったため断念してました。

今回はDSMではないですが、PLATEAUが公開しているCityGMLを高さを色で表現した画像へと変換することでAerialod使ってボクセル化出来たので、これからいろいろ遊べそうな気がしています。

スタイル

View code

現実的な問題としてすべての3D Web地図は「Google Earth(Google Maps 3D)と比較されるよね」という運命にあったりします。

リアルに寄せていく方向では勝ち目がないので、それ以外の方向性を模索する必要があります。

CityGMLというフォーマットにはLOD(Level of Detail)という3Dモデルの精度を段階的に表す規格があるのですが、PLATEAUではLOD0~LOD2までのデータが公開されているので「注視してもらいたい建物はLOD2のモデルを使い、それ以外はLOD1のモデルを使う」といった緩急をつけられるので、とにかくリアルな風景に近づけていくのとは別の表現を試してみるのも面白いかもしれません。

上記のサンプルは、「東京タワー」だけテクスチャー有りの3D-tileデータを使いそれ以外の建物ポリゴンは、属性データに高さを持ったGeoJSONを平面から押し出して立体化したポリゴンで表現しています。

こういったことが気軽に試せるようになったのも、ほんとありがたいですね。

まとめ

個人では高価でなかなか手に入れづらかった建物の3Dデータが手に入るようになったのはホント良い時代になったものだなーと思います。

PLATEAUでは、CItyGMLの他にもFBXなどのフォーマットで3Dデータが公開されているので、ぜひ利用してみてください。