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
DEMのRGBエンコード手法をおさらいする / MapLibre Meetup Japan #05
Search
Kanahiro Iguchi
July 15, 2025
1
300
DEMのRGBエンコード手法をおさらいする / MapLibre Meetup Japan #05
DEMのRGBエンコード手法をおさらいする / MapLibre Meetup Japan #05
Kanahiro Iguchi
July 15, 2025
Tweet
Share
More Decks by Kanahiro Iguchi
See All by Kanahiro Iguchi
OvertureMapsをDuckDBで探索してみよう / FOSS4G Hokkaido 2025
kanahiro
0
49
Cloudflare Containersの使用感と、ユースケースに思いを馳せる / Cloudflare Workers Tech Talks in Hokkaido #1
kanahiro
1
280
Featured
See All Featured
Music & Morning Musume
bryan
46
6.8k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
32
2.2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
27k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Agile that works and the tools we love
rasmusluckow
330
21k
The Invisible Side of Design
smashingmag
301
51k
Raft: Consensus for Rubyists
vanstee
139
7.1k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
880
[RailsConf 2023] Rails as a piece of cake
palkan
57
5.9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Transcript
DEMのRGBエンコード手法をおさらいする Kanahiro Iguchi MapLibre Meetup Japan #05 2025/07/15 1
Kanahiro Iguchi MapLibre User Group Japan AWS Community Builder -
Serverless 『位置エン本』 『位置ベロ本』 『実践QGIS』著者 MapLibre Meetup Japan #05 2025/07/15 2
Contents 1. DEMをWebで利用するということ 2. 実数値をRGBにエンコードする 3. 標高値をRGBエンコードする仕様3選 MapLibre Meetup Japan
#05 2025/07/15 3
1. DEMをWebで利用するということ MapLibre Meetup Japan #05 2025/07/15 4
DEM(Digital Elevation Model)とはいわゆる標高データのことで、各格子点が標高値を持つグ リッドデータのことをいう https://www.gsi.go.jp/KIDS/KIDS16.html 日本では「基盤地図情報」で国土全域で10m地理解像度のDEMが得られる。 MapLibre Meetup Japan #05
2025/07/15 5
GISで3次元的な解析を行う際にDEMは必要不可欠でありデスクトップGISでは当然のように 利用される。GeoTIFFに代表されるラスターデータ形式で保管される。 MapLibre Meetup Japan #05 2025/07/15 6
ラスターデータは軽々とファイルサイズが肥大化するため、簡単にWebで扱うことは出来な い。平文はもってのほかである。 基盤地図情報のデータ(平文)は、富士山山頂が含まれるメッシュひとつでZIP展開後16MB →Webで実用的な速度で配信するためには工夫が必要となる。 MapLibre Meetup Japan #05 2025/07/15 7
参考: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
2. 実数値をRGBにエンコードする MapLibre Meetup Japan #05 2025/07/15 9
その工夫というのが、 「実数値をRGBにエンコードして画像化する」という手である 下記は実数値のDEMをRGB画像へエンコードする例を示している(ここでは TerrainRGB) 。 → 「実数値」は整数値ではない(小数点以下の値を含む)数値という意味で使っています MapLibre Meetup Japan
#05 2025/07/15 10
画像フォーマットには以下の利点がある PNGのような可逆圧縮フォーマットを活用できる 画像データはGPUへ渡しやすい ラスタータイルという既存の仕様の上で配信できるのもよい MapLibre Meetup Japan #05 2025/07/15 11
余談: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
余談:Cesiumのアプローチ Cesiumはquantized-meshという仕様で、DEMを事前に3Dメッシュ化した特殊なフォーマッ トのデータをある種のタイルとして配信している。 https://cesium.com/blog/2015/12/18/terrain-quantization/ MapLibre Meetup Japan #05 2025/07/15 13
RGB値は整数値であるはず。どうやって実数値をRGB値に変換ーエンコードしている? RGBはそれぞれ8bit整数値であるから、つまり各ピクセルは24bit=16777216通りの情 報を表現出来る。下限とRGB値1単位の増分(=分解能)を適切に定めることで、原典デ ータの情報を、十分な精度を保ったまま、小さいファイルサイズで表現できる。 MapLibre Meetup Japan #05 2025/07/15 14
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
3. 標高値をRGBエンコードする仕様3選 MapLibre Meetup Japan #05 2025/07/15 16
代表的な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
仕様ごとの値域 地理空間情報部情報普及課. 3次元地図データをウェブ地図に表示するための技術的検討. 2020, p70 MapLibre Meetup Japan #05 2025/07/15
18
地理院標高タイルとそれ以外の仕様の違い 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
余談:プラグイン無しで使えるようにしたいなと思ったけれど プロポーザルを出してみたけどメンテナーの反応はかなり渋い、やむなし。 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
「オレオレ」RGBエンコーディングだって作れるしGL JSで使える 実数値の下限と分解能を変えれば、あなただけのRGBエンコーディングを作れます。 便利な道具: https://github.com/mapbox/rio-rgbify 任意の実数値のラスターデータを、分解能( base-val )と下限( interval )を指定
してRGB画像に変換するためのツール ラスターデータさえ調達できればRGBエンコードは難しくない MapLibre Meetup Japan #05 2025/07/15 21
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
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
余談: 実数値の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
まとめ Webで実数値を扱う場合は、一定のルールで値をエンコードしたRGB画像を用いる手法 がポピュラー TerrainRGBとTerrariumは理屈は全く同じでパラメータが異なるだけ。地理院標高タイル は負数の表現方法が異なる。 標高値以外の実数値データでも同じ手法が使われることがある ただし近年は Cloud Optimized GeoTIFF
などのクラウドネイティブなファイルフォーマッ トをを利用することで、実数値データをそのまま扱えるケースもある。 MapLibre Meetup Japan #05 2025/07/15 25