ポイントクラウドを素直にタイルに入れる方法

[hfu]

ポイントクラウドを素直にタイルに入れる方法について少し考えてみます。

問題の定義

• ソースデータは las ファイル
• 目的とするところは、ウェブ地図でポイントクラウドを良いように表示できるようにすること
• 配信するデータの形式と、配信されたデータの表示方法が検討課題になります。

考えてみたいアプローチ

• 表示方法については、MapLibre GL JS + THREE.js で表示するやり方をベースにする
• ただし、glTF のデータを読み込ませるというよりは、THREE.js の Points 表示機能を使う
• そこにデータを供給する最も素直な形式を考える
• cudiのようにマイクラ風ボクセルにするというよりは、本当の点群を素直に考えてみたい

配信するデータの形式について

• vector-tile-spec のジオメトリは三次元対応していません。二次元のジオメトリだけに対応しているので、vector-tile-spec を使う場合には高さを属性として入れる必要があることになります。
• 標高タイルは有効なアプローチかもしれません。地表面データで標高タイルを作っておき、植生などを反映したポイントについては地表面からの差分高を属性として取った点データとして別送するというのは、案外悪くない方法かもしれません。

配信されたデータの表示方法について

• FIXME

[hfu]

標高タイルを考える

兵庫県 DEM を標高タイルにした事例

https://optgeo.github.io/futatabi-mitabi/#16.54/34.705589/135.192981/17.7/72

兵庫県 DSM を標高タイルにした事例

https://optgeo.github.io/futatabi-again/#16.2/34.703161/135.19588/0/83
DSM から作ると、割と「かっこいい」感じにはなりますが、実用としてどうかというと割と微妙です。
もちろん、表示の工夫の余地はあるとは思います。

標高タイルでやるなら DEM かも

標高タイルは、一ピクセルに一つの高さを割り当てるものですから、DSM を扱った場合は微妙です。DEM 以外を扱う場合には、フォーマットとしては微妙ということかなと思います。

[hfu]

https://github.com/unvt/rgbify を使うことになります。

[hfu]

THREE.js に Loader があるフォーマットを考える

3DMLoader
DRACOLoader
FontLoader
GLTFLoader
KTX2Loader
LDrawLoader
MMDLoader
MTLLoader
OBJLoader
PCDLoader
PDBLoader
PRWMLoader
SVGLoader
TGALoader

[hfu]

やっぱり vector-tile-spec に詰め込む

この場合、height 属性のある正方形ポリゴンで扱っていたものを、height 属性のある Point で扱う、ということになります。

[hfu]

THREE.js の Points 表示機能（THREE.Points）の研究

https://threejs.org/docs/#api/en/objects/Points

https://pisuke-code.com/three-js-point-cloud-display/ を参考にさせていただいたところ、THREE.PointsMaterial で点のスタイルを決めて読ませるみたいです。

[hfu]

素直に deck.gl を使う

単一シーンの好例として https://gunmagisgeek.com/blog/deck-gl/7626 があるので、これを勉強しながら積み上げていくのではないかと思います。

[hfu]

deck.gl の MVTLayer は Point データを circle で表現する場合に ScatterplotLayer を使うので、PointCloudLayer 側から行くしかないように思いました。タイルで上手く扱えるか、というところが難しくなると思います。タイルって、結局、読んだり消したりの制御をかなり巧妙にやっているので、PointCloudLayer からの拡張は容易くはないように感じています。