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

★ この資料は FOSS4G 2016 Hokkaido の登壇発表資料です ★

Cesium だけで地物を大量表示するには？地形データを軽量化するには？観測データを3次元表示するには？物理演算するには？
Cesium.js のマニアックな知見をご紹介します！

発表者：中洞 友希（株式会社ノーザンシステムサービス　研究開発部）

Transcript

1. 株式会社ノーザンシステムサービス 中洞 友希 Cesiumマニアックス FOSS4G 2016 Hokkaido
2. 自己紹介 氏名：中洞 友希 会社：(株)ノーザンシステムサービス 入社4年目 地図やドローンを使ったりした 可視化の研究開発をしています。 色々面白いものを置いてあるので、 興味がある方は是非当社まで お越しください！
3. はじめに FOSS4G 2015 Hokkaidoでの発表後、 Cesiumを使った案件のお仕事を頂く機会が 増えました。 そこで本日は恩返しとして得た知見をアウト プットし、Cesiumの良さを知って頂こうと 思います！
4. サーバーサイドではなく Cesiumのみで小地域の 地物を大量に表示したい！ こんな要望がありました。 ※小地域・・・政府が国勢調査で調査する地物の最小単位
5. OpenLayers等の2Dの地図ライブラリで 大量の地物を表示しようとしたところ 重すぎてOSごと落ちてしまった Cesiumは上記のライブラリと異なり WebGLを使用しているため、簡単に実現 できると思っていた。 ( ・∀・)ﾉ 楽勝だべ しかし！
6. Entityという地物を表示するAPIで 読み込もうとしようとしたところ・・・ ここからCesiumとの戦いが始まります。
7. 作戦１ Primitiveで表示してみる PrimitiveはCesiumで 地物を表示するAPI。 Entityよりも軽量に 動作するそうだが・・ 重すぎて落ちる
8. 作戦２ D3.jsでSVG地図を作成して張り付 けてみる D3.jsでSVGの地図を 作成し、Cesiumの イメージレイヤーで 地図上に描画する 解像度が悪く、ズーム すると見た目が悪い
9. 作戦３ 小地域の画像を1つ1つ作成して 張り付ける Mapnikで小地域の画 像を1つ1つ作成し、 地図上に張り付ける 重すぎて落ちる
10. 500m間隔で ポイントをグリッド状 に作成し地図上に表示 グリッドポイントの 計算が遅すぎる 作戦４ グリッドポイントで地物を表現する
11. しかし 今回はクライアント側で完結する処理を追 求したい。 色々探してみると・・ なんと希望の光が！！ サーバーを使わないでって言ったけど あらかじめMapnikでタイルを作成しておいて、 それを表示するのが一番手っ取り早いのかも・・・
12. 皆さんお馴染み藤村さんのQiitaで発見！ とりあえず実施せずにキープして おくべき調査・開発作業 (http://qiita.com/handygeospatial/ items/8f18d309a96ae7faf8c0) geojson-vt
13. geojson-vtはWebブラウザでGeoJSONを 読み込み、タイルにしてくれるライブラリ。 Web Workerと Chrome 64bit を使用し、 geojson-vtで GeoJSONを読み込み canvasで タイルを表示する 表示出来た！！！
14. Web Workerとは 並列処理が出来るHTML5の機能。 JavaScriptの重い処理を並行して実行すること でレスポンスが改善できる。 Chrome 64bitを使った理由 64bit版はChromeのメモリのリミッターが解 除され、制限無くメモリを使うことができる。 そのため重い処理をしてもフリーズしたり落ち ることは無くなった。
15. 無事にタイルで表示出来たけど地物の クリックが出来ない。 Entityで表示できない原因として 地物の頂点数の多さが問題なのか？ 地物を簡素化して 頂点数を減らせば表示できるかも？
16. 地物の簡素化にはPostGISのトポロジを 使用する。 トポロジ処理した 地物を再びEntityで 表示してみる トポロジについてはyellow_73さんの記 事が大変参考になります。 (http://d.hatena.ne.jp/yellow_73/20120323) 表示出来た！！
17. 【メリット】 ・Webブラウザ上でお手軽に タイルを作成できる 【デメリット】 ・選択＆アニメーションができない 【メリット】 ・選択＆アニメーションができる 【デメリット】 ・大量のデータを表示する時はトポ ロジ化が必須でちょっと手間がかか る サーバーを使わずCesiumで大量の地物を表 示するのに適した方法は２つ！ geojson-vt Entity
18. 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
19. Cesiumの地形データが重い。 もっと軽くならないか？ 一件落着。 ・・・と思いきや、再びこんな要望があり ました。
20. 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)
21. quantized-meshを作成できるライブラリを 探してみるも、なかなか見つからない。 あったとしても有償。 3d-forgeというライブラリが見つかったが、 S3を使用する前提で作成されており環境が限 定されてしまうため断念。 https://github.com/ geoadmin/3d-forge
22. さらに探してみると、3d-forgeから派生した ライブラリquantized-mesh-tileを発見！ 早速試してみる。 http://quantized-mesh-tile.readthedocs.io/en/latest/index.html
23. 今回は国土地理院の標高タイルを使用する。 (http://maps.gsi.go.jp/development/demtile.html) 標高タイルから緯度経度高度を算出して quantized-mesh-tileで地形データのterrain ファイル作成する。 quantized-mesh-tile 標高タイル 地形データ (.terrain)
24. terrainファイルは正常にできたが、 このままでは重くてもっさりする。 Cesiumで公開している地形データは、 quantized-meshを簡素化することで高速 化を図っているっぽい。 簡素化前 簡素化後 重 軽 http://blog.thematicmapping.org/2014/10/3d-terrains-with-cesium.html
25. Cesiumのquantized-meshの簡素化は マイケル・ガーランドさんの論文を参考に しているようだ。 論文： https://cesiumjs.org/presentations/Rendering%20the%2 0Whole%20Wide%20World%20on%20the%20World%20 Wide%20Web.pdf
26. マイケルさんはQSlimという簡素化のライ ブラリを公開しているので早速試してみる。 http://mgarland.org/software/qslim21.html
27. QSlimを使用して簡素化ができた！ Before After
28. terrainを obj(smf) に変換 obj(smf)を terrainに変換 全体の処理の流れ quantized-mesh-tile QSlim で簡素化 標高タイル
29. 簡素化したquantized-meshタイルの作成 は出来たが、Cesiumで表示する部分はま だ奮闘中。 もしCesiumで表示することが出来たら、 国土地理院の地理院地図Globeの高速化や、 ドローンやLiDARで取得した3Dデータも 簡単に表示できるようになると思う。
30. 追記： Cesium Terrain Generator And Server というライブラリを発見。quantized-mesh の作成および簡素化をしてくれるかも…？ ソースはまだ公開されていないため、後で試 してみようと思う。 https://github.com/Nymria/Cesium-Terrain-Generator-And-Server
31. 観測データを時系列で 3次元表示したい！ 次に・・・ という要望も出てまいりました。
32. 今回は震源のデータ(緯度・経度・深度)を 時系列アニメーションで表示してみる。 震源のデータはIRISのAPIから取得する。 (http://www.iris.edu/hq/)
33. Cesiumは時系列で地物の表示/非表示を制 御するAPI「Timeline 」が用意されている。 このTimelineを使用するには地物をEntity で表示する必要がある。 しかしこのEntityは数万ポイントしか表示 できない。 表示するデータはもっと多い。 さあどうしよう？？
34. cesium-devにて 『Entityの代わりに Point Primitive Collectionを使えば パフォーマンスが向上するよ！』 https://groups.google.com/forum/#!searchin/cesiumdev/ Memory$20leak$20advice/cesium-dev/HxDAJ96Ajnc/QSrY_zdmDgAJ
35. Point Primitive Collectionを使用してみたと ころ、80万ポイントを表示出来た！ しかし、このPoint Primitive Collectionは時 系列アニメーションに対応していない。 そのため時系列アニメーションは自前で実装 した。
36. それぞれのメリット・デメリット 【メリット】 ・お手軽に時系列アニメーションが できる。 ・ポイントのスタイルを自由に いじれる。 【デメリット】 ・数万ポイントしか表示できない。 Point Primitive Collection 【メリット】 ・大量のポイントを表示できる。 【デメリット】 ・時系列アニメーションに対応して いない。 ・ポイントのスタイルをあまりいじ れない。 Entity
37. 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
38. Cesiumで物理演算をしてみた 噴火や洪水で河川が決壊した際にどのように流 出するのか？ リアルタイム物理演算がそもそもCesiumで可能 なのか、またオブジェクト数はどの程度行ける のかを検証してみました。
39. ・Google summer of codeのアイディアでoimo.jsとか使った物理 演算とか実装出来るとクール！ とか書いてあったので、現時点で は物理演算機能は実装されていないようだ。 ・oimo.jsってそもそもなんだ？お芋？ ・元々はOimoPhysicsというactionscript3で実装された物理演算ラ イブラリをjavascriptに移植した軽量物理演算らしい。 ・とりあえず、物理演算だけを実装するには向いてそうなので採択。 ・ではこれをどうやってCesiumに組み込むか？ ・まず座標系を合わせなければいけない。 ・Cesiumではcartesian（カーテシアンと読みます。デカルト座標 系＝直交座標系）という地球楕円体の中心を原点とした座標系を採 用している。 ・oimo.js等、物理演算系は大抵直交座標なので、 cartesianで渡し てやればいけそう。 物理演算エンジンは何を使うか？
40. 地面はどうする？ ・oimo.jsの地面はどうする？ここはお約束の地 理院標高タイル。 ・標高タイルは256*256の行列なので、左上の 原点を下に緯度経度標高を算出してからカーテ シアン座標に変換する必要がある。 ・oimo.jsでは平面ポリゴンが存在しないため、 球体オブジェクトを敷き詰めて地面の代わりと した。
41. レンダリングはthree.jsで ・本来的にはCesiumのprimitiveを動かしてやるのが早そうだけど、 試したら遅かった。 ・Cesiumのレンダリングではなく、 oimo.jsと相性が良いthree.js ではどうか？ ・幸いpotreeと言うポイントクラウド表示ライブラリでcesiumと three.jsとpotreeを組み合わせたサンプルがあったので、こちらを 拡張して作ってみた。 ・ three.jsは基本的にレンダリング自体はCesiumより早いので大規 模な点群やパーティクルなどを表示する場合は併用してもよいかも しれない。ちなみにpotreeは予めoctree化（Cesiumで言うところ の3DTilesのようなもの）しておかないと使えないため、リアルタイ ム点群は表示できないようだ。この辺は調査中。
42. 物理演算はやっぱWorkerでしょ ・oimo.jsとかの物理演算等のCPUバウンド処理はworkerで別ス レッドで実行させたい！Cesiumでもオブジェクト作成時などに workerで処理しているようだ。 ・ホントはOpenCLなど、GPUを使った並列演算をしてみたかった が実装できるブラウザが現在ないため、今回は見送る。 ・シェーダー言語であるGLSLを使えば簡単な演算であれば出来るら しいがマニアックになりすぎるので、今回は見送る。 ・oimo.jsはworker版が用意されていたのでそちらで実装してみた。 ・Step毎にworker版oimoで計算された位置及び回転情報をメイン スレッドで受け取り、three.jsのオブジェクトに適用し、カメラ位置 をCesiumと同期することで、あたかもCesiumで物理演算している ように表示することが出来た。 ・さしあたり2万オブジェクトくらいまでは問題なく表示できている。 ・メモリはバカ食いするので、64bit版のブラウザが必要かも。
43. 物理演算 デモ Cesium with Three.js and oimo.js https://www.youtube.com/watch?v=-4-YWP0S45I
44. 全体のまとめ Cesiumは3次元や4次元のデータを可視化するの に非常に適したプラットフォーム。 また、複数のライブラリを組み合わせることで 幅広い表現手法が可能であることが分かった。 Cesiumは開発が盛んで新しい機能がどんどん出 てきているので今後の動向にも注目している。
45. Cesiumバンザイ ＼ (*^◦^*) ／
46. ちょっと宣伝 YouTubeでCesiumのデモ動画を多数公開しています。 その動画を見たCesiumの開発者からお声をかけて頂 き、Cesiumのショーケースにも掲載されました。 よかったらチェックしてみてくださいね☆ Cesiumショーケース https://cesiumjs.org/demos/LSDSLAM.html https://cesiumjs.org/demos/GridViz.html YouTube https://www.youtube.com/channel/UCClOP6BjCmgx4HUqFaW6QNA
47. ご清聴ありがとうございました。