Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Cesiumマニアックス― Revenge ―

258 views

Published on

FOSS4G 2018 Hokkaidoの発表資料となります。

Published in: Software
  • Be the first to comment

Cesiumマニアックス― Revenge ―

  1. 1. Cesiumマニアックス ― Revenge ― 株式会社ノーザンシステムサービス 中洞 友希 FOSS4G 2018 Hokkaido
  2. 2. 自己紹介 • 氏名:中洞 友希 • 会社:(株)ノーザンシステムサービス 入社6年目 2 ディープラーニングや海底資源 の可視化の研究開発や受託開発 を行ってます。 趣味:プロレス観戦 免許をとって8年目ですが、先月 高速道路デビューをしました!
  3. 3. 目次 • 前回のあらすじ • 海底地形表示 • GLTFによる地下空間の画像表示 • WebDNN with Cesium • 全体のまとめ 3
  4. 4. 前回のあらすじ • FOSS4G 2016 Hokkaido Cesiumマニアックス 4 地形表示の部分が中途半端 今回でリベンジ!! + 地形以外でこれまでCesiumでやったこと
  5. 5. 海底地形表示 5
  6. 6. 海面下のデータ可視化 • Cesiumを使用した可視化システムの開発中…… 6 海面下のデータをCesium上で可視化したい 顧客A様
  7. 7. 海面下のデータ可視化の問題点 7 これまでのCesiumでは海面下や地下へのデータの 表示は考慮されていない 本来はこのような線があるが…… 海面に隠れて見えない!
  8. 8. ここでCesium ver.1.40が公開 • Cesium ver.1.40の新機能Clipping Plane • 設定した面の内側にあるレンダリングを無効化する • 3D TilesやGLTFモデル、地形の一部などを選択的に非表示 にすることが出来る 8 Clipping Planeで海面を非表示にすれば海面下の データも見えるのでは?
  9. 9. Clipping Planeの実装 • Clipping Planeの設定(1/2) 9 var position = Cesium.Cartesian3.fromDegrees(x, y, z); var entity = viewer.entities.add({ position : position, box : { dimensions : new Cesium.Cartesian3(boxX, boxY, boxZ), material : Cesium.Color.WHITE.withAlpha(0.0), outline : true, outlineColor : Cesium.Color.WHITE } }); Clipping Planeで非表示 になる領域のボックス
  10. 10. Clipping Planeの実装 • Clipping Planeの設定(2/2) 10 globe.depthTestAgainstTerrain = true; globe.clippingPlanes = new Cesium.ClippingPlaneCollection({ modelMatrix : entity.computeModelMatrix(Cesium.JulianDate.now()), planes : [ new Cesium.ClippingPlane(new Cesium.Cartesian3( 1.0, 0.0, 0.0), -1*boxX/2.0), new Cesium.ClippingPlane(new Cesium.Cartesian3(-1.0, 0.0, 0.0), -1*boxX/2.0), new Cesium.ClippingPlane(new Cesium.Cartesian3( 0.0, 1.0, 0.0), -1*boxY/2.0), new Cesium.ClippingPlane(new Cesium.Cartesian3( 0.0, -1.0, 0.0), -1*boxY/2.0) ], edgeWidth: 1.0, edgeColor: Cesium.Color.WHITE, enabled : true }); 先ほどのボックスから 変換行列を作成 クリッピングを行う面。 法線と原点からの距離を 設定。
  11. 11. Clipping Planeの実装 • データ周辺の海面部分をClipping Planeで非表示 11 海面下のデータは見えるようになった
  12. 12. Clipping Planeを実装したが…… 12 データと海底地形をあわせて見たい 顧客A様 Clipping Planeは没 Clipping Planeでは海底地形が表示されない
  13. 13. Cesiumで地下空間を表現するために ・これまでの方法 Cesium(ver1.6)の何故か地下に潜れちゃうバグを上手いこと活用 してやっていた。 このバグのために古いバージョンのCesiumを使い続けるわけ にもいかない・・・ ver1.12で「depthTestAgainstTerrain」が登場! これを使えば地下に潜れる! 13
  14. 14. 「depthTestAgainstTerrain」を使えば 最新バージョンのCesiumでも地下空間に潜れた!!! 14 顧客A様 わたし デススターですね なるほどですね! (デススター??)
  15. 15. 3Dの地形はどう作る?? ・以前のCesiumマニアックスでは cesium-terrain-builder(通称CTB)を使ってDEM画像から3Dの 地形タイルを作成した。今回もこれでやってみようと思った。 https://github.com/geo-data/cesium-terrain-builder 15
  16. 16. 前回の課題だった量子化が出来た! 16 メッシュの量子化を 行うと軽量になるため 読込みが速くなる! Cesiumマニアックスの リベンジ完了! 基盤地図情報の数値標高モデル (10mメッシュ)を加工して作成
  17. 17. ライブラリの依存関係に苦しめられる ・CTBのインストールにはGDAL 2.0以上が必要 ⇒既存システムのGDALは1.11。 ・GDALを2.0にするべくバージョンアップを試みる ⇒依存関係のライブラリたちがこぞってバージョンアップを しはじめる ⇒依存関係のライブラリに更に依存するライブラリのバージョンも 上がって整合性がカオスになる 17 ⇨最終的に色々動かなくなった GDALをバージョンアップせずに地形をつくる方法を探そう・・・!
  18. 18. 標高 PNG タイルでやってみる 地理院仕様の標高 PNG タイルを作成し、それをCesium で読み込んで地形を表示する ・ここの記事を参考にした 「標高の入った GeoTIFF から標高PNGタイルをつくるまで」 【@frogcat様】 https://qiita.com/frogcat/items/f191661900dad8ff726e 標高値をRGB値で格納 https://maps.gsi.go.jp/development/demtile.html 18
  19. 19. 標高 PNG タイルの表示結果 でも・・・・ 19
  20. 20. タイルの作成に時間がかかる 顧客A様 わたし いつまで待っていれば いいですかね? 寝かせて 帰りましょう DEM画像をタイル化する必要がある ⇒ gdal2tiles.py を使おう ⇒ gdal2tiles.py は着色結果をリサンプリングするため標高PNG として意味のない中間色が作られてしまう ⇒gdal_translateを使ってひたすらDEM画像をカットしてタイル作成 処理時間がすごくかかる 20
  21. 21. 段々畑問題 Cesiumで地形を表示できたが、段々になってしまう 顧客A なめらかになりませんか? コレ わたし 仕様です 21出典:地理院地図globe
  22. 22. 亀裂問題 タイルの境目?に亀裂がはいっていまう 顧客A樣 わたし これバグじゃないですか? (困った時の) キャッシュじゃ ないですかね? 22
  23. 23. 救世主 gdal2cesium (https://github.com/giohappy/gdal2cesium) ・Cesiumに準拠した地形のHeightmapを作ってくれるライブラリ。 ・DEM画像を読み込ませるだけでタイルを作成してれる。 ・しかもめっちゃ早い!!!!! 23
  24. 24. 顧客A様 わたし いい感じですね! ♪ gdal2cesiumで作ったタイルの表示結果 24
  25. 25. ということで前回の 「Cesiumマニアックス」 での地形表示問題のリベンジ完了!!!! すっきりしました٩( ‘ω’ *)‫و‬ 25
  26. 26. GLTFによる地下空間の 画像表示 26
  27. 27. 地下空間の画像表示 27 地下空間にボーリングデータである画像を表示 したい 顧客A様
  28. 28. 垂直方向の画像表示 • 画像を垂直に表示する必要がある • 最初はポリゴンで表示してみようとする 28 テクスチャのマッピングが垂直方向に対応していない
  29. 29. Cesiumの他の機能を 調べてみると…… • Wall • 壁のような垂直方向のポリゴンを表示する機能 29 Wallを使えば簡単に実装できそう!
  30. 30. Wallでの画像表示 • Wallを使用して画像を表示してみる 30 var wallTest = viewer.entities.add({ name : "wall 0", wall : { positions : Cesium.Cartesian3.fromDegreesArray([-115.0, 50, - 115.01, 50, -115.02, 50, -115.03, 50, -115.04, 50]), maximumHeights : [-1000, -1000, -1000, -1000, -1000], minimumHeights : [-1500, -1500, -1500, -1500, -1500], material: '../images/Cesium_Logo_Color.jpg', } }); Wallを構成する頂点の 位置座標 Wallを構成する各頂点 の上部の高さ Wallを構成する各頂点 の下部の高さ
  31. 31. Wallでの画像表示 • Cesiumで見てみると…… 31
  32. 32. Wallが表示されない原因 • Wallの上部頂点の高さが全てマイナス値だと表示さ れないバグ 32 var wallTest = viewer.entities.add({ name : "wall 0", wall : { positions : Cesium.Cartesian3.fromDegreesArray([-115.0, 50, - 115.01, 50, -115.02, 50, -115.03, 50, -115.04, 50]), maximumHeights : [-1000, -1000, -1000, -1000, -1000], minimumHeights : [-1500, -1500, -1500, -1500, -1500], material: '../images/Cesium_Logo_Color.jpg', } }); Wallを構成する各頂点 の上部の高さが全てマ イナス
  33. 33. 何とかWallで表示できないかあがい てみる • 端っこの頂点を一個だけ上部の高さを0m以上にして みる 33 var wallTest = viewer.entities.add({ name : "wall 0", wall : { positions : Cesium.Cartesian3.fromDegreesArray([-115.0, 50, - 115.01, 50, -115.02, 50, -115.03, 50, -115.04, 50]), maximumHeights : [-1000, -1000, -1000, -1000, 1], minimumHeights : [-1500, -1500, -1500, -1500, -1500], material: '../images/Cesium_Logo_Color.jpg', } });
  34. 34. 何とかWallで表示できないかあがい てみる • 表示はされる 34 端のポリゴンが地上まで伸びて見た目が悪い Wallの頂点数を増やせば伸びている ポリゴンは目立ちにくくなるが……
  35. 35. Wallの更なる問題点 • 小さい寸法(数10cm単位)の場合、Wallの頂点数が 多いとテクスチャが歪む 35 だいたい200頂点くらいのWall
  36. 36. Wallの更なる問題点 • 頂点数が多いのであれば減らしてみる 36 頂点数を10に減らしたWall テクスチャの歪みはいくらか改善されるが 端の伸びているポリゴンが目立つ
  37. 37. 試行錯誤 • ほかの手法がないか? • よりネイティブなAPIを使えば歪みなくテクスチャを貼る ことが出来るのではないか? • マテリアルを操作できるGLSLとかFabricとか…… 37
  38. 38. 試行錯誤の結果 • 結局出来ませんでした 38GLSLもFabricもわけがわからん
  39. 39. 他の方法を模索 • 表示しようとしている画像は四角の面ポリゴン一枚 で表現できる簡易な形状 39 Wallでやるより3Dモデル作って表示したほう がきれいになるのでは? 3DモデルをGLTF形式で作成してCesiumに読み込む
  40. 40. GLTFとは • JSON形式の3Dファイルフォーマット • https://github.com/KhronosGroup/glTF • 「画像ならJPEG、音楽ならMP3、3DならGLTF」となるこ とを目指して開発されているとか • JSON形式であるためWeb上での利用に最適 • Cesiumで3Dモデルを読み込む場合はこの形式が一般 的 40
  41. 41. GLTFの作成 • obj形式で3Dモデルを作成してGLTFに変換する • obj形式とは3Dファイルフォーマットの一つでASCIIデータ で表される • GLTFはバイナリデータも含んでいるので直接作成するの は大変 41 obj形式はASCIIで記述できるので作成が容易
  42. 42. obj形式の3Dモデルの作成 • obj形式のファイル構成 • .objファイル • 頂点の位置やテクスチャマッピング、面の設定などの形状に関す る設定 • .mtlファイル • 色やテクスチャなどの材質に関する設定 42
  43. 43. obj形式の3Dモデルの作成 • .objファイルの例(1/2) 43 # test object mtllib material.mtl v 0 0 0 v 0 -11.5 0 v 3.8237500000000004 0 0 v 3.8237500000000004 -11.5 0 vn 0 0 -1 vn -1 0 0 vn 1 0 0 vn 0 -1 0 vn 0 1 0 vn 0 0 1 使用するマテリアルフ ァイル。mtlファイルの 記述の仕方は後述。 各頂点の位置を記述する。 数値の単位はCesium内で1=1m換算。 法線の向き。 ポリゴンの面がどこを向いているかの設定。
  44. 44. obj形式の3Dモデルの作成 • .objファイルの例(2/2) 44 vt 0 1 vt 0 0 vt 1 1 vt 1 0 usemtl def f 1/1/1 2/2/1 4/4/1 3/3/1 f 1/1/6 2/2/6 4/4/6 3/3/6 テクスチャマッピングの設定。 頂点がテクスチャ画像のどの位置にあるか記述する。 使用するマテリアルの設定。 mtlファイル内で設定したマテリアルの名称を 記述する。 面の設定。 これまで設定した頂点、法線、テクスチャマッピングの 組み合わせを記述して面を作成する。
  45. 45. obj形式の3Dモデルの作成 • .mtlファイルの例 45 # material newmtl def Ns 100 d 0.99 Ni 0.001 illum 2 Ka 1.0 1.0 1.0 Kd 1.0 1.0 1.0 Ks 0 0 0 map_Kd test.png 新しいマテリアルを設定。ここで設定した 名称のマテリアルが作成される。 マテリアルの設定。 d : 透明度 Ka : Ambient color Kd : Diffuse color Ks : Specular color テクスチャ画像 の設定。
  46. 46. obj形式からGLTF形式へ変換 • 変換ツールobj2gltfを使用 • https://github.com/AnalyticalGraphicsInc/OBJ2GLTF • Node.jsを使用しコマンドラインで変換を実行する • 変換コマンド 46 obj2gltf -i model.obj -o model.glb -iオプション:入力するobj 形式のファイル。 -oオプション:出力する GLTF形式のファイル。
  47. 47. GLTFのCesiumへの読込 • Cesiumでの3Dモデルを含むEntityの設定例 47 var position = Cesium.Cartesian3.fromDegrees(x, y, z); var entity = viewer.entities.add({ position : position, model : { uri : ‘./model.glb’, } }); GLTF形式ファイルのパス 3Dモデルの設置位置。 obj形式のモデルの原点((0 0 0)の位置)が ここにくるように設置されるので、obj形式 のファイルを作成するときから意識してお くと良い。
  48. 48. GLTFによる画像表示 • CesiumにGLTFを読み込んだ結果 48 GLTFだときれいに表示できた!
  49. 49. WebDNN with Cesium 49
  50. 50. WebDNN with Cesium • FOSS4G Advent Calendar 2017で公開した記事 • https://qiita.com/wayama_ryousuke/items/3809145738f76f19 bf42 50
  51. 51. 読み返してみると 51 「あとで」と言ってからもう既に半年が過ぎている…… なのでここで詳細を説明させていただきます!
  52. 52. WebDNNとは? • 東京大学の研究室が開発したフレームワーク • https://www.mi.t.u-tokyo.ac.jp/research/webdnn/ • ブラウザ上でDeep Learningの学習済みモデルを用い て処理が可能 • 他のフレームワークで学習したモデルを使用できる • webGPUを使えば処理時間が爆速 52 面白そうだしAdvent Calendarのネタに ちょうど良いから使ってみよう!
  53. 53. WebDNNで何をする? • これまでpix2pixによるタイル変換の研究をやってき た[1] 53 ●航空写真⇒地図[2] 入力画像 正解画像出力結果 ●CS立体図+地質図⇒地すべり検出[2] 入力画像 正解画像出力結果 [1]岩崎 亘典,和山 亮介, “Deep Learning での地図タイル活用の検討”, 人工知能学会全国大会(第31回), 2017. [2] 国土地理院(http://maps.gsi.go.jp/development/ichiran.html),一部加工して使用
  54. 54. WebDNNで何をする? • Pix2pixをWebDNNで動かす 事例 • https://qiita.com/knok/items/4 5f4bbe3f0058eba27e6 54 pix2pixで学習したタイル変換モデルを WebDNNで動かす
  55. 55. 学習モデルの作成 • WebDNNはほかのフレームワークで作成した学習モ デルをWebDNN用のモデルに変換して使用する • Chainerで学習したpix2pixの学習モデルをWebDNNの モデルに変換するプログラムがあったのでそれを使 わせてもらう • https://github.com/knok/chainer-pix2pix 55
  56. 56. データセットの作成・学習 • 学習データセットとして変換後と変換前の対となるタイ ル画像を繋げた画像を作成 • 標高タイルからCS立体図へ変換 • 作成したデータセットをChainerのpix2pixで学習 • 学習はGPUがある環境で実行(WebDNNを実行する環境とは別 の環境) 56 標高タイル画像[1]とCS立体図[2]のデータセット画像 [1] シームレス標高サービス(https://gsj-seamless.jp/labs/elev/) [2] CS立体図(5mDEMもあり)(http://kouapp.main.jp/csmap/japan/csjapan.html)
  57. 57. 学習モデルの変換 • Chainerの学習モデルをWebDNNモデルに変換 • WebDNNモデルへの変換にWebDNNの環境構築が必 要なので仮想環境(VMware)のUbuntu14.04で構築 • 構築したWebDNN環境で学習モデルを変換 • 変換用のプログラムが用意されていたのでそちらを使用 57 python dump_graph.py --out ./out --enc-npz models/enc_iter_xxx.npz --dec-npz models/dec_iter_xxx.npz 変換コマンド
  58. 58. WebDNNで動かしてみる 58 地図タイルを読み込んでWebDNNのpix2pixで変 換できたことを確認
  59. 59. WebDNNの処理速度 • 普通のPCのブラウザだとタイル画像1枚変換するの に30~40秒 • MacのSafari Technology PreviewだとWebGPUを使って 高速化するらしいので試してみる • MakeGirlsMoeで100倍速いって書いてたのに…… • https://make.girls.moe/#/tips 59 15秒くらいで思ったより速くない
  60. 60. WebDNNの処理速度 • WebDNNのモデルを作成する際にWebGPU用のモデ ルを作成する必要がある • モデルを変換するプログラムの以下の箇所を修正 60 調べてみると…… exec_info = generate_descriptor("webassembly", graph, constant_encoder_name="eightbit") 変更前 exec_info = generate_descriptor("webgpu", graph, constant_encoder_name="eightbit") 変更後
  61. 61. WebDNNの処理速度 • WebGPU用のモデルを作成してまたMacで見てみる 61 100倍速いは本当だった……! 通常のPCブラウザ WebGPU
  62. 62. Cesium上での変換した 地図タイルの表示 • デモ 62
  63. 63. WebDNN with Cesiumまとめ • Webブラウザ上でpix2pixを動かしてタイルの変換が 出来た • WebブラウザであればPCやスマホなど幅広い環境で実行 可能 • 学習モデルを変更すれば異なる種類の分析を行える 学習モデルを共有することで地図タイルに 対するDeep Learningによる多様な分析を誰で もどこでも手軽にできるようになる 63
  64. 64. WebDNN with Cesiumまとめ • WebGPUめっちゃ速い • Cesium上で地図タイル形式として表示させるのは今 後の課題 Githubでソース公開中! https://github.com/makinux/WebTileNet 64
  65. 65. 65 閲覧者に対して明示せずに Deep Learningツールを設置した場合、 不正指令電磁的記録供用などの容疑で 摘発になる可能性があることもないかもしれません! ! 突然の逮捕 ※ネタです GUNMA GIS GEEKの 清水さんのサイトのように 同意文を出すのがおすすめ! https://shimz.me/blog/javascript/6114
  66. 66. 全体のまとめ • Cesiumによる地下空間の表現についてはある程度技 術的に確立できた • CesiumはDeep Learningなどで作成された成果物を3次 元表示するのに適している 66 今後Deep LearningとCesiumの組み合わせによ って表現の幅が広がるのではないかと期待
  67. 67. 時系列データ 67 Cesiumでの 異なるドメインのデータの可視化 = GEODIVERSITY 点群データ(3D Tiles) リアルタイムの テレメトリデータ Deep Learning
  68. 68. 68 ご清聴ありがとうございました

×