Cesium と 3D Tiles について（1）

## はじめに 🤗 
本エントリーは [FOSS4G Advent Calendar 2018 22日目](https://qiita.com/advent-calendar/2018/foss4g)のエントリーです。

現在は、[株式会社オプティム](https://www.optim.co.jp/)で、[LANDLOG](https://www.landlog.info/) のプロジェクトに携っています。会社としては、AI、IoT のプラットフォームの開発に力を入れて取り組んでいます。
最近、地形のニーズが多いこともあって、色々と調査もしていましたので、今回は Cesium について共有したいと思います。

[Cesium と 3D Tiles について（2）](https://qiita.com/ValueCreation/items/29adfad2d2720af2a79b)について書きました。こちらもよろしければ参考にしてください。　

## Cesium について

ご存知の方も多いかと思いますが、[Cesium](https://cesiumjs.org/) は、3D のビューワーエンジンです。
GIS のアプリを開発する上で必要な機能は備えており、さらに WMS や WMTS などの OGC の標準フォーマットや Esri の[マップサービス](http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer)など多くのデータフォーマットに対応しています。

３D ビューワーの場合は、３D データの扱いが課題になってきます。たとえば、ドローンで撮影した点群データなどのデータをビューワーで表示したい、また、データが大きいため、ブラウザで表示する場合はパフォーマンスなども影響していきます。それらの課題を解決する手法として、３D データの扱いとして、Cesium では 3D Tiles という仕様を採用しています。今回は、Cesium で ３D データを扱う場合の方法や 3D Tiles の仕様について説明します。

## 3D Tiles について

[3D Tiles](https://cesium.com/3d-tiling-pipeline/) は、写真測量、3D Buildings、BIM/CAD、Instanced Features、Point Clouds　などの 3D 地理空間コンテンツをストリーミングおよびレンダリングするために設計されており、空間データの構造とタイルフォーマットを定義しています。[OGC](https://cesium.com/blog/2016/09/06/3d-tiles-and-the-ogc/) にも採用されています。

[3D Tiles](https://cesium.com/3d-tiling-pipeline/) の詳細な仕様は[こちら](https://github.com/AnalyticalGraphicsInc/3d-tiles/tree/master/specification)から確認することができます。 

3D の地理空間データとして、地形データ、建物のデータ、CAD （または BIM） モデル、写真測量のモデル、ポイントクラウドなどのデータを 3D Tiles に変換します。変換された 3D Tiles は、軽量でかつ最適化されているため、サイズが大きい 3D データでもストレスなく Web で配信することが可能となります。
例えば、4.48 GB の LAS ファイルは、0.64 GB まで圧縮されると公式のサイトでも紹介されていました。

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

面白いのは、この 3D Tiles で使用されている技術です。

3D モデルやシーンを表現するフォーマットとして、[glTF (GL Transmission Format)](https://ja.wikipedia.org/wiki/GlTF)、また、Google が開発した [Draco](https://github.com/google/draco) というオープンソースの 3D データ圧縮ライブラリが使用されています。

Cesium の[ブログ](https://cesium.com/blog/2018/04/09/draco-compression/)でも紹介されていますが、Cesium では、Draco を glTF に拡張して、Draco 圧縮モデルと 3D タイルセットを Cesium で扱うことができます。

以下は　Cesium の[ブログ](https://cesium.com/blog/2018/04/09/draco-compression/)でも紹介されていましたが、Draco 圧縮を使用したことでレンダリングが早くなっていることが分かるかと思います。

| glTF 2.0　（gzipped）　| Draco　圧縮を使用した　glTF 2.0　（gzipped） | 
|------------------|-------------------|
| <img width="500" src="https://cesium.com/blog/images/draco/gltf-2.0.gif">            | <img width="500" src="https://cesium.com/blog/images/draco/gltf-2.0-draco.gif"> |
|タイルサイズ：738 MB　|タイルサイズ：149 MB | 
|ロード時間：18.921秒　|ロード時間：10.548秒 | 
※ *画像はデモ用のため 2 倍速になっています。* 

## CESIUM ion について

こちらの 3D Tiles のサービスを使用する場合は、[CESIUM ion](https://cesium.com/ion/) という Cesium が提供している ３D プラットフォームに登録して使用することができます。また、[オンプレス](https://cesium.com/docs/on-prem/tilers/point-cloud/
)でこれらのサービスも使用することができますが、Cesium とのビジネス上の契約が必要になるそうです。

[CESIUM ion](https://cesium.com/ion/) の詳細については、Cesium の[ブログ](https://cesium.com/blog/2018/03/01/hello-cesium-ion/)でも紹介されていますのでご参照下さい。

CESIUM ion では、以下のように LAS データなどの 3D コンテンツを登録することできます。データストレージに応じて料金が変ってきます。５GB まではフリーとなっています。
<img width="1244" src="https://qiita-image-store.s3.amazonaws.com/0/102251/42d4ee0d-b98e-ca46-621b-30b39315912f.png">
登録した ３D コンテンツは、3D Tiles として以下のコードで呼ぶことができます。

```
var tileset = viewer.scene.primitives.add(
    new Cesium.Cesium3DTileset({
        url: Cesium.IonResource.fromAssetId(12572)
    })
);
```

CESIUM ion で登録したサンプルの LAS データを Cesium で表示してみました。[こちら](https://cesiumjs.org/Cesium/Build/Apps/Sandcastle/index.html?src=Hello%20World.html&label=Showcases&code=eyJjb2RlIjoiLy8gR3JhbnQgQ2VzaXVtSlMgYWNjZXNzIHRvIHlvdXIgaW9uIGFzc2V0c1xuQ2VzaXVtLklvbi5kZWZhdWx0QWNjZXNzVG9rZW4gPSAnZXlKaGJHY2lPaUpJVXpJMU5pSXNJblI1Y0NJNklrcFhWQ0o5LmV5SnFkR2tpT2lJMk1UWXhNR1l3WmkwM09UWTNMVFF6TVRNdE9HTTROeTAwWVRFMFlUUTRaalZqTVRFaUxDSnBaQ0k2TlRjNU5Dd2ljMk52Y0dWeklqcGJJbUZ6Y2lJc0ltZGpJbDBzSW1saGRDSTZNVFUwTkRFNE9USTVPSDAuSGhndVZSalVuSU9iekpseGpwRF9hVkxNRHdOUy1KR2RlRUVkaXhwWmZPVSc7XG5cbnZhciB2aWV3ZXIgPSBuZXcgQ2VzaXVtLlZpZXdlcignY2VzaXVtQ29udGFpbmVyJyk7XG5cbnZhciB0aWxlc2V0ID0gdmlld2VyLnNjZW5lLnByaW1pdGl2ZXMuYWRkKFxuICAgIG5ldyBDZXNpdW0uQ2VzaXVtM0RUaWxlc2V0KHtcbiAgICAgICAgdXJsOiBDZXNpdW0uSW9uUmVzb3VyY2UuZnJvbUFzc2V0SWQoMTI1NzMpLFxuICAgICAgICAvL1RoaXMgdGlsZXNldCBkb2Vzbid0IGhhdmUgYSBsb2NhdGlvbiwgc28gd2UncmUgdXNpbmcgYSBtb2RlbE1hdHJpeCB0byBwbGFjZSBpdCBhdCAwLCAwIGluc3RlYWQgb2YgZHJhd2luZyBhdCB0aGUgY2VudGVyIG9mIHRoZSBlYXJ0aFxuICAgICAgICBtb2RlbE1hdHJpeDogQ2VzaXVtLlRyYW5zZm9ybXMuZWFzdE5vcnRoVXBUb0ZpeGVkRnJhbWUoQ2VzaXVtLkNhcnRlc2lhbjMuZnJvbURlZ3JlZXMoMCwgMCkpXG4gICAgfSlcbik7XG5cbnZpZXdlci56b29tVG8odGlsZXNldClcbiAgICAub3RoZXJ3aXNlKGZ1bmN0aW9uIChlcnJvcikge1xuICAgICAgICBjb25zb2xlLmxvZyhlcnJvcik7XG4gICAgfSk7XG4iLCJodG1sIjoiPHN0eWxlPlxuICAgIEBpbXBvcnQgdXJsKC4uL3RlbXBsYXRlcy9idWNrZXQuY3NzKTtcbjwvc3R5bGU+XG48ZGl2IGlkPVwiY2VzaXVtQ29udGFpbmVyXCIgY2xhc3M9XCJmdWxsU2l6ZVwiPjwvZGl2PlxuPGRpdiBpZD1cImxvYWRpbmdPdmVybGF5XCI+XG4gICAgPGgxPkxvYWRpbmcuLi48L2gxPlxuPC9kaXY+XG48ZGl2IGlkPVwidG9vbGJhclwiPjwvZGl2PlxuIn0=)から確認することができます。

## 最後に

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

Cesium についてもまだまだ知らないことが多いので、また何かの機会にでも取り上げていきたいと思います。