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
340
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
98
20190924DA-JPSxMapTile.pdf
frogcat
0
61
20190705GNJP2
frogcat
1
73
SotMJP2018-retroscope
frogcat
1
230
Retroscope by leaflet
frogcat
2
4.2k
Other Decks in Programming
See All in Programming
Flatt Security XSS Challenge 解答・解説
flatt_security
0
800
Swiftコンパイラ超入門+async関数の仕組み
shiz
0
190
はてなにおけるfujiwara-wareの活用やecspressoのCI/CD構成 / Fujiwara Tech Conference 2025
cohalz
3
3.1k
Запуск 1С:УХ в крупном энтерпрайзе: мечта и реальность ПМа
lamodatech
0
980
GitHub CopilotでTypeScriptの コード生成するワザップ
starfish719
28
6.1k
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
0
320
Immutable ActiveRecord
megane42
0
120
SpringBoot3.4の構造化ログ #kanjava
irof
2
580
為你自己學 Python
eddie
0
540
Rubyでつくるパケットキャプチャツール
ydah
0
400
PHPで学ぶプログラミングの教訓 / Lessons in Programming Learned through PHP
nrslib
4
1.1k
chibiccをCILに移植した結果 (NGK2025S版)
kekyo
PRO
0
190
Featured
See All Featured
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.2k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Scaling GitHub
holman
459
140k
How GitHub (no longer) Works
holman
312
140k
Side Projects
sachag
452
42k
Music & Morning Musume
bryan
46
6.3k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Six Lessons from altMBA
skipperchong
27
3.6k
Visualization
eitanlees
146
15k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.1k
The Invisible Side of Design
smashingmag
299
50k
Learning to Love Humans: Emotional Interface Design
aarron
274
40k
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