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
シェーダーで魅せるMapLibreの動的ラスタータイル
Search
Satoshi Komatsu
November 08, 2024
Programming
1
420
シェーダーで魅せるMapLibreの動的ラスタータイル
2024/10/08
MapLibre Meetup Japan #03 @Tokyo 発表資料
https://mug-jp.connpass.com/event/330681/
Satoshi Komatsu
November 08, 2024
Tweet
Share
More Decks by Satoshi Komatsu
See All by Satoshi Komatsu
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
360
新宿ダンジョンを可視化してみた
satoshi7190
3
660
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.8k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
910
Other Decks in Programming
See All in Programming
EventSourcingの理想と現実
wenas
6
2.2k
Ethereum_.pdf
nekomatu
0
340
Sidekiqで実現する 長時間非同期処理の中断と再開 / Pausing and Resuming Long-Running Asynchronous Jobs with Sidekiq
hypermkt
6
2.9k
Webの技術スタックで マルチプラットフォームアプリ開発を可能にするElixirDesktopの紹介
thehaigo
2
1k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
210
Quine, Polyglot, 良いコード
qnighy
4
610
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
160
破壊せよ!データ破壊駆動で考えるドメインモデリング / data-destroy-driven
minodriven
17
4.3k
プロジェクト新規参入者のリードタイム短縮の観点から見る、品質の高いコードとアーキテクチャを保つメリット
d_endo
1
1.1k
現場で役立つモデリング 超入門
masuda220
PRO
14
3.1k
Dev ContainersとGitHub Codespacesの素敵な関係
ymd65536
1
140
Importmapを使ったJavaScriptの 読み込みとブラウザアドオンの影響
swamp09
4
1.3k
Featured
See All Featured
Visualization
eitanlees
145
15k
How STYLIGHT went responsive
nonsquared
95
5.2k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
10 Git Anti Patterns You Should be Aware of
lemiorhan
654
59k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
360
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
700
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
27
810
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
7
520
How to train your dragon (web standard)
notwaldorf
88
5.7k
The Invisible Side of Design
smashingmag
297
50k
Transcript
シェーダーで 魅せる Satoshi Komatsu MapLibreの 動的ラスタータイル
• 北海道札幌市 • 株式会社MIERUNE • フロントエンドエンジニア @satoshi7190 @satoshi7190 Satoshi Komatsu
ラスタータイル ベクトルタイル MapLIibreのタイル描画 https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png https://cyberjapandata.gsi.go.jp/xyz/experimental_bvmap/{z}/{x}/{y}.pbf タイルURL タイルURL 出典:地理院タイル
地図に描画 ラスタータイル ベクトルタイル MapLIibreのタイル描画 タイルURLからデータを取得 出典:地理院タイル
ラスタータイル https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png タイルURL custom:// 出典:地理院タイル MapLIibreのタイル描画
MapLIibreのタイル描画 ラスタータイル https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png タイルURL custom:// 出典:地理院タイル addProtocol
関数について • 特別なURL(例えばcustom://で始 まるもの)を使って地図のデータ を読み込む際に、どのようにデー タを取得するかを自分でカスタマ イズできる機能 • 地図データの取得方法を柔軟に変 更したり、特別な処理を挟むこと
ができる。 https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png custom:// addProtocol
実例プラグイン 地理院標高タイルのデコード maplibre-gl-gsi-terrain PMTillesの読み込み PMTiles for MapLibre GL CSV、GPXの読み込み maplibre-gl-vector-text-protocol
等高線ベクターの動的生成 maplibre-contour 関数について addProtocol
(ラスターの例) 取得したタイル画像 地図に描画 出典:地理院タイル 関数について addProtocol
タイルの描画前に独自のカスタム処理を挟む 取得したタイル画像 地図に描画 出典:地理院タイル (ラスターの例) 関数について addProtocol
取得したタイル画像 タイルの描画前に独自のカスタム処理を挟む 地図に描画 出典:地理院タイル (ラスターの例) 関数について addProtocol
取得したタイル画像 地図に描画 タイルの描画前に独自のカスタム処理を挟む タイル画像を加工 出典:地理院タイル (ラスターの例) 関数について addProtocol
(ラスターの例) 関数について addProtocol 取得したタイル画像 地図に描画 タイルの描画前に独自のカスタム処理を挟む タイル画像を加工 画像処理の計算が複雑なほど動作が遅い
シェーダーとは? • GPUで動作するプログラムで、ピクセルや 頂点の色、形状を制御しブラウザ内で3Dレ ンダリングや画像処理を実現するWebGL の技術 • WebGLの並列処理により、大量のピクセ ルを同時に高速で処理できる https://threejs.org/examples/
API GLSL言語 (シェーダー) CPU 直列処理 GPU 並列処理 複雑な処理を順次に処理する 単純な処理を並列で処理する シェーダーとは?
CPU GPU シェーダーとは? 乗客40名を東京ビックサイトに送り届けるのに効率的なのは? 処理の完了
メインスレッド(1本道)だと 処理が渋滞する Webワーカーによるマルチスレッド化
マルチスレッドで処理をスムーズに Webワーカーによるマルチスレッド化
シェーダーでタイル画像を処理する 地理院標高タイルを使って 動的加工してみる 出典:地理院タイル
DEMOサイト Terrain Visualizer https://github.com/forestacdev/maplibre-terrain-visualizer https://forestacdev.github.io/maplibre-terrain-visualizer/
標高段彩図 標高値を使った加工
標高値を使った加工 浸水 シュミレーション
法線マップを使った加工 標高タイル 法線マップ画像 出典:地理院タイル
法線マップ画像 法線マップを使った加工 • 画像の各ピクセルごとの表面の向き をRGBカラーで示し、陰影や光の当 たり方を計算するためのテクスチャ • 画像の細部や凹凸を強調したり、立 体感を演出したりするのに使う
陰影図 法線マップを使った加工
曲率 法線マップを使った加工
エッジ 法線マップを使った加工
等高線 その他
加工処理をまぜる 標高段彩図 陰影図 エッジ + +
Terrain-RGB形式 Terrarium-RGB形式 地理院標高タイル 出典:地理院タイル 別のTerrain形式への変換処理にも応用できる
シェーダーで変換処理を最適化して コントリビュートしました。 地理院標高タイルで3D表示するプラグイン maplibre-gl-gsi-terrain https://github.com/mug-jp/maplibre-gl-gsi-terrain
今後の展望、まとめ • ベクトルタイルのスタイリングに加え、ラスタータイルのスタイ リングも可能に!? • MapLibreをフォークして内部のシェーダーをいじったほうが ぬるぬる描画(リアルタイムレンダリング)できる