Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
20190824 Leaflet+WebGL
Search
Yuzo Matsuzawa
August 24, 2019
Programming
0
320
20190824 Leaflet+WebGL
Presentation for FOSS4G TOKAI 2019
Yuzo Matsuzawa
August 24, 2019
Tweet
Share
More Decks by Yuzo Matsuzawa
See All by Yuzo Matsuzawa
20191115.pdf
frogcat
0
96
20190924DA-JPSxMapTile.pdf
frogcat
0
59
20190705GNJP2
frogcat
1
69
SotMJP2018-retroscope
frogcat
1
210
Retroscope by leaflet
frogcat
2
4.2k
Other Decks in Programming
See All in Programming
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
Subclassing, Composition, Python, and You
hynek
3
190
rtcamp 10 (vk-illuminati)
yumcyawiz
1
210
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
190
CSC509 Lecture 05
javiergs
PRO
0
180
2024-10-02 dev2next - Application Observability like you've never heard before
jonatan_ivanov
0
200
CSC305 Lecture 09
javiergs
PRO
0
110
データマイグレーションの成功戦略~サービスリニューアルで失敗しないための実践ガイド~
tkzwtks
8
840
Новый уровень ML-персонализации Lamoda: Как мы усилили ее в каталоге и перенесли на другие продукты
lamodatech
0
390
Micro Frontends for Java Microservices - dev2next 2024
mraible
PRO
0
230
Re:proS_案内資料
rect
0
150
組織に自動テストを書く文化を根付かせる戦略(2024秋版) / Building Automated Test Culture 2024 Autumn Edition
twada
PRO
8
3.5k
Featured
See All Featured
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
167
49k
Building Your Own Lightsaber
phodgson
102
6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
191
16k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
40
2.1k
How To Stay Up To Date on Web Technology
chriscoyier
788
250k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Automating Front-end Workflow
addyosmani
1365
200k
KATA
mclloyd
29
13k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
Become a Pro
speakerdeck
PRO
24
4.9k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
327
21k
Transcript
Leaflet + WebGL インディゴ株式会社 松澤有三 2019.08.24 FOSS4G TOKAI 2019 1
前回 2 ・FOSS4G 2015 Tokyo ・Leaflet + SVG Mask
その後 3 2016 2018 2017 ・GitHub / Qiita @frogcat ・FOSS4G
Advent Calendar ・ブラウザ上でのタイル活用
今回 4 ・FOSS4G TOKAI 2019 ・Leaflet + WebGL GPUを活用した ブラウザで使用できる
計算資源としての WebGL Tensorflow.js, Web GPU Cesium, mapbox-gl-js etc. 3D/2.5D グラフィックスの 高速な描画のために 使用するのが一般的
基本① 段彩図 5 左:国土地理院標高PNGタイル RGB が標高値に対応している 右: WebGLで生成した段彩図 標高値から色を計算して着色
6 地理院地図 「自分で作る色別標高図」 このくらいの計算負荷だと WebGL なしでもなんとかなる
基本② 陰影図 7 左:国土地理院標高PNGタイル RGB が標高値に対応している 右: WebGLで生成した陰影図 ピクセルごとに法線ベクトルを計算 して光源となす角度をもとに着色
8 ひなたGIS 計算方法を工夫すると WebGL なしでもなんとかなる 1x1 ピクセル単位で計算すると 256x256 の計算が必要になる上に、 タイルの端のほうで隣接ピクセルがなくてノイズが
生じるといった問題がある 2x2ピクセルを最小単位とすると 2x2ピクセルから法線ベクトルが計算できるので 端の問題がなくなる。 また、計算量が 64x64 に削減できる。 デメリットは陰影の解像度の粗さ。
9 Mapbox GL JS 陰影は WebGL で動的に生成される 陰影を制御するためのさまざまなオプション
基本③ 等高線 10 左:国土地理院標高PNGタイル RGB が標高値に対応している 右: WebGLで生成した等高線 標高値を等高線間隔で割った整数部 が隣接ピクセルのものと違う場合は
on
11 Canvas でもなんとかなるが もっさりとしている
基本④ 全部入り 12 左:国土地理院標高PNGタイル RGB が標高値に対応している 右: WebGLで生成した段彩+陰影+等高線 全部を Canvas
でやろうとすると さすがに計算負荷が見逃せない
? 13 利用者ニーズに応じた 多種タイルの整備 単一の標高タイルの提供 利用者環境での処理 表示・重畳 自由度 低い カスタマイズ
自由 整備更新 たいへん ニーズに 応えるにも 限界が とりあえず DEM さえ あればOK (自治体の持つ高精度DEMがオープンデータになるといいな)
応用① CS立体図 14 左:国土地理院標高PNGタイル RGB が標高値に対応している 右: WebGLで生成したCS立体図 Curvature (曲率)
と Slope (傾斜) を 計算して着色、地理院淡色地図に重畳
応用② CS立体図 (最新版) 15 左:国土地理院標高PNGタイル RGB が標高値に対応している 右: WebGLで生成したCS立体図 オリジナルに近づけるために
多段の平滑化に対応
16 Curvature Slope Curvature Slope 平滑化 平滑化 ひとつのフレームで処理 複数のフレームで処理
応用③ frogcat/flood 17 選択したエリアが 均一に水没した状態から 水が低いほうに収束する アニメーション
18 計算 初期 水量 水量 描画 計算 水量 描画 計算
水量 描画 無限ループで計算&描画 秒間数十フレーム 程度の描画性能
応用④ ジオリファレンス 19 WebGL と Turf.js を使った ブラウザ完結のジオリファレンス 手元の画像をドラッグ&ドロップ してマーカーをドラッグするだけ
結果はブラウザの File API を 使って PNG タイル画像群として ローカル保存 2019/09/14,15@国立国会図書館
まとめ 20 WebGL • ブラウザで使える高速な計算資源 利用 • 用途はいろいろ • サーバサイド処理の移譲
• あたらしい用途の開拓など 弱点 • 学習が大変 • OpenGL Shading Language ? • Tensorflow.js ? その他のトピック • WebGL2, Web GPU • WebGL 系地図ライブラリへのコント リビュート、プラグイン開発 • Service Worker, Offscreen Canvas https://github.com/frogcat/foss4g-tokai-2019