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

Transcript

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

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

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

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

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

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

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

   ができる。 https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png custom:// addProtocol

8. 実例プラグイン 地理院標高タイルのデコード maplibre-gl-gsi-terrain PMTillesの読み込み PMTiles for MapLibre GL CSV、GPXの読み込み maplibre-gl-vector-text-protocol

   等高線ベクターの動的生成 maplibre-contour 関数について addProtocol

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

28. 等高線 その他

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

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

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

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