FOSS4G 2016 Hokkaidoの発表資料です。

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)

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を使用して簡素化ができた！

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. ご清聴ありがとうございました。