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
法律の脱レガシーに学ぶフロントエンド刷新
oguemon
5
730
Honoとフロントエンドの 型安全性について
yodaka
4
250
ARA Ansible for the teams
kksat
0
150
Compose でデザインと実装の差異を減らすための取り組み
oidy
1
300
Java Webフレームワークの現状 / java web framework at burikaigi
kishida
9
2.2k
Formの複雑さに立ち向かう
bmthd
1
720
Bedrock Agentsレスポンス解析によるAgentのOps
licux
2
720
チームリードになって変わったこと
isaka1022
0
190
Domain-Driven Transformation
hschwentner
2
1.9k
一休.com のログイン体験を支える技術 〜Web Components x Vue.js 活用事例と最適化について〜
atsumim
0
110
AWS Organizations で実現する、 マルチ AWS アカウントのルートユーザー管理からの脱却
atpons
0
130
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.7k
Featured
See All Featured
GitHub's CSS Performance
jonrohan
1030
460k
The Language of Interfaces
destraynor
156
24k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
193
16k
Side Projects
sachag
452
42k
Visualization
eitanlees
146
15k
Practical Orchestrator
shlominoach
186
10k
Typedesign – Prime Four
hannesfritz
40
2.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
The Cult of Friendly URLs
andyhume
78
6.2k
Music & Morning Musume
bryan
46
6.3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
3
310
Navigating Team Friction
lara
183
15k
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をフォークして内部のシェーダーをいじったほうが ぬるぬる描画(リアルタイムレンダリング)できる