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
590
シェーダーで魅せる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
88
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
440
新宿ダンジョンを可視化してみた
satoshi7190
3
750
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
3.9k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1k
Other Decks in Programming
See All in Programming
2024年のkintone API振り返りと2025年 / kintone API look back in 2024
tasshi
0
210
TokyoR116_BeginnersSession1_環境構築
kotatyamtema
0
110
お前もAI鬼にならないか?👹Bolt & Cursor & Supabase & Vercelで人間をやめるぞ、ジョジョー!👺
taishiyade
5
3.8k
[Fin-JAWS 第38回 ~re:Invent 2024 金融re:Cap~]FaultInjectionServiceアップデート@pre:Invent2024
shintaro_fukatsu
0
400
Ruby on cygwin 2025-02
fd0
0
140
Rails アプリ地図考 Flush Cut
makicamel
1
110
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
730
昭和の職場からアジャイルの世界へ
kumagoro95
1
350
Amazon Q Developer Proで効率化するAPI開発入門
seike460
PRO
0
110
DevinとCursorから学ぶAIエージェントメモリーの設計とMoatの考え方
itarutomy
1
640
Writing documentation can be fun with plugin system
okuramasafumi
0
120
技術を根付かせる / How to make technology take root
kubode
1
240
Featured
See All Featured
KATA
mclloyd
29
14k
How GitHub (no longer) Works
holman
313
140k
Faster Mobile Websites
deanohume
306
31k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
How to train your dragon (web standard)
notwaldorf
90
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
20
2.4k
What's in a price? How to price your products and services
michaelherold
244
12k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Designing Experiences People Love
moore
139
23k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
For a Future-Friendly Web
brad_frost
176
9.5k
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をフォークして内部のシェーダーをいじったほうが ぬるぬる描画(リアルタイムレンダリング)できる