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
Sponsored
·
Your Podcast. Everywhere. Effortlessly.
Share. Educate. Inspire. Entertain. You do you. We'll handle the rest.
→
Satoshi Komatsu
November 08, 2024
Programming
1
840
シェーダーで魅せる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
590
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
620
新宿ダンジョンを可視化してみた
satoshi7190
3
1.1k
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
4.3k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1.3k
Other Decks in Programming
See All in Programming
Lambda のコードストレージ容量に気をつけましょう
tattwan718
0
140
Gemini for developers
meteatamel
0
100
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
minodriven
21
7.4k
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
140
責任感のあるCloudWatchアラームを設計しよう
akihisaikeda
3
180
AIで開発はどれくらい加速したのか?AIエージェントによるコード生成を、現場の評価と研究開発の評価の両面からdeep diveしてみる
daisuketakeda
1
2.5k
CSC307 Lecture 04
javiergs
PRO
0
660
CSC307 Lecture 10
javiergs
PRO
1
660
AI Schema Enrichment for your Oracle AI Database
thatjeffsmith
0
330
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
dchart: charts from deck markup
ajstarks
3
1k
Smart Handoff/Pickup ガイド - Claude Code セッション管理
yukiigarashi
0
150
Featured
See All Featured
Organizational Design Perspectives: An Ontology of Organizational Design Elements
kimpetersen
PRO
1
470
RailsConf 2023
tenderlove
30
1.3k
Why You Should Never Use an ORM
jnunemaker
PRO
61
9.7k
The Mindset for Success: Future Career Progression
greggifford
PRO
0
240
How to audit for AI Accessibility on your Front & Back End
davetheseo
0
180
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
340
Building AI with AI
inesmontani
PRO
1
710
Paper Plane (Part 1)
katiecoart
PRO
0
4.3k
Writing Fast Ruby
sferik
630
62k
Redefining SEO in the New Era of Traffic Generation
szymonslowik
1
220
How GitHub (no longer) Works
holman
316
140k
GraphQLとの向き合い方2022年版
quramy
50
14k
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をフォークして内部のシェーダーをいじったほうが ぬるぬる描画(リアルタイムレンダリング)できる