DEMのRGBエンコード手法をおさらいする / MapLibre Meetup Japan #05

DEMのRGBエンコード手法をおさらいする / MapLibre Meetup Japan #05

Transcript

1. DEMのRGBエンコード手法をおさらいする Kanahiro Iguchi MapLibre Meetup Japan #05 2025/07/15 1
2. Kanahiro Iguchi MapLibre User Group Japan AWS Community Builder - Serverless 『位置エン本』 『位置ベロ本』 『実践QGIS』著者 MapLibre Meetup Japan #05 2025/07/15 2
3. Contents 1. DEMをWebで利用するということ 2. 実数値をRGBにエンコードする 3. 標高値をRGBエンコードする仕様3選 MapLibre Meetup Japan #05 2025/07/15 3
4. 1. DEMをWebで利用するということ MapLibre Meetup Japan #05 2025/07/15 4
5. DEM(Digital Elevation Model)とはいわゆる標高データのことで、各格子点が標高値を持つグ リッドデータのことをいう https://www.gsi.go.jp/KIDS/KIDS16.html 日本では「基盤地図情報」で国土全域で10m地理解像度のDEMが得られる。 MapLibre Meetup Japan #05 2025/07/15 5
6. GISで3次元的な解析を行う際にDEMは必要不可欠でありデスクトップGISでは当然のように 利用される。GeoTIFFに代表されるラスターデータ形式で保管される。 MapLibre Meetup Japan #05 2025/07/15 6
7. ラスターデータは軽々とファイルサイズが肥大化するため、簡単にWebで扱うことは出来な い。平文はもってのほかである。 基盤地図情報のデータ(平文)は、富士山山頂が含まれるメッシュひとつでZIP展開後16MB →Webで実用的な速度で配信するためには工夫が必要となる。 MapLibre Meetup Japan #05 2025/07/15 7
8. 参考：WebにおけるDEMのユースケース https://maplibre.org/maplibre-gl-js/docs/examples/add-a-hillshade-layer/ https://maplibre.org/maplibre-gl-js/docs/examples/3d-terrain/ MapLibre Meetup Japan #05 2025/07/15 8
9. 2. 実数値をRGBにエンコードする MapLibre Meetup Japan #05 2025/07/15 9
10. その工夫というのが、 「実数値をRGBにエンコードして画像化する」という手である 下記は実数値のDEMをRGB画像へエンコードする例を示している（ここでは TerrainRGB） 。 → 「実数値」は整数値ではない（小数点以下の値を含む）数値という意味で使っています MapLibre Meetup Japan #05 2025/07/15 10
11. 画像フォーマットには以下の利点がある PNGのような可逆圧縮フォーマットを活用できる 画像データはGPUへ渡しやすい ラスタータイルという既存の仕様の上で配信できるのもよい MapLibre Meetup Japan #05 2025/07/15 11
12. 余談：GL JSではRGB画像から3Dメッシュを構築している RGB画像からの3Dメッシュを構築については https://observablehq.com/@mourner/martin-real-time-rtin-terrain-mesh がわかりや すい ただし今はもうMartiniは使われていないということを今回のスライドを作っていて 初めて知った Mapbox GL JSではMartiniのアルゴリズムが未だに使われているようである MapLibre Meetup Japan #05 2025/07/15 12
13. 余談:Cesiumのアプローチ Cesiumはquantized-meshという仕様で、DEMを事前に3Dメッシュ化した特殊なフォーマッ トのデータをある種のタイルとして配信している。 https://cesium.com/blog/2015/12/18/terrain-quantization/ MapLibre Meetup Japan #05 2025/07/15 13
14. RGB値は整数値であるはず。どうやって実数値をRGB値に変換ーエンコードしている？ RGBはそれぞれ8bit整数値であるから、つまり各ピクセルは24bit=16777216通りの情 報を表現出来る。下限とRGB値1単位の増分（＝分解能）を適切に定めることで、原典デ ータの情報を、十分な精度を保ったまま、小さいファイルサイズで表現できる。 MapLibre Meetup Japan #05 2025/07/15 14
15. RGBエンコードで共通する考え方 RGBの値を3桁の256進数（あるいは24桁の2進数）と見立てる [0,0,0], [0,0,1], ... [0,0,255], [0,1,0], ... [255,255,255] [R,G,B]=[0,0,0]の時の、実数値を定義する（下限） 例：TerrainRGBでは [0,0,0] は-10000と定義されている RGB値が1単位増加する際、実数値の増分を定義する（分解能） 例：TerrainRGBではRGB値が1増加するごとに、実数値は0.1増加する = [0,0,0]=-10000m, [0,0,1]=-9999.9m, [0,0,2]=-9999.8m... MapLibre Meetup Japan #05 2025/07/15 15
16. 3. 標高値をRGBエンコードする仕様3選 MapLibre Meetup Japan #05 2025/07/15 16
17. 代表的な3つの仕様とパラメータ 仕様名 分解能 下限 上限 TerrainRGB 0.1m -10000.0m 1667721.5m Terrarium 0.0039m -32768.0000m 32768.0000m 地理院標高タイル 0.01m 0.00m※ 83886.0800m 左からTerrainRGB(産総研シームレス) Terrarium(Mapzen Global Terrain) 地理院標高タイル MapLibre Meetup Japan #05 2025/07/15 17
18. 仕様ごとの値域 地理空間情報部情報普及課. 3次元地図データをウェブ地図に表示するための技術的検討. 2020, p70 MapLibre Meetup Japan #05 2025/07/15 18
19. 地理院標高タイルとそれ以外の仕様の違い height = (R * 256 * 256 + G * 256 + B) * 0.01 # ただし[R,G,B] = [128,0,0] を無効値とする # ただし[128,0,1] 以上の場合2^24 を引き去る 地理院標高タイルだけが単調増加でなく、[128,0,0]を境に負の値を表現するようになる （いわゆる2の補数表現） 。 これにより一般的なソフトウェアではそのまま利用できない。MUG-JPではGL JSで地 理院標高タイルを使うためのプラグインを公開している。 https://github.com/mug-jp/maplibre-gl-gsi-terrain MapLibre Meetup Japan #05 2025/07/15 19
20. 余談:プラグイン無しで使えるようにしたいなと思ったけれど プロポーザルを出してみたけどメンテナーの反応はかなり渋い、やむなし。 https://github.com/maplibre/maplibre-style-spec/issues/1142 「DEMは頻繁に変わるものではないのになぜ事前に変換しない？」 それはそう… 実装は難しくないけど、Style Specに手を入れなければならずハードルが高い… https://kanahiro.github.io/gljs-gsi-terrain/ MapLibre Meetup Japan #05 2025/07/15 20
21. 「オレオレ」RGBエンコーディングだって作れるしGL JSで使える 実数値の下限と分解能を変えれば、あなただけのRGBエンコーディングを作れます。 便利な道具: https://github.com/mapbox/rio-rgbify 任意の実数値のラスターデータを、分解能( base-val )と下限( interval )を指定 してRGB画像に変換するためのツール ラスターデータさえ調達できればRGBエンコードは難しくない MapLibre Meetup Japan #05 2025/07/15 21
22. GL JSでは type=raster-dem のsourceで、 encoding=custom と定義することで、そのタ イルの下限と分解能を独自に定義することが出来る。例えば下記は地理院標高タイルを負数 の範囲を一旦考えないことにした場合の定義である（地理院標高タイルのエンコードのパラ メータは分解能が0.01m、下限が0.0mであることを思い出そう） 。 dem: { type: 'raster-dem', tiles: ['https://path/to/yourdem/{z}/{x}/{y}.png'], encoding: 'custom', // ユーザー定義のエンコーディングであることを示す redFactor: 655.36, // R が1 単位増えると実数値がこの値だけ増える greenFactor: 2.56, // G が1 単位増えると実数値がこの値だけ増える blueFactor: 0.01, // B が1 単位増えると実数値がこの値だけ増える baseShift: 0.0, // 実数値の下限 } // ... MapLibre Meetup Japan #05 2025/07/15 22
23. dem: { type: 'raster-dem', tiles: ['https://path/to/yourdem/{z}/{x}/{y}.png'], encoding: 'mapbox', } // ... 上記の定義はTerrainRGBエンコーディングを表すもの 下記はこれと等価の定義である dem: { type: 'raster-dem', tiles: ['https://path/to/yourdem/{z}/{x}/{y}.png'], encoding: 'custom', // ユーザー定義のエンコーディングであることを示す redFactor: 6553.6, // R が1 単位増えると実数値がこの値だけ増える greenFactor: 25.6, // G が1 単位増えると実数値がこの値だけ増える blueFactor: 0.1, // B が1 単位増えると実数値がこの値だけ増える baseShift: -10000.0, // 実数値の下限 } // ... MapLibre Meetup Japan #05 2025/07/15 23
24. 余談: 実数値のRGBエンコードの手法は標高値以外にも使われている 風向き・強さをパーティクルによるアニメーションはWindyなど様々なアプリケーションで 見られるが、風のベクトルーすなわち実数値をRGBエンコードする手法が用いられている。 2次元のベクトルのエンコードの考え方は https://medium.com/@juniormarch48/how-i- built-a-wind-map-with-webgl-d74769282484 が非常にわかりやすい。 風向きをベクトルの実数値としてRGBエンコードした画像（上 記記事より引用） 昔、気象庁データをRGBエンコードして風量をアニメーションで可視化したことがある https://kanahiro.github.io/japan-windmap-example/ MapLibre Meetup Japan #05 2025/07/15 24
25. まとめ Webで実数値を扱う場合は、一定のルールで値をエンコードしたRGB画像を用いる手法 がポピュラー TerrainRGBとTerrariumは理屈は全く同じでパラメータが異なるだけ。地理院標高タイル は負数の表現方法が異なる。 標高値以外の実数値データでも同じ手法が使われることがある ただし近年は Cloud Optimized GeoTIFF などのクラウドネイティブなファイルフォーマッ トをを利用することで、実数値データをそのまま扱えるケースもある。 MapLibre Meetup Japan #05 2025/07/15 25