[FOSS4G 2016 Hokkaido] Cesiumマニアックス

Slide 1

Slide 1 text

株式会社ノーザンシステムサービス中洞友希 Cesiumマニアックス FOSS4G 2016 Hokkaido

Slide 2

Slide 2 text

自己紹介氏名：中洞友希会社：(株)ノーザンシステムサービス入社4年目地図やドローンを使ったりした可視化の研究開発をしています。色々面白いものを置いてあるので、興味がある方は是非当社までお越しください！

Slide 3

Slide 3 text

はじめに FOSS4G 2015 Hokkaidoでの発表後、 Cesiumを使った案件のお仕事を頂く機会が増えました。そこで本日は恩返しとして得た知見をアウトプットし、Cesiumの良さを知って頂こうと思います！

Slide 4

Slide 4 text

サーバーサイドではなく Cesiumのみで小地域の地物を大量に表示したい！こんな要望がありました。 ※小地域・・・政府が国勢調査で調査する地物の最小単位

Slide 5

Slide 5 text

OpenLayers等の2Dの地図ライブラリで大量の地物を表示しようとしたところ重すぎてOSごと落ちてしまった Cesiumは上記のライブラリと異なり WebGLを使用しているため、簡単に実現できると思っていた。 ( ・∀・)ﾉ楽勝だべしかし！

Slide 6

Slide 6 text

Entityという地物を表示するAPIで読み込もうとしようとしたところ・・・ここからCesiumとの戦いが始まります。

Slide 7

Slide 7 text

作戦１ Primitiveで表示してみる PrimitiveはCesiumで地物を表示するAPI。 Entityよりも軽量に動作するそうだが・・重すぎて落ちる

Slide 8

Slide 8 text

作戦２ D3.jsでSVG地図を作成して張り付けてみる D3.jsでSVGの地図を作成し、Cesiumのイメージレイヤーで地図上に描画する解像度が悪く、ズームすると見た目が悪い

Slide 9

Slide 9 text

作戦３小地域の画像を1つ1つ作成して張り付ける Mapnikで小地域の画像を1つ1つ作成し、地図上に張り付ける重すぎて落ちる

Slide 10

Slide 10 text

500m間隔でポイントをグリッド状に作成し地図上に表示グリッドポイントの計算が遅すぎる作戦４グリッドポイントで地物を表現する

Slide 11

Slide 11 text

しかし今回はクライアント側で完結する処理を追求したい。色々探してみると・・なんと希望の光が！！サーバーを使わないでって言ったけどあらかじめMapnikでタイルを作成しておいて、それを表示するのが一番手っ取り早いのかも・・・

Slide 12

Slide 12 text

皆さんお馴染み藤村さんのQiitaで発見！とりあえず実施せずにキープしておくべき調査・開発作業 (http://qiita.com/handygeospatial/ items/8f18d309a96ae7faf8c0) geojson-vt

Slide 13

Slide 13 text

geojson-vtはWebブラウザでGeoJSONを読み込み、タイルにしてくれるライブラリ。 Web Workerと Chrome 64bit を使用し、 geojson-vtで GeoJSONを読み込み canvasでタイルを表示する表示出来た！！！

Slide 14

Slide 14 text

Web Workerとは並列処理が出来るHTML5の機能。 JavaScriptの重い処理を並行して実行することでレスポンスが改善できる。 Chrome 64bitを使った理由 64bit版はChromeのメモリのリミッターが解除され、制限無くメモリを使うことができる。そのため重い処理をしてもフリーズしたり落ちることは無くなった。

Slide 15

Slide 15 text

無事にタイルで表示出来たけど地物のクリックが出来ない。 Entityで表示できない原因として地物の頂点数の多さが問題なのか？地物を簡素化して頂点数を減らせば表示できるかも？

Slide 16

Slide 16 text

地物の簡素化にはPostGISのトポロジを使用する。トポロジ処理した地物を再びEntityで表示してみるトポロジについてはyellow_73さんの記事が大変参考になります。 (http://d.hatena.ne.jp/yellow_73/20120323) 表示出来た！！

Slide 17

Slide 17 text

【メリット】・Webブラウザ上でお手軽にタイルを作成できる【デメリット】・選択＆アニメーションができない【メリット】・選択＆アニメーションができる【デメリット】・大量のデータを表示する時はトポロジ化が必須でちょっと手間がかかるサーバーを使わずCesiumで大量の地物を表示するのに適した方法は２つ！ geojson-vt Entity

Slide 18

Slide 18 text

Cesium上で北海道の小地域を表示するデモ geojson-vt ver https://www.youtube.com/watch?v=7CyfJDY1lEY&feature=youtu.be Entity ver https://www.youtube.com/watch?v=BSVwcL3PRv8&feature=youtu.be

Slide 19

Slide 19 text

Cesiumの地形データが重い。もっと軽くならないか？一件落着。・・・と思いきや、再びこんな要望がありました。

Slide 20

Slide 20 text

Cesiumは以下の２つの地形データのフォーマットをサポートしている。・ quantized-mesh ・ heightmap ・今までheightmapを使用して地形を表示していたが、quantized-meshの方が高速で綺麗に表示できることが判明！ ← heightmap (http://www.sunshineproject.eu/document s/publications/7.%20Heterogeneous- Resolution-and-Multi-Source-Terrain- Builder%20ICVAIV%202016.pdf)

Slide 21

Slide 21 text

quantized-meshを作成できるライブラリを探してみるも、なかなか見つからない。あったとしても有償。 3d-forgeというライブラリが見つかったが、 S3を使用する前提で作成されており環境が限定されてしまうため断念。 https://github.com/ geoadmin/3d-forge

Slide 22

Slide 22 text

さらに探してみると、3d-forgeから派生したライブラリquantized-mesh-tileを発見！早速試してみる。 http://quantized-mesh-tile.readthedocs.io/en/latest/index.html

Slide 23

Slide 23 text

今回は国土地理院の標高タイルを使用する。 (http://maps.gsi.go.jp/development/demtile.html) 標高タイルから緯度経度高度を算出して quantized-mesh-tileで地形データのterrain ファイル作成する。 quantized-mesh-tile 標高タイル地形データ (.terrain)

Slide 24

Slide 24 text

terrainファイルは正常にできたが、このままでは重くてもっさりする。 Cesiumで公開している地形データは、 quantized-meshを簡素化することで高速化を図っているっぽい。簡素化前簡素化後重軽 http://blog.thematicmapping.org/2014/10/3d-terrains-with-cesium.html

Slide 25

Slide 25 text

Cesiumのquantized-meshの簡素化はマイケル・ガーランドさんの論文を参考にしているようだ。論文： https://cesiumjs.org/presentations/Rendering%20the%2 0Whole%20Wide%20World%20on%20the%20World%20 Wide%20Web.pdf

Slide 26

Slide 26 text

マイケルさんはQSlimという簡素化のライブラリを公開しているので早速試してみる。 http://mgarland.org/software/qslim21.html

Slide 27

Slide 27 text

QSlimを使用して簡素化ができた！ Before After

Slide 28

Slide 28 text

terrainを obj(smf) に変換 obj(smf)を terrainに変換全体の処理の流れ quantized-mesh-tile QSlim で簡素化標高タイル

Slide 29

Slide 29 text

簡素化したquantized-meshタイルの作成は出来たが、Cesiumで表示する部分はまだ奮闘中。もしCesiumで表示することが出来たら、国土地理院の地理院地図Globeの高速化や、ドローンやLiDARで取得した3Dデータも簡単に表示できるようになると思う。

Slide 30

Slide 30 text

追記： Cesium Terrain Generator And Server というライブラリを発見。quantized-mesh の作成および簡素化をしてくれるかも…？ソースはまだ公開されていないため、後で試してみようと思う。 https://github.com/Nymria/Cesium-Terrain-Generator-And-Server

Slide 31

Slide 31 text

観測データを時系列で 3次元表示したい！次に・・・という要望も出てまいりました。

Slide 32

Slide 32 text

今回は震源のデータ(緯度・経度・深度)を時系列アニメーションで表示してみる。震源のデータはIRISのAPIから取得する。 (http://www.iris.edu/hq/)

Slide 33

Slide 33 text

Cesiumは時系列で地物の表示/非表示を制御するAPI「Timeline 」が用意されている。このTimelineを使用するには地物をEntity で表示する必要がある。しかしこのEntityは数万ポイントしか表示できない。表示するデータはもっと多い。さあどうしよう？？

Slide 34

Slide 34 text

cesium-devにて『Entityの代わりに Point Primitive Collectionを使えばパフォーマンスが向上するよ！』 https://groups.google.com/forum/#!searchin/cesiumdev/ Memory$20leak$20advice/cesium-dev/HxDAJ96Ajnc/QSrY_zdmDgAJ

Slide 35

Slide 35 text

Point Primitive Collectionを使用してみたところ、80万ポイントを表示出来た！しかし、このPoint Primitive Collectionは時系列アニメーションに対応していない。そのため時系列アニメーションは自前で実装した。

Slide 36

Slide 36 text

それぞれのメリット・デメリット【メリット】・お手軽に時系列アニメーションができる。・ポイントのスタイルを自由にいじれる。【デメリット】・数万ポイントしか表示できない。 Point Primitive Collection 【メリット】・大量のポイントを表示できる。【デメリット】・時系列アニメーションに対応していない。・ポイントのスタイルをあまりいじれない。 Entity

Slide 37

Slide 37 text

Cesiumで3次元震源データの時系列アニメーションデモ Entity 2011年～ https://www.youtube.com/watch?v=EUKj5oG3mEk&feature=youtu.be 熊本地震 https://www.youtube.com/watch?v=vdJ_aLzykoc&feature=youtu.be Point Primitive Collection 2000年～ https://www.youtube.com/watch?v=0fJ2GEk9wCQ&feature=youtu.be 2000年～(時系列アニメーション) https://www.youtube.com/watch?v=fcdMRxyzyWY&feature=youtu.be

Slide 38

Slide 38 text

Cesiumで物理演算をしてみた噴火や洪水で河川が決壊した際にどのように流出するのか？リアルタイム物理演算がそもそもCesiumで可能なのか、またオブジェクト数はどの程度行けるのかを検証してみました。

Slide 39

Slide 39 text

・Google summer of codeのアイディアでoimo.jsとか使った物理演算とか実装出来るとクール！とか書いてあったので、現時点では物理演算機能は実装されていないようだ。・oimo.jsってそもそもなんだ？お芋？・元々はOimoPhysicsというactionscript3で実装された物理演算ライブラリをjavascriptに移植した軽量物理演算らしい。・とりあえず、物理演算だけを実装するには向いてそうなので採択。・ではこれをどうやってCesiumに組み込むか？・まず座標系を合わせなければいけない。・Cesiumではcartesian（カーテシアンと読みます。デカルト座標系＝直交座標系）という地球楕円体の中心を原点とした座標系を採用している。・oimo.js等、物理演算系は大抵直交座標なので、 cartesianで渡してやればいけそう。物理演算エンジンは何を使うか？

Slide 40

Slide 40 text

地面はどうする？・oimo.jsの地面はどうする？ここはお約束の地理院標高タイル。・標高タイルは256*256の行列なので、左上の原点を下に緯度経度標高を算出してからカーテシアン座標に変換する必要がある。・oimo.jsでは平面ポリゴンが存在しないため、球体オブジェクトを敷き詰めて地面の代わりとした。

Slide 41

Slide 41 text

レンダリングはthree.jsで・本来的にはCesiumのprimitiveを動かしてやるのが早そうだけど、試したら遅かった。・Cesiumのレンダリングではなく、 oimo.jsと相性が良いthree.js ではどうか？・幸いpotreeと言うポイントクラウド表示ライブラリでcesiumと three.jsとpotreeを組み合わせたサンプルがあったので、こちらを拡張して作ってみた。・ three.jsは基本的にレンダリング自体はCesiumより早いので大規模な点群やパーティクルなどを表示する場合は併用してもよいかもしれない。ちなみにpotreeは予めoctree化（Cesiumで言うところの3DTilesのようなもの）しておかないと使えないため、リアルタイム点群は表示できないようだ。この辺は調査中。

Slide 42

Slide 42 text

物理演算はやっぱWorkerでしょ・oimo.jsとかの物理演算等のCPUバウンド処理はworkerで別スレッドで実行させたい！Cesiumでもオブジェクト作成時などに workerで処理しているようだ。・ホントはOpenCLなど、GPUを使った並列演算をしてみたかったが実装できるブラウザが現在ないため、今回は見送る。・シェーダー言語であるGLSLを使えば簡単な演算であれば出来るらしいがマニアックになりすぎるので、今回は見送る。・oimo.jsはworker版が用意されていたのでそちらで実装してみた。・Step毎にworker版oimoで計算された位置及び回転情報をメインスレッドで受け取り、three.jsのオブジェクトに適用し、カメラ位置をCesiumと同期することで、あたかもCesiumで物理演算しているように表示することが出来た。・さしあたり2万オブジェクトくらいまでは問題なく表示できている。・メモリはバカ食いするので、64bit版のブラウザが必要かも。

Slide 43

Slide 43 text

物理演算デモ Cesium with Three.js and oimo.js https://www.youtube.com/watch?v=-4-YWP0S45I

Slide 44

Slide 44 text

全体のまとめ Cesiumは3次元や4次元のデータを可視化するのに非常に適したプラットフォーム。また、複数のライブラリを組み合わせることで幅広い表現手法が可能であることが分かった。 Cesiumは開発が盛んで新しい機能がどんどん出てきているので今後の動向にも注目している。

Slide 45

Slide 45 text

Cesiumバンザイ＼ (*^○^*) ／

Slide 46

Slide 46 text

ちょっと宣伝 YouTubeでCesiumのデモ動画を多数公開しています。その動画を見たCesiumの開発者からお声をかけて頂き、Cesiumのショーケースにも掲載されました。よかったらチェックしてみてくださいね☆ Cesiumショーケース https://cesiumjs.org/demos/LSDSLAM.html https://cesiumjs.org/demos/GridViz.html YouTube https://www.youtube.com/channel/UCClOP6BjCmgx4HUqFaW6QNA

Slide 47

Slide 47 text

ご清聴ありがとうございました。