Tweet
Tweet

Slide 1

Slide 1 text

シェーダーで 魅せる Satoshi Komatsu MapLibreの 動的ラスタータイル

Slide 2

Slide 2 text

• 北海道札幌市 • 株式会社MIERUNE • フロントエンドエンジニア @satoshi7190 @satoshi7190 Satoshi Komatsu

Slide 3

Slide 3 text

ラスタータイル ベクトルタイル 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 出典：地理院タイル

Slide 4

Slide 4 text

地図に描画 ラスタータイル ベクトルタイル MapLIibreのタイル描画 タイルURLからデータを取得 出典：地理院タイル

Slide 5

Slide 5 text

ラスタータイル https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png タイルURL custom:// 出典：地理院タイル MapLIibreのタイル描画

Slide 6

Slide 6 text

MapLIibreのタイル描画 ラスタータイル https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png タイルURL custom:// 出典：地理院タイル addProtocol

Slide 7

Slide 7 text

関数について • 特別なURL（例えばcustom://で始 まるもの）を使って地図のデータ を読み込む際に、どのようにデー タを取得するかを自分でカスタマ イズできる機能 • 地図データの取得方法を柔軟に変 更したり、特別な処理を挟むこと ができる。 https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png custom:// addProtocol

Slide 8

Slide 8 text

実例プラグイン 地理院標高タイルのデコード maplibre-gl-gsi-terrain PMTillesの読み込み PMTiles for MapLibre GL CSV、GPXの読み込み maplibre-gl-vector-text-protocol 等高線ベクターの動的生成 maplibre-contour 関数について addProtocol

Slide 9

Slide 9 text

（ラスターの例） 取得したタイル画像 地図に描画 出典：地理院タイル 関数について addProtocol

Slide 10

Slide 10 text

タイルの描画前に独自のカスタム処理を挟む 取得したタイル画像 地図に描画 出典：地理院タイル （ラスターの例） 関数について addProtocol

Slide 11

Slide 11 text

取得したタイル画像 タイルの描画前に独自のカスタム処理を挟む 地図に描画 出典：地理院タイル （ラスターの例） 関数について addProtocol

Slide 12

Slide 12 text

取得したタイル画像 地図に描画 タイルの描画前に独自のカスタム処理を挟む タイル画像を加工 出典：地理院タイル （ラスターの例） 関数について addProtocol

Slide 13

Slide 13 text

（ラスターの例） 関数について addProtocol 取得したタイル画像 地図に描画 タイルの描画前に独自のカスタム処理を挟む タイル画像を加工 画像処理の計算が複雑なほど動作が遅い

Slide 14

Slide 14 text

シェーダーとは？ • GPUで動作するプログラムで、ピクセルや 頂点の色、形状を制御しブラウザ内で3Dレ ンダリングや画像処理を実現するWebGL の技術 • WebGLの並列処理により、大量のピクセ ルを同時に高速で処理できる https://threejs.org/examples/

Slide 15

Slide 15 text

API GLSL言語 （シェーダー） CPU 直列処理 GPU 並列処理 複雑な処理を順次に処理する 単純な処理を並列で処理する シェーダーとは？

Slide 16

Slide 16 text

CPU GPU シェーダーとは？ 乗客40名を東京ビックサイトに送り届けるのに効率的なのは？ 処理の完了

Slide 17

Slide 17 text

メインスレッド（１本道）だと 処理が渋滞する Webワーカーによるマルチスレッド化

Slide 18

Slide 18 text

マルチスレッドで処理をスムーズに Webワーカーによるマルチスレッド化

Slide 19

Slide 19 text

シェーダーでタイル画像を処理する 地理院標高タイルを使って 動的加工してみる 出典：地理院タイル

Slide 20

Slide 20 text

DEMOサイト Terrain Visualizer https://github.com/forestacdev/maplibre-terrain-visualizer https://forestacdev.github.io/maplibre-terrain-visualizer/

Slide 21

Slide 21 text

標高段彩図 標高値を使った加工

Slide 22

Slide 22 text

標高値を使った加工 浸水 シュミレーション

Slide 23

Slide 23 text

法線マップを使った加工 標高タイル 法線マップ画像 出典：地理院タイル

Slide 24

Slide 24 text

法線マップ画像 法線マップを使った加工 • 画像の各ピクセルごとの表面の向き をRGBカラーで示し、陰影や光の当 たり方を計算するためのテクスチャ • 画像の細部や凹凸を強調したり、立 体感を演出したりするのに使う

Slide 25

Slide 25 text

陰影図 法線マップを使った加工

Slide 26

Slide 26 text

曲率 法線マップを使った加工

Slide 27

Slide 27 text

エッジ 法線マップを使った加工

Slide 28

Slide 28 text

等高線 その他

Slide 29

Slide 29 text

加工処理をまぜる 標高段彩図 陰影図 エッジ ＋ ＋

Slide 30

Slide 30 text

Terrain-RGB形式 Terrarium-RGB形式 地理院標高タイル 出典：地理院タイル 別のTerrain形式への変換処理にも応用できる

Slide 31

Slide 31 text

シェーダーで変換処理を最適化して コントリビュートしました。 地理院標高タイルで3D表示するプラグイン maplibre-gl-gsi-terrain https://github.com/mug-jp/maplibre-gl-gsi-terrain

Slide 32

Slide 32 text

今後の展望、まとめ • ベクトルタイルのスタイリングに加え、ラスタータイルのスタイ リングも可能に！？ • MapLibreをフォークして内部のシェーダーをいじったほうが ぬるぬる描画（リアルタイムレンダリング）できる