Cesium と 3D Tiles について（２） #JavaScript

はじめに

昨年度の FOSS4G Advent Calendar 2018 22日目で、Cesium と 3D Tiles について紹介しました。また、社内のテックリード会でも同様の内容で紹介しましたので、紹介できる内容に絞って、情報を共有したいと思います。地味にいいね！があるので参考になれば幸いです。

Cesium について

Cesium は、3D のビューワーエンジンで、Cesium js と Cesium ion で構成されています。

Cesium JS
- Web 上の 3D マップ用の JavaScript ライブラリ
Cesium ion
- ストリーミング用に3D データをタイリングし、配信するためのサービス

3D データは Cesium ion にてストリーミング用に最適化され、Cesium JS で可視化されます。

3D データについて

3D Viewer の場合は、3D データの扱いが課題になる場合があるかと思います。
例えばドローンで撮影した点群データなどのデータを表示したい。データが大きい場合、ブラウザで表示する場合はパフォーマンスなども影響するといった問題があるかと思います。

それらの課題を解決する手法として、3D データを扱う場合には、Cesium では 3D Tiles、imagery、Terrain という技術を採用しています。

具体的には、以下のファイルを 3D Tiles としてサポートしています。

glTF (.gltf, .glb)
CityGML (.citygml, .xml, .gml)
KML/COLLADA (.kml, .kmz)
LASer (.las, .laz)
COLLADA (.dae)
Wavefront OBJ (.obj)

1. Cesium がサポートしているファイルと描画機構

2. Cesium がサポートしているサービス群

3D Tiles について

3D Tiles は、写真測量、3D Buildings、BIM/CAD、Point Clouds などの 3D 地理空間コンテンツをストリーミングおよびレンダリングするために設計されており、空間データの構造とタイルフォーマットを定義しています。
- https://github.com/AnalyticalGraphicsInc/3d-tiles
- OGC (Open Geospatial Consortium) にも採用
- OGC は、500以上の機関で、地理空間のコンテンツとサービス、センサーWebとIoT、GISデータ処理、データ共有に関する標準規格の開発と実装を行っています。
3D の地理空間データとして、地形データ、建物データ、CAD （または BIM）モデル、写真測量のモデル、ポイントクラウドなどのデータを 3D Tiles に変換します。
- 変換された 3D Tiles は、軽量でかつ最適化されているため、サイズが大きい 3D データでもストレスなく Web で配信することが可能です。
- 例えば、4.48 GB の LAS ファイルは、0.64 GB まで圧縮されると公式のサイトでも紹介されています。

3D Tiles の仕様

3D Tile は、空間データの構造を持ったバイナリデータと JSON ファイルの２つのタイルセットで構成されています。
タイルセットでは、メタデータとタイルオブジェクトの情報をタイルセットとして、JSON ファイルに記述されています。
次のいずれかの形式でレンダリングが可能なコンテンツとして配信が可能です。

フォーマット	用途
Batched 3D Model (b3dm)	Heterogeneous 3D models. テクスチャ化された地形や表面、3D 建物の外部と内、大規模なモデルなど
Instanced 3D Model (i3dm)	3D model instances. 木、風車、ボルト
Point Cloud (pnts)	大量の点群データ
Composite (cmpt)	異なる形式のタイルを1つのタイルに連結

個々のタイルは、Feature Table や Batch Table などの形式固有のコンポーネントを持つ binary blob.
コンテンツは、建物や樹木を表す 3Dモデル、点群内のポイントなど、一連の機能を参照。各フィーチャには、タイルの Feature Table に格納している位置と外観のプロパティがあり、Batch Tableに保存されているアプリケーション固有のプロパティがある。
クライアントは、実行時に各機能を選択し、可視化または分析のためにプロパティを取得することができる。
Batched 3D Model および Instanced 3D Model 形式は、3D コンテンツの効率的な伝送のために設計されたオープンな仕様である glTF に基づいて構築されている。
これらの形式のタイルコンテンツは、バイナリボディにジオメトリとテクスチャ情報を含む glTF が埋め込まれている。

3D Tiles の仕様：https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification

glTF について
https://www.khronos.org/gltf/

-	-	-
3Dモデル対応	Khronos Group による Web 上の3D モデルの業界標準フォーマットである glTF に対応	glTF (The GL Transmission Format)とは、OpenGL系のAPI (WebGL, OpenGL ES, OpenGL) と親和性の高い、ランタイム用途向けのアセットフォーマット ※glTFファイル（.gltf）、バイナリのglTFファイル（.glb）の直接参照が可能

3D Tiles で使用されている技術

3D コンテンツを表現するフォーマットとして、glTF (GL Transmission Format)、また、Google が開発した Draco というオープンソースの 3D データ圧縮ライブラリを使用。
Cesium では、Draco を glTF に拡張して、Draco 圧縮モデルと 3D タイルセットを Cesium で扱うことが可能
以下は　Cesium のブログでも紹介されていましたが、Draco 圧縮を使用したことでレンダリングが早くなっていることが分かるかと思います。

glTF 2.0　（gzipped）	Draco　圧縮を使用した　glTF 2.0　（gzipped）

タイルサイズ：738 MB	タイルサイズ：149 MB
ロード時間：18.921秒	ロード時間：10.548秒

※ 画像はデモ用のため 2 倍速になっています。

3D Tiles の表示例

3D Tiles のデータセット（点群データ）
- pointCloudDraco.pnts
- tileset.json

Cesiumでの 3D Tile のロードは、次のようになります。

var viewer = new Cesium.Viewer('cesiumContainer’); 

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ 
    url : 'http://localhost:8003/tilesets/pointCloud/tileset.json’ 
      })); 

viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0, -0.5, 0));

CESIUM ion について

こちらの 3D Tiles のサービスを使用する場合は、CESIUM ion という Cesium が提供している 3D プラットフォームに登録して使用することができます。また、オンプレスでこれらのサービスも使用することができますが、Cesium とのビジネス上の契約が必要になるそうです。
Cesium ion の構成を以下に示します。

asset.cesium.com
- ユーザーがアップロードしたデータを保存し、3D タイルセット、画像、地形、glTF、KML、および CZML（これらをまとめてアセットと呼びます）を提供する。
api.cesium.com
- ion REST API。アカウントやアセット管理に使用される。3D Tiling を開始し、ジオコーディング、サーバーベースの分析、およびユーザーが 3Dマッピングアプリケーションを作成するために必要ものを提供する。
cesium.com
- 3Dコンテンツのアップロードと管理、Cesium World Terrain などのコンテンツへのアクセス、および（最終的に）インタラクティブな地図作成と地理空間分析を実行するためのシングルページアプリケーション（SPA）

CESIUM ion の詳細については、Cesium のブログでも紹介されていますのでご参照下さい。

最後に

Cesium では、3D 地理空間コンテンツの仕様として、３D Tiles が採用されていますが、Esri では、i3s という仕様があります。こちらも３D Tiles と同様に 3D コンテンツに特化しており、OGC にも採用されています。私が知る限り、両者を明確に比べたものは今のところないように思えます。
今後 3D コンテンツの扱いがますます重要になってくると思いますので、このあたりの技術に関してはキャッチアップしていく必要があると感じています。