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
370
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
110
20190924DA-JPSxMapTile.pdf
frogcat
0
64
20190705GNJP2
frogcat
1
79
SotMJP2018-retroscope
frogcat
1
250
Retroscope by leaflet
frogcat
2
4.3k
Other Decks in Programming
See All in Programming
20250708_JAWS_opscdk
takuyay0ne
2
120
iOS 26にアップデートすると実機でのHot Reloadができない?
umigishiaoi
0
140
Porting a visionOS App to Android XR
akkeylab
0
660
PipeCDのプラグイン化で目指すところ
warashi
1
290
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
810
テスト駆動Kaggle
isax1015
1
510
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.5k
Python型ヒント完全ガイド 初心者でも分かる、現代的で実践的な使い方
mickey_kubo
1
180
NEWT Backend Evolution
xpromx
1
110
Goで作る、開発・CI環境
sin392
0
260
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.4k
技術同人誌をMCP Serverにしてみた
74th
1
680
Featured
See All Featured
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
KATA
mclloyd
30
14k
Rails Girls Zürich Keynote
gr2m
95
14k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Thoughts on Productivity
jonyablonski
69
4.7k
GraphQLとの向き合い方2022年版
quramy
49
14k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
The Cost Of JavaScript in 2023
addyosmani
51
8.5k
Music & Morning Musume
bryan
46
6.7k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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