Advertisement
Cesiumマニアックス― Revenge ―
Jun. 25, 2018•0 likes•2,521 views
3 likes
Be the first to like this
Show More
views
Total views
0
On Slideshare
0
From embeds
0
Number of embeds
0
Download to read offline
Report
Software
FOSS4G 2018 Hokkaidoの発表資料となります。
Ryousuke WayamaFollow
Software Developer at Northern system service Co.,Ltd.Advertisement
Advertisement
Advertisement
Cesiumマニアックス― Revenge ―
- Cesiumマニアックス ― Revenge ― 株式会社ノーザンシステムサービス 中洞 友希 FOSS4G 2018 Hokkaido
- 自己紹介 • 氏名：中洞 友希 • 会社：(株)ノーザンシステムサービス 入社6年目 2 ディープラーニングや海底資源 の可視化の研究開発や受託開発 を行ってます。 趣味：プロレス観戦 免許をとって8年目ですが、先月 高速道路デビューをしました！
- 目次 • 前回のあらすじ • 海底地形表示 • GLTFによる地下空間の画像表示 • WebDNN with Cesium • 全体のまとめ 3
- 前回のあらすじ • FOSS4G 2016 Hokkaido Cesiumマニアックス 4 地形表示の部分が中途半端 今回でリベンジ！！ ＋ 地形以外でこれまでCesiumでやったこと
- 海底地形表示 5
- 海面下のデータ可視化 • Cesiumを使用した可視化システムの開発中…… 6 海面下のデータをCesium上で可視化したい 顧客A様
- 海面下のデータ可視化の問題点 7 これまでのCesiumでは海面下や地下へのデータの 表示は考慮されていない 本来はこのような線があるが…… 海面に隠れて見えない！
- ここでCesium ver.1.40が公開 • Cesium ver.1.40の新機能Clipping Plane • 設定した面の内側にあるレンダリングを無効化する • 3D TilesやGLTFモデル、地形の一部などを選択的に非表示 にすることが出来る 8 Clipping Planeで海面を非表示にすれば海面下の データも見えるのでは？
- 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で非表示 になる領域のボックス
- 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 }); 先ほどのボックスから 変換行列を作成 クリッピングを行う面。 法線と原点からの距離を 設定。
- Clipping Planeの実装 • データ周辺の海面部分をClipping Planeで非表示 11 海面下のデータは見えるようになった
- Clipping Planeを実装したが…… 12 データと海底地形をあわせて見たい 顧客A様 Clipping Planeは没 Clipping Planeでは海底地形が表示されない
- Cesiumで地下空間を表現するために ・これまでの方法 Cesium(ver1.6)の何故か地下に潜れちゃうバグを上手いこと活用 してやっていた。 このバグのために古いバージョンのCesiumを使い続けるわけ にもいかない・・・ ver1.12で「depthTestAgainstTerrain」が登場！ これを使えば地下に潜れる！ 13
- 「depthTestAgainstTerrain」を使えば 最新バージョンのCesiumでも地下空間に潜れた！！！ 14 顧客A様 わたし デススターですね なるほどですね！ (デススター？？)
- 3Dの地形はどう作る？？ ・以前のCesiumマニアックスでは cesium-terrain-builder（通称CTB）を使ってDEM画像から3Dの 地形タイルを作成した。今回もこれでやってみようと思った。 https://github.com/geo-data/cesium-terrain-builder 15
- 前回の課題だった量子化が出来た！ 16 メッシュの量子化を 行うと軽量になるため 読込みが速くなる！ Cesiumマニアックスの リベンジ完了！ 基盤地図情報の数値標高モデル (10mメッシュ)を加工して作成
- ライブラリの依存関係に苦しめられる ・CTBのインストールにはGDAL 2.0以上が必要 ⇒既存システムのGDALは1.11。 ・GDALを2.0にするべくバージョンアップを試みる ⇒依存関係のライブラリたちがこぞってバージョンアップを しはじめる ⇒依存関係のライブラリに更に依存するライブラリのバージョンも 上がって整合性がカオスになる 17 ⇨最終的に色々動かなくなった GDALをバージョンアップせずに地形をつくる方法を探そう・・・！
- 標高 PNG タイルでやってみる 地理院仕様の標高 PNG タイルを作成し、それをCesium で読み込んで地形を表示する ・ここの記事を参考にした 「標高の入った GeoTIFF から標高PNGタイルをつくるまで」 【@frogcat様】 https://qiita.com/frogcat/items/f191661900dad8ff726e 標高値をRGB値で格納 https://maps.gsi.go.jp/development/demtile.html 18
- 標高 PNG タイルの表示結果 でも・・・・ 19
- タイルの作成に時間がかかる 顧客A様 わたし いつまで待っていれば いいですかね？ 寝かせて 帰りましょう DEM画像をタイル化する必要がある ⇒ gdal2tiles.py を使おう ⇒ gdal2tiles.py は着色結果をリサンプリングするため標高PNG として意味のない中間色が作られてしまう ⇒gdal_translateを使ってひたすらDEM画像をカットしてタイル作成 処理時間がすごくかかる 20
- 段々畑問題 Cesiumで地形を表示できたが、段々になってしまう 顧客A なめらかになりませんか？ コレ わたし 仕様です 21出典：地理院地図globe
- 亀裂問題 タイルの境目？に亀裂がはいっていまう 顧客A樣 わたし これバグじゃないですか？ (困った時の) キャッシュじゃ ないですかね？ 22
- 救世主 gdal2cesium (https://github.com/giohappy/gdal2cesium) ・Cesiumに準拠した地形のHeightmapを作ってくれるライブラリ。 ・DEM画像を読み込ませるだけでタイルを作成してれる。 ・しかもめっちゃ早い！！！！！ 23
- 顧客A様 わたし いい感じですね！ ♪ gdal2cesiumで作ったタイルの表示結果 24
- ということで前回の 「Cesiumマニアックス」 での地形表示問題のリベンジ完了！！！！ すっきりしました٩( ‘ω’ *)و 25
- GLTFによる地下空間の 画像表示 26
- 地下空間の画像表示 27 地下空間にボーリングデータである画像を表示 したい 顧客A様
- 垂直方向の画像表示 • 画像を垂直に表示する必要がある • 最初はポリゴンで表示してみようとする 28 テクスチャのマッピングが垂直方向に対応していない
- Cesiumの他の機能を 調べてみると…… • Wall • 壁のような垂直方向のポリゴンを表示する機能 29 Wallを使えば簡単に実装できそう！
- 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を構成する各頂点 の下部の高さ
- Wallでの画像表示 • Cesiumで見てみると…… 31
- 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を構成する各頂点 の上部の高さが全てマ イナス
- 何とか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', } });
- 何とかWallで表示できないかあがい てみる • 表示はされる 34 端のポリゴンが地上まで伸びて見た目が悪い Wallの頂点数を増やせば伸びている ポリゴンは目立ちにくくなるが……
- Wallの更なる問題点 • 小さい寸法（数10cm単位）の場合、Wallの頂点数が 多いとテクスチャが歪む 35 だいたい200頂点くらいのWall
- Wallの更なる問題点 • 頂点数が多いのであれば減らしてみる 36 頂点数を10に減らしたWall テクスチャの歪みはいくらか改善されるが 端の伸びているポリゴンが目立つ
- 試行錯誤 • ほかの手法がないか？ • よりネイティブなAPIを使えば歪みなくテクスチャを貼る ことが出来るのではないか？ • マテリアルを操作できるGLSLとかFabricとか…… 37
- 試行錯誤の結果 • 結局出来ませんでした 38GLSLもFabricもわけがわからん
- 他の方法を模索 • 表示しようとしている画像は四角の面ポリゴン一枚 で表現できる簡易な形状 39 Wallでやるより3Dモデル作って表示したほう がきれいになるのでは？ 3DモデルをGLTF形式で作成してCesiumに読み込む
- GLTFとは • JSON形式の3Dファイルフォーマット • https://github.com/KhronosGroup/glTF • 「画像ならJPEG、音楽ならMP3、3DならGLTF」となるこ とを目指して開発されているとか • JSON形式であるためWeb上での利用に最適 • Cesiumで3Dモデルを読み込む場合はこの形式が一般 的 40
- GLTFの作成 • obj形式で3Dモデルを作成してGLTFに変換する • obj形式とは3Dファイルフォーマットの一つでASCIIデータ で表される • GLTFはバイナリデータも含んでいるので直接作成するの は大変 41 obj形式はASCIIで記述できるので作成が容易
- obj形式の3Dモデルの作成 • obj形式のファイル構成 • .objファイル • 頂点の位置やテクスチャマッピング、面の設定などの形状に関す る設定 • .mtlファイル • 色やテクスチャなどの材質に関する設定 42
- 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換算。 法線の向き。 ポリゴンの面がどこを向いているかの設定。
- 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ファイル内で設定したマテリアルの名称を 記述する。 面の設定。 これまで設定した頂点、法線、テクスチャマッピングの 組み合わせを記述して面を作成する。
- 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 テクスチャ画像 の設定。
- obj形式からGLTF形式へ変換 • 変換ツールobj2gltfを使用 • https://github.com/AnalyticalGraphicsInc/OBJ2GLTF • Node.jsを使用しコマンドラインで変換を実行する • 変換コマンド 46 obj2gltf -i model.obj -o model.glb -iオプション：入力するobj 形式のファイル。 -oオプション：出力する GLTF形式のファイル。
- 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形式 のファイルを作成するときから意識してお くと良い。
- GLTFによる画像表示 • CesiumにGLTFを読み込んだ結果 48 GLTFだときれいに表示できた！
- WebDNN with Cesium 49
- WebDNN with Cesium • FOSS4G Advent Calendar 2017で公開した記事 • https://qiita.com/wayama_ryousuke/items/3809145738f76f19 bf42 50
- 読み返してみると 51 「あとで」と言ってからもう既に半年が過ぎている…… なのでここで詳細を説明させていただきます！
- WebDNNとは？ • 東京大学の研究室が開発したフレームワーク • https://www.mi.t.u-tokyo.ac.jp/research/webdnn/ • ブラウザ上でDeep Learningの学習済みモデルを用い て処理が可能 • 他のフレームワークで学習したモデルを使用できる • webGPUを使えば処理時間が爆速 52 面白そうだしAdvent Calendarのネタに ちょうど良いから使ってみよう！
- WebDNNで何をする？ • これまでpix2pixによるタイル変換の研究をやってき た[1] 53 ●航空写真⇒地図[2] 入力画像 正解画像出力結果 ●CS立体図＋地質図⇒地すべり検出[2] 入力画像 正解画像出力結果 [1]岩崎 亘典,和山 亮介, “Deep Learning での地図タイル活用の検討”, 人工知能学会全国大会（第31回）, 2017. [2] 国土地理院(http://maps.gsi.go.jp/development/ichiran.html)，一部加工して使用
- WebDNNで何をする？ • Pix2pixをWebDNNで動かす 事例 • https://qiita.com/knok/items/4 5f4bbe3f0058eba27e6 54 pix2pixで学習したタイル変換モデルを WebDNNで動かす
- 学習モデルの作成 • WebDNNはほかのフレームワークで作成した学習モ デルをWebDNN用のモデルに変換して使用する • Chainerで学習したpix2pixの学習モデルをWebDNNの モデルに変換するプログラムがあったのでそれを使 わせてもらう • https://github.com/knok/chainer-pix2pix 55
- データセットの作成・学習 • 学習データセットとして変換後と変換前の対となるタイ ル画像を繋げた画像を作成 • 標高タイルから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)
- 学習モデルの変換 • 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 変換コマンド
- WebDNNで動かしてみる 58 地図タイルを読み込んでWebDNNのpix2pixで変 換できたことを確認
- WebDNNの処理速度 • 普通のPCのブラウザだとタイル画像1枚変換するの に30～40秒 • MacのSafari Technology PreviewだとWebGPUを使って 高速化するらしいので試してみる • MakeGirlsMoeで100倍速いって書いてたのに…… • https://make.girls.moe/#/tips 59 15秒くらいで思ったより速くない
- WebDNNの処理速度 • WebDNNのモデルを作成する際にWebGPU用のモデ ルを作成する必要がある • モデルを変換するプログラムの以下の箇所を修正 60 調べてみると…… exec_info = generate_descriptor("webassembly", graph, constant_encoder_name="eightbit") 変更前 exec_info = generate_descriptor("webgpu", graph, constant_encoder_name="eightbit") 変更後
- WebDNNの処理速度 • WebGPU用のモデルを作成してまたMacで見てみる 61 100倍速いは本当だった……！ 通常のPCブラウザ WebGPU
- Cesium上での変換した 地図タイルの表示 • デモ 62
- WebDNN with Cesiumまとめ • Webブラウザ上でpix2pixを動かしてタイルの変換が 出来た • WebブラウザであればPCやスマホなど幅広い環境で実行 可能 • 学習モデルを変更すれば異なる種類の分析を行える 学習モデルを共有することで地図タイルに 対するDeep Learningによる多様な分析を誰で もどこでも手軽にできるようになる 63
- WebDNN with Cesiumまとめ • WebGPUめっちゃ速い • Cesium上で地図タイル形式として表示させるのは今 後の課題 Githubでソース公開中！ https://github.com/makinux/WebTileNet 64
- 65 閲覧者に対して明示せずに Deep Learningツールを設置した場合、 不正指令電磁的記録供用などの容疑で 摘発になる可能性があることもないかもしれません！ ！ 突然の逮捕 ※ネタです GUNMA GIS GEEKの 清水さんのサイトのように 同意文を出すのがおすすめ！ https://shimz.me/blog/javascript/6114
- 全体のまとめ • Cesiumによる地下空間の表現についてはある程度技 術的に確立できた • CesiumはDeep Learningなどで作成された成果物を3次 元表示するのに適している 66 今後Deep LearningとCesiumの組み合わせによ って表現の幅が広がるのではないかと期待
- 時系列データ 67 Cesiumでの 異なるドメインのデータの可視化 = GEODIVERSITY 点群データ(3D Tiles) リアルタイムの テレメトリデータ Deep Learning
- 68 ご清聴ありがとうございました
Editor's Notes
- 目次になります。今回はまず前回のあらすじを説明した後、海底地形表示、GLTFによる地下空間の画像表示、WebDNN with Cesium、最後に全体のまとめという流れになっています。
- 前回のあらすじです。 FOSS4G 2016 北海道でCesiumマニアックスを発表させていただきました。 当時の内容の中でも地形表示の部分が中途半端になっていましたので今回はそのリベンジをしたいと思います。 また、地形表示以外にもこれまでCesiumでやってきた内容も話していきます。
- ではまず、海底地形表示の項目から説明させていただきます。
- とあるCesiumを用いた可視化システムの開発中に顧客のA様から海面下のデータをCesium上で可視化したいとのご要望をいただきました。
- これまでのCesiumでは海面下や地下へのデータの表示は考慮されておらず、このように海面に隠れてしまっていましたが、
- 開発当時Cesium ver1.40が公開され、新機能「Clipping Plane」が追加されていました。この機能では面を設定することで地形の一部などを選択的に非表示にすることが可能です。 そこで、このClipping Planeを使って海面を非表示にすれば海面下のデータも見ることが出来るようになるのではと考えました。
- Clipping Planeの実装はこのようになっています。
- 実際にClipping Planeで海面部分を非表示にしたところ、このように海面下のデータを見ることが出来るようになりました。
- しかしA様に見せたところ、データと海底地形をあわせて見たいとのことで、Clipping Planeでは海底地形が表示されないため没となりました。
- デバックモードのようなもの
- この地下空間に海底地形を表示してみようということで
- 仕様ですと言い切りましたが、問題はこれだけではなく
- 困ったときの魔法の言葉「キャッシュ」じゃないですかね？といい、 これで時間を稼いでいる間に調査を行った
- 次にGLTFによる地下空間の画像表示について説明していきます。
- A様から今度はボーリングデータである画像を表示したいとのご要望をいただきました。
- ボーリングデータとのことで、地下空間に画像を垂直に表示する必要があります。 最初はポリゴンで表示してみようとしたのですが、このように画像が正常に表示されない結果となりました。 これはポリゴンのテクスチャマッピングが垂直方向に対応していないことが原因でした。
- ポリゴン以外の方法がないか調べてみると、Wallという壁のような垂直方向のポリゴンを表示する機能がありました。 まさに今回の案件にぴったりな機能だったので、Wallを使用すれば簡単に実装できそうと考えていました。
- このように地下空間に画像を表示するWallを設定して、
- Cesiumで見たのですがWallが表示されていません。
- 調べたところ、Wallの上部の高さが全てマイナスの値の場合表示されないバグがあるとのことでした。
- これでは地下空間に表示できないので、Wallを構成する頂点の一番端の頂点を一個だけ高さを0m以上にして表示したところ、
- 表示はされますが、端のポリゴンが地上まで伸びて見た目が悪いです。 Wallの頂点数を増やせば伸びているポリゴンが細くなって目立ちにくくはなりますが、Wallにはほかにも問題がありました。
- それがWallが数10cm単位のような非常に小さい寸法の場合、頂点数が多いと画像のようにテクスチャが歪んでしまうという問題です。
- 頂点数を減らせばこのようにテクスチャの歪みは多少改善されますが、そうなると端の伸びているポリゴンが目立ってしまいます。
- ここで、ほかの手法がないかということで、ネイティブなAPIを使えばテクスチャの歪みを改善できるのではと考え、マテリアルを操作できるGLSLやFabricなどで試行錯誤したのですが、
- 難しすぎて結局出来ませんでした。
- じゃあほかの方法がないかと考えたときに、表示しようとしている画像は簡易な形状であることから、3DモデルをGLTF形式で作成して表示したほうがWallよりも良いのではないかと思いつきました。
- GLTFとはJSON形式の3Dファイルフォーマットで、Cesiumで3Dモデルを読み込む場合はこの形式が一般的です。
- GLTF形式の3Dモデルをどのように作成するかですが、まずobj形式でモデルを作成してからそれをGLTF形式に変換します。 Obj形式とは3Dファイルフォーマットの一つでASCIIで表されるため、容易に作成できます。
- Obj形式は以下のようなファイル構成になっており、これらのファイルを作成していきます。
- 作成したobj形式のファイルを、変換ツールobj2gltfを使用してGLTFに変換します。
- 変換したGLTFファイルをCesiumに読み込むことで、
- このようにテクスチャのゆがみもなくきれいに表示することができました。
- 次にWebDNN with Cesiumの項目について説明していきます。
- WebDNN with Cesiumは去年のFOSS4G Advent Calendarで公開した記事なのですが、
- 詳細をあとで追記しますと書いているのに追記していませんでした。 なのでこの場で詳細を説明させていただこうと思います。
- まず、WebDNNとはDeep Learningのフレームワークの一つで、ブラウザ上でほかのフレームワークで学習したモデルを用いて処理することが可能です。 また、WebGPUを使用することで非常に速い速度で処理することが可能です。 当時、このWebDNNの存在を知り、面白そうだしAdvent Calendarのネタにちょうど良いから使ってみようという流れになりました。
- ではWebDNNでなにをするのかですが、これまで弊社ではこのようにpix2pixによる地図タイル変換に関する研究を行ってきました。
- そして、pix2pixをWebDNNで動かしてみた記事が公開されたことから、pix2pixで学習した地図タイル変換モデルをWebDNNで動かしてみようとなりました。
- まず、WebDNNで使用する学習モデルを作成していきます。 WebDNNでChainerで学習したpix2pixのモデルを変換するプログラムが公開されていたのでそちらを使わせていただきました。
- 今回は標高タイルからCS立体図へ変換を行うように学習させます。
- Chainerでの学習後、学習モデルをWebDNN用のモデルに変換します。 WebDNNの環境構築を行い、変換用のプログラムでモデル変換を行いました。
- WebDNNのモデルも作成できたので実際にWebブラウザ上でWebDNNを動かしていきます。 地図タイルを読み込んでWebDNNのpix2pixで変換できることを確認しました。
- ここでWebDNNの処理速度について話させていただきたいと思います。 普通のPCのブラウザでは地図タイル画像を1枚変換するのに30～40秒程度かかりました。 WebDNNはWebGPUを使用できるため、GPUを積んだMacの開発者向けsafariであれば高速化するらしいとのことで試してみたところ、15秒程度と早くはなっているが思ったよりは速くない結果となりました。 WebDNNの速度についてあるTipsでは100倍速くなると書いていたのですが半分程度しか速くなっていません。
- そこで調べてみると、WebDNNのモデルを作成する際にWebGPU用のモデルを作成する必要があるとのことでした。 なのでモデルを変換するプログラムを以下のように修正しWebGPU用のモデルを作成しました。
- その後またMacのsafariで確認しました。 すると1枚の地図タイル画像を変換するのに1秒かからないという驚きの速さになっており、100倍速いは本当でした。
- そのデモがこちらになります。 指定した範囲のタイルを取得して変換しCesium上に表示します。
- WebDNN with Cesiumのまとめになります。 今回、Chainerで学習したpix2pixのモデルを使用して、Webブラウザ上でpix2pixによる地図タイルの変換を実現することが出来ました。 WebブラウザであればPCやスマホなど幅広い環境で実行可能であり、また、学習モデルを変更すれば異なる種類の分析を行えます。 これにより、学習モデルを共有することで地図タイルに対するディープラーニングによる多様な分析を誰でもどこでも手軽にできるようになることが期待できます。
- あとはWebGPUの驚きの速さを実感することが出来ました。 そして、先ほどのデモで使用したソースはGithubで公開しておりますので、気になる方は試していただきたいと思います。
- また、マイニングツールのようなCPUに負荷をかけるツールをサイトに設置することで摘発されることから、WebDNNのようなCPUだけではなくGPUも使用するディープラーニングツールを設置した場合でも摘発される可能性があるかもしれません。設置する場合はGUNMA GIS GEEKの清水さんのサイトのように同意文を出してみることをおすすめします。
- 今回のCesiumマニアックス リベンジのまとめです。 海底地形やボーリング画像の表示などCesiumによる地下空間の表現についてはある程度技術的に確立できたかなと思っております。 また、Cesium with WebDNNでお見せしましたが、CesiumはDeep Learningなどで作成された成果物を3次元表示するのに適しており、今後Deep LearningとCesiumの組み合わせによって表現の幅が広がるのではないかと期待しております。
- 今回の発表では扱いませんでしたが、Cesiumでは時系列データや3D Tilesなどの点群データ、リアルタイムのテレメトリデータの表示が出来ます。 今回のテーマ：GEODIVERSITY、すなわち地理空間情報の多様性とのことですが、Cesiumは上記のような異なるドメインのデータを組み合わせて可視化することが出来ます。これも地理空間情報の多様性といえるのではないのでしょうか。
- 発表は以上になります。 ご清聴ありがとうございました。
Advertisement