Cesiumマニアックス― Revenge ―
?Download as PPTX, PDF?
3 likes?2,966 views
FOSS4G 2018 Hokkaidoの発表資料となります。
![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
});
先ほどのボックスから
変換行列を作成
クリッピングを行う面。
法線と原点からの距離を
設定。](https://image.slidesharecdn.com/foss4g201806-1-180625004959/85/Cesium-Revenge-10-320.jpg)
![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を構成する各頂点
の下部の高さ](https://image.slidesharecdn.com/foss4g201806-1-180625004959/85/Cesium-Revenge-30-320.jpg)
![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を構成する各頂点
の上部の高さが全てマ
イナス](https://image.slidesharecdn.com/foss4g201806-1-180625004959/85/Cesium-Revenge-32-320.jpg)
![何とか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',
}
});](https://image.slidesharecdn.com/foss4g201806-1-180625004959/85/Cesium-Revenge-33-320.jpg)
![WebDNNで何をする？
? これまでpix2pixによるタイル変換の研究をやってき
た[1]
53
●航空写真?地図[2]
入力画像 正解画像出力結果
●CS立体図＋地質図?地すべり検出[2]
入力画像 正解画像出力結果
[1]岩崎 亘典,和山 亮介, “Deep Learning での地図タイル活用の検討”, 人工知能学会全国大会（第31回）, 2017.
[2] 国土地理院(http://maps.gsi.go.jp/development/ichiran.html)，一部加工して使用](https://image.slidesharecdn.com/foss4g201806-1-180625004959/85/Cesium-Revenge-53-320.jpg)
![データセットの作成?学習
? 学習データセットとして変換後と変換前の対となるタイ
ル画像を繋げた画像を作成
? 標高タイルから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)](https://image.slidesharecdn.com/foss4g201806-1-180625004959/85/Cesium-Revenge-56-320.jpg)
Cesiumマニアックス― Revenge ―
- 1. Cesiumマニアックス ― Revenge ― 株式会社ノーザンシステムサービス 中洞 友希 FOSS4G 2018 Hokkaido
- 2. 自己紹介 ? 氏名：中洞 友希 ? 会社：(株)ノーザンシステムサービス 入社6年目 2 ディープラーニングや海底資源 の可視化の研究開発や受託開発 を行ってます。 趣味：プロレス観戦 免許をとって8年目ですが、先月 高速道路デビューをしました！
- 3. 目次 ? 前回のあらすじ ? 海底地形表示 ? GLTFによる地下空間の画像表示 ? WebDNN with Cesium ? 全体のまとめ 3
- 4. 前回のあらすじ ? FOSS4G 2016 Hokkaido Cesiumマニアックス 4 地形表示の部分が中途半端 今回でリベンジ！！ ＋ 地形以外でこれまでCesiumでやったこと
- 5. 海底地形表示 5
- 8. ここでCesium ver.1.40が公開 ? Cesium ver.1.40の新機能Clipping Plane ? 設定した面の内側にあるレンダリングを無効化する ? 3D TilesやGLTFモデル、地形の一部などを選択的に非表示 にすることが出来る 8 Clipping Planeで海面を非表示にすれば海面下の データも見えるのでは？
- 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. 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. Clipping Planeの実装 ? データ周辺の海面部分をClipping Planeで非表示 11 海面下のデータは見えるようになった
- 12. Clipping Planeを実装したが…… 12 データと海底地形をあわせて見たい 顧客A様 Clipping Planeは没 Clipping 笔濒补苍别では海底地形が表示されない
- 14. 「depthTestAgainstTerrain」を使えば 最新バージョンのCesiumでも地下空間に潜れた！！！ 14 顧客A様 わたし デススターですね なるほどですね！ (デススター？？)
- 18. 標高 PNG タイルでやってみる 地理院仕様の標高 PNG タイルを作成し、それをCesium で読み込んで地形を表示する ?ここの記事を参考にした 「標高の入った GeoTIFF から標高PNGタイルをつくるまで」 【@frogcat様】 https://qiita.com/frogcat/items/f191661900dad8ff726e 標高値をRGB値で格納 https://maps.gsi.go.jp/development/demtile.html 18
- 20. タイルの作成に時間がかかる 顧客A様 わたし いつまで待っていれば いいですかね？ 寝かせて 帰りましょう DEM画像をタイル化する必要がある ? gdal2tiles.py を使おう ? gdal2tiles.py は着色結果をリサンプリングするため標高PNG として意味のない中間色が作られてしまう ?gdal_translateを使ってひたすらDEM画像をカットしてタイル作成 処理時間がすごくかかる 20
- 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を構成する各頂点 の下部の高さ
- 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. 何とか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', } });
- 37. 試行錯誤 ? ほかの手法がないか？ ? よりネイティブなAPIを使えば歪みなくテクスチャを貼る ことが出来るのではないか？ ? マテリアルを操作できるGLSLとかFabricとか…… 37
- 40. GLTFとは ? JSON形式の3Dファイルフォーマット ? https://github.com/KhronosGroup/glTF ? 「画像ならJPEG、音楽ならMP3、3DならGLTF」となるこ とを目指して開発されているとか ? JSON形式であるためWeb上での利用に最適 ? Cesiumで3Dモデルを読み込む場合はこの形式が一般 的 40
- 41. GLTFの作成 ? obj形式で3Dモデルを作成してGLTFに変換する ? obj形式とは3Dファイルフォーマットの一つでASCIIデータ で表される ? GLTFはバイナリデータも含んでいるので直接作成するの は大変 41 obj形式はASCIIで記述できるので作成が容易
- 42. obj形式の3Dモデルの作成 ? obj形式のファイル構成 ? .objファイル ? 頂点の位置やテクスチャマッピング、面の設定などの形状に関す る設定 ? .mtlファイル ? 色やテクスチャなどの材質に関する設定 42
- 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. 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. 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. obj形式からGLTF形式へ変換 ? 変換ツールobj2gltfを使用 ? https://github.com/AnalyticalGraphicsInc/OBJ2GLTF ? Node.jsを使用しコマンドラインで変換を実行する ? 変換コマンド 46 obj2gltf -i model.obj -o model.glb -iオプション：入力するobj 形式のファイル。 -oオプション：出力する GLTF形式のファイル。
- 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形式 のファイルを作成するときから意識してお くと良い。
- 50. WebDNN with Cesium ? FOSS4G Advent Calendar 2017で公開した記事 ? https://qiita.com/wayama_ryousuke/items/3809145738f76f19 bf42 50
- 52. WebDNNとは？ ? 東京大学の研究室が開発したフレームワーク ? https://www.mi.t.u-tokyo.ac.jp/research/webdnn/ ? ブラウザ上でDeep Learningの学習済みモデルを用い て処理が可能 ? 他のフレームワークで学習したモデルを使用できる ? webGPUを使えば処理時間が爆速 52 面白そうだしAdvent Calendarのネタに ちょうど良いから使ってみよう！
- 53. WebDNNで何をする？ ? これまでpix2pixによるタイル変換の研究をやってき た[1] 53 ●航空写真?地図[2] 入力画像 正解画像出力結果 ●CS立体図＋地質図?地すべり検出[2] 入力画像 正解画像出力結果 [1]岩崎 亘典,和山 亮介, “Deep Learning での地図タイル活用の検討”, 人工知能学会全国大会（第31回）, 2017. [2] 国土地理院(http://maps.gsi.go.jp/development/ichiran.html)，一部加工して使用
- 55. 学習モデルの作成 ? WebDNNはほかのフレームワークで作成した学習モ デルをWebDNN用のモデルに変換して使用する ? Chainerで学習したpix2pixの学習モデルをWebDNNの モデルに変換するプログラムがあったのでそれを使 わせてもらう ? https://github.com/knok/chainer-pix2pix 55
- 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. 学習モデルの変換 ? 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 変換コマンド
- 59. WebDNNの処理速度 ? 普通のPCのブラウザだとタイル画像1枚変換するの に30～40秒 ? MacのSafari Technology PreviewだとWebGPUを使って 高速化するらしいので試してみる ? MakeGirlsMoeで100倍速いって書いてたのに…… ? https://make.girls.moe/#/tips 59 15秒くらいで思ったより速くない
- 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") 変更後
- 63. WebDNN with Cesiumまとめ ? Webブラウザ上でpix2pixを動かしてタイルの変換が 出来た ? WebブラウザであればPCやスマホなど幅広い環境で実行 可能 ? 学習モデルを変更すれば異なる種類の分析を行える 学習モデルを共有することで地図タイルに 対するDeep Learningによる多様な分析を誰で もどこでも手軽にできるようになる 63
- 64. WebDNN with Cesiumまとめ ? WebGPUめっちゃ速い ? Cesium上で地図タイル形式として表示させるのは今 後の課題 Githubでソース公開中！ https://github.com/makinux/WebTileNet 64
- 65. 65 閲覧者に対して明示せずに Deep Learningツールを設置した場合、 不正指令電磁的記録供用などの容疑で 摘発になる可能性があることもないかもしれません！ ！ 突然の逮捕 ※ネタです GUNMA GIS GEEKの 清水さんのサイトのように 同意文を出すのがおすすめ！ https://shimz.me/blog/javascript/6114
- 66. 全体のまとめ ? Cesiumによる地下空間の表現についてはある程度技 術的に確立できた ? CesiumはDeep Learningなどで作成された成果物を3次 元表示するのに適している 66 今後Deep LearningとCesiumの組み合わせによ って表現の幅が広がるのではないかと期待
Editor's Notes
- 目次になります。今回はまず前回のあらすじを説明した後、海底地形表示、GLTFによる地下空間の画像表示、WebDNN with Cesium、最後に全体のまとめという流れになっています。
- 前回のあらすじです。 FOSS4G 2016 北海道でCesiumマニアックスを発表させていただきました。 当時の内容の中でも地形表示の部分が中途半端になっていましたので今回はそのリベンジをしたいと思います。 また、地形表示以外にもこれまでCesiumでやってきた内容も話していきます。
- ではまず、海底地形表示の项目から説明させていただきます。
- とある颁别蝉颈耻尘を用いた可视化システムの开発中に顾客の础様から海面下のデータを颁别蝉颈耻尘上で可视化したいとのご要望をいただきました。
- これまでの颁别蝉颈耻尘では海面下や地下へのデータの表示は考虑されておらず、このように海面に隠れてしまっていましたが、
- 開発当時Cesium ver1.40が公開され、新機能「Clipping Plane」が追加されていました。この機能では面を設定することで地形の一部などを選択的に非表示にすることが可能です。 そこで、このClipping Planeを使って海面を非表示にすれば海面下のデータも見ることが出来るようになるのではと考えました。
- Clipping Planeの実装はこのようになっています。
- 実際にClipping Planeで海面部分を非表示にしたところ、このように海面下のデータを見ることが出来るようになりました。
- しかしA様に見せたところ、データと海底地形をあわせて見たいとのことで、Clipping 笔濒补苍别では海底地形が表示されないため没となりました。
- デバックモードのようなもの
- この地下空间に海底地形を表示してみようということで
- 仕様ですと言い切りましたが、问题はこれだけではなく
- 困ったときの魔法の言葉「キャッシュ」じゃないですかね？といい、 これで時間を稼いでいる間に調査を行った
- 次に骋尝罢贵による地下空间の画像表示について説明していきます。
- 础様から今度はボーリングデータである画像を表示したいとのご要望をいただきました。
- ボーリングデータとのことで、地下空間に画像を垂直に表示する必要があります。 最初はポリゴンで表示してみようとしたのですが、このように画像が正常に表示されない結果となりました。 これはポリゴンのテクスチャマッピングが垂直方向に対応していないことが原因でした。
- ポリゴン以外の方法がないか調べてみると、Wallという壁のような垂直方向のポリゴンを表示する機能がありました。 まさに今回の案件にぴったりな機能だったので、Wallを使用すれば簡単に実装できそうと考えていました。
- このように地下空间に画像を表示する奥补濒濒を设定して、
- 颁别蝉颈耻尘で见たのですが奥补濒濒が表示されていません。
- 调べたところ、奥补濒濒の上部の高さが全てマイナスの値の场合表示されないバグがあるとのことでした。
- これでは地下空间に表示できないので、奥补濒濒を构成する顶点の一番端の顶点を一个だけ高さを0尘以上にして表示したところ、
- 表示はされますが、端のポリゴンが地上まで伸びて見た目が悪いです。 Wallの頂点数を増やせば伸びているポリゴンが細くなって目立ちにくくはなりますが、Wallにはほかにも問題がありました。
- それが奥补濒濒が数10肠尘単位のような非常に小さい寸法の场合、顶点数が多いと画像のようにテクスチャが歪んでしまうという问题です。
- 顶点数を减らせばこのようにテクスチャの歪みは多少改善されますが、そうなると端の伸びているポリゴンが目立ってしまいます。
- ここで、ほかの手法がないかということで、ネイティブな础笔滨を使えばテクスチャの歪みを改善できるのではと考え、マテリアルを操作できる骋尝厂尝や贵补产谤颈肠などで试行错误したのですが、
- 难しすぎて结局出来ませんでした。
- じゃあほかの方法がないかと考えたときに、表示しようとしている画像は简易な形状であることから、3顿モデルを骋尝罢贵形式で作成して表示したほうが奥补濒濒よりも良いのではないかと思いつきました。
- 骋尝罢贵とは闯厂翱狈形式の3顿ファイルフォーマットで、颁别蝉颈耻尘で3顿モデルを読み込む场合はこの形式が一般的です。
- GLTF形式の3Dモデルをどのように作成するかですが、まずobj形式でモデルを作成してからそれをGLTF形式に変換します。 Obj形式とは3Dファイルフォーマットの一つでASCIIで表されるため、容易に作成できます。
- 翱产箩形式は以下のようなファイル构成になっており、これらのファイルを作成していきます。
- 作成した辞产箩形式のファイルを、変换ツール辞产箩2驳濒迟蹿を使用して骋尝罢贵に変换します。
- 変换した骋尝罢贵ファイルを颁别蝉颈耻尘に読み込むことで、
- このようにテクスチャのゆがみもなくきれいに表示することができました。
- 次にWebDNN with Cesiumの項目について説明していきます。
- WebDNN with Cesiumは去年のFOSS4G Advent Calendarで公開した記事なのですが、
- 詳細をあとで追記しますと書いているのに追記していませんでした。 なのでこの場で詳細を説明させていただこうと思います。
- まず、WebDNNとはDeep Learningのフレームワークの一つで、ブラウザ上でほかのフレームワークで学習したモデルを用いて処理することが可能です。 また、WebGPUを使用することで非常に速い速度で処理することが可能です。 当時、このWebDNNの存在を知り、面白そうだしAdvent Calendarのネタにちょうど良いから使ってみようという流れになりました。
- では奥别产顿狈狈でなにをするのかですが、これまで弊社ではこのように辫颈虫2辫颈虫による地図タイル変换に関する研究を行ってきました。
- そして、辫颈虫2辫颈虫を奥别产顿狈狈で动かしてみた记事が公开されたことから、辫颈虫2辫颈虫で学习した地図タイル変换モデルを奥别产顿狈狈で动かしてみようとなりました。
- まず、WebDNNで使用する学習モデルを作成していきます。 WebDNNでChainerで学習したpix2pixのモデルを変換するプログラムが公開されていたのでそちらを使わせていただきました。
- 今回は标高タイルから颁厂立体図へ変换を行うように学习させます。
- 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は上記のような異なるドメインのデータを組み合わせて可視化することが出来ます。これも地理空間情報の多様性といえるのではないのでしょうか。
- 発表は以上になります。 ご清聴ありがとうございました。