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
760
シェーダーで魅せる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
400
立方体異世界生成魔法(キュービックディメンション・ジェネレーションマジック)
satoshi7190
2
560
新宿ダンジョンを可視化してみた
satoshi7190
3
940
Webエンジニアに転生したらCSS魔導士になった件
satoshi7190
3
4.1k
MapLibre GL JS とCSSアニメーションでできること
satoshi7190
0
1.2k
Other Decks in Programming
See All in Programming
Reading Rails 1.0 Source Code
okuramasafumi
0
250
FindyにおけるTakumi活用と脆弱性管理のこれから
rvirus0817
0
530
print("Hello, World")
eddie
2
530
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
210
個人軟體時代
ethanhuang13
0
330
Putting The Genie in the Bottle - A Crash Course on running LLMs on Android
iurysza
0
140
Deep Dive into Kotlin Flow
jmatsu
1
360
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
2.4k
1から理解するWeb Push
dora1998
7
1.9k
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
230
Namespace and Its Future
tagomoris
6
710
Featured
See All Featured
We Have a Design System, Now What?
morganepeng
53
7.8k
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.8k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.5k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Done Done
chrislema
185
16k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
It's Worth the Effort
3n
187
28k
Site-Speed That Sticks
csswizardry
10
820
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をフォークして内部のシェーダーをいじったほうが ぬるぬる描画(リアルタイムレンダリング)できる