[WEB App] Point Cloud Viewer v10 — PLY/LAS/LAZ/PCD/XYZ/CSV 点群データのブラウザ閲覧・編集・LAZ圧縮エクスポートツール

[WEB App] Point Cloud Viewer v10 — PLY/LAS/LAZ/PCD/XYZ/CSV 点群データのブラウザ閲覧・編集・LAZ圧縮エクスポートツール

Point Cloud Viewer

LiDARスキャンやフォトグラメトリ(写真測量)で取得した点群データを、ブラウザ上で閲覧・編集・エクスポートできるツールです。
PLY/LAS/LAZ/PCD/XYZ/CSV の 入力6フォーマット に対応。

ファイルをドラッグ&ドロップするだけで3D表示され、カラーモード切替(Original/Height/Intensity/Classification)・ボックス選択+削除・任意直線断面プロファイル(DXFエクスポート)・SOR非同期進捗表示・Octree LOD・座標系変換(JGD2011全19系/UTM/WGS84)・計測ラベル3D表示(スクショ対応)・Voxel Downsampling(点群軽量化)・スライス断面・距離/面積計測・ノイズ除去・LAZ高倍率圧縮エクスポートまでをブラウザ内で完結します。
2000万点超の規模のLiDAR測量データもランダムサンプリングで描画可能です。Octree LOD有効時は全点(サンプリング前の数千万点)からカメラ距離に応じて動的に描画し、近くは高密度・遠くは間引きで表示します。

出力形式は、PLY / GLB / LAS / LAZ / PCD / XYZ / CSV の 7フォーマットDXF(断面プロファイル)スクリーンショット(PNG)保存 に対応しています。

ツール

PLY

[WEB App] Point Cloud Viewer — PLY点群データのブラウザ閲覧・編集・エクスポートツール

LAS / LAZ (Intensity & Classification)

Point Cloud Viewer — Intensity/Classification表示&エクスポート

ボックス選択(+削除)

[Astro] #110 Point Cloud Viewer v5 — ボックス選択・断面ポリライン・Octree LOD・座標系変換

Octree全点LOD(v9)

Point Cloud Viewer — Octree全点LOD 引き Point Cloud Viewer — Octree全点LOD 近接

SOR Worker & Delaunay メッシュ生成 (v8)

Point Cloud Viewer — SOR Worker+キャンセル Point Cloud Viewer — Delaunayメッシュ Point Cloud Viewer — ワイヤフレーム

任意直線断面 & SOR進捗表示 (v7)

Point Cloud Viewer — 任意直線断面 Point Cloud Viewer — 任意直線断面 Point Cloud Viewer — SOR進捗表示

キーフレーム「Add KF」を登録してアニメーション再生 (v9)

Point Cloud Viewer — キーフレーム「Add KF」を登録してアニメーション再生

credit

点群データ(PLY)のサンプルは「スタンフォード大学3Dスキャンリポジトリ」からお借りしています。

点群データ(LAS)のサンプルは、静岡県が公開しているVIRTUAL SHIZUOKAの富士山火口LiDARデータ(約1200万点)を利用させてもらってます。

点群データ(PCD)のサンプルは、PCLプロジェクトのoffice.pcdを利用させてもらってます。

特徴

ドラッグ&ドロップで即表示

PLY・LAS・LAZ・PCD・XYZ・CSVファイルをビューアにドロップするだけで、THREE.Pointsによる3D点群表示が始まります。OrbitControlsでマウスドラッグによる回転・ズーム・パンが可能。バイナリフォーマット(PLY/LAS/PCD)はファイル先頭のマジックバイトで、テキストフォーマット(XYZ/CSV)は拡張子で自動判別されます。

複数ファイルの同時読み込み

複数のファイルを同時にドロップまたは選択すると、すべての点群データが結合されて一つのシーンに表示されます。同一座標系で撮影されたスキャンデータの統合に利用できます。

大規模点群のサンプリング & Octree全点LOD

500万点を超える大規模データ(LiDAR測量データなど)は、非LODモード時にFisher-Yatesランダムサンプリングで500万点に間引かれます。Octree LOD有効時はサンプリング前の全点(数千万点)でOctreeを構築し、カメラ距離に応じてノード別に表示解像度を動的に切り替えます。近いノードは全点を返し、遠いノードはLODサンプル(128点/ノード)で代表します。LOD予算は最大300万点で、現在の表示点数はUIにリアルタイム反映されます。

4種類のカラーモード表現

用途に合わせて点群の着色モードを柔軟に切り替えられます。

  • Original: ファイルに記録された本来のRGBカラー表示。
  • Height Heatmap: 各点のY座標に応じて青→赤のグラデーション表示。地形の高低差把握に最適。
  • Intensity: LAS等の反射強度値をサンプリング自動正規化し、ハイコントラストなグレースケールで描画。
  • Classification: ASPRS標準分類コード(地面・ロー/ミドル/ハイ植生・建物・水系等)に応じた色テーブルで自動色分け表示。

スライス断面 & 任意直線断面プロファイル(DXFエクスポート)

  • 軸平行スライス: X/Y/Z軸を選択してMin〜Max範囲を指定し、内部構造や特定高さの断面を確認できます。
  • 任意直線断面: 点群上で任意の2点をクリック指定することで、自由な角度の垂直断面を生成します。厚さ(Thickness)調整後、断面の地表面プロファイル(緑ポリライン)を自動抽出し、DXF形式でCADソフトへエクスポート可能です。斜めに走る道路の横断面や河川の断面測定に威力を発揮します。

計測ツール(距離・面積・3Dラベル表示)

TOOLをMeasureモードに切り替えて点群上の点をクリックすると、選択した点にピンクのマーカーが配置されます。2点選択で2点間距離、3点選択でヘロンの公式による三角形の面積が計算・表示されます。 計測ラベルはSpriteとして3D空間上にレンダリングされるため、注記付きのスクリーンショット保存にも対応しています。

SORノイズ除去(Web Worker高速化+キャンセル対応)

Statistical Outlier Removal(統計的外れ値除去)フィルタを搭載。K近傍計算をWeb Workerでバックグラウンド実行し、メインスレッドを完全に非ブロック化。partial sort(K個だけ保持する挿入ソート)・整数グリッドキー・セル座標キャッシュにより、200万点の処理時間を15分から数分に短縮。処理中はキャンセルボタンが表示され、Worker.terminate()で即中断可能。完了時には所要秒数が表示されます。

ボックス選択+削除

TOOLをBox Selectに切り替えてマウスドラッグすると、矩形範囲内の点群がマゼンタでハイライト表示されます。「Delete Selected」で選択点を全属性(position/color/intensity/classification)ごと削除。SORが統計的な自動ノイズ除去なら、ボックス選択は手動の精密除去です。

Octree LOD(レベルオブディテール)

空間八分木(Octree)によるカメラ距離ベースの動的描画最適化。カメラに近い部分は高密度で表示し、遠い部分は自動的に間引きます。Frustum Culling(視錐台外の除外)と組み合わせることで、大規模点群でもスムーズなビューイングを実現します。

座標系選択+CRS変換

Source CRS(入力座標系)とExport CRS(出力座標系)をドロップダウンから選択できます。proj4ライブラリによる測地系変換を内蔵し、エクスポート時に座標変換が自動適用されます。

対応CRS:

  • WGS84 (EPSG:4326)
  • Web Mercator (EPSG:3857)
  • UTM 51N〜56N(日本周辺)
  • JGD2011 平面直角座標系 I〜XIX(EPSG:6669〜6687)全19系
  • ローカル座標(変換なし)

Voxel Downsampling(Web Worker化)

空間をvoxelSize単位のグリッドに分割し、各セルから1点だけ残す点群軽量化機能。Web Workerでバックグラウンド実行し、整数グリッドキーで高速化。全属性(position/color/intensity/classification)を保持したまま間引きます。200万点→17万点(91%削減)でもデータの形状は維持。大容量LiDARデータの軽量化やメッシュ化の前処理に使えます。

Delaunay メッシュ生成

点群データからdelaunatorライブラリによる2.5D Delaunay三角形分割でサーフェスメッシュを生成。XY平面に投影して三角形分割し、Z値は3Dで保持するため、航空LiDAR等の地形データに最適です。maxEdgeLengthパラメータで凸包アーティファクト(隙間に跨がる巨大三角形)をフィルタリング。200万点の三角形分割が約1.6秒で完了します。Show Mesh/Wireframe/半透明の表示切替に対応。

元座標オフセット保持

LASファイル読み込み時の座標メタデータ(センター座標・正規化スケール)を保持し、LAS/LAZエクスポート時に正規化を逆変換して元の地理座標を復元します。CRS変換と組み合わせることで、実測値での座標系変換が可能です。

出力7フォーマット + DXF + スクリーンショット保存

編集・フィルタリング後の点群データを多様な形式で出力可能です。

  • PLY (ASCII): 頂点座標+頂点カラー
  • GLB: Web3D・Blender互換
  • LAS 1.2: 227バイトヘッダー構築、元座標復元(LASOriginMeta逆変換)、Intensity / Classificationの保持対応、CRS変換対応
  • LAZ 1.2(圧縮): 自作 laz-perf.wasm による算術符号化高倍率圧縮。元座標復元、Intensity / Classification保持、CRS変換対応
  • PCD v0.7 (Binary): packed RGB float構成および座標系逆変換対応
  • XYZ / CSV: スペース区切り・カンマ区切りテキスト形式
  • DXF: 断面プロファイルの3Dポリラインとして出力。CADソフトで開ける
  • 📷 Screenshot: CanvasのWebGLバッファ(preserveDrawingBuffer)をそのまま高精度PNG画像として保存。

LAZ圧縮・高倍率エクスポート対応(自作WASM)

LAZ(LASの算術符号化圧縮)ファイルのインポート解凍だけでなく、自作した極小251KBの laz-perf.wasm によりブラウザ完結でのLAZ圧縮エクスポートに対応。 大容量のLASファイル(例: 398MB)も、画質や属性(Intensity/Classification/元座標)を一切落とさずに約82%削減(72.6MB)して高倍率圧縮出力できます。転送・保存コストを大幅にカット可能です。

完全ローカル処理

すべての処理(パース、3Dレンダリング、ノイズ除去、LAZ圧縮、書き出し)がブラウザ内で完結するため、外部サーバーへデータが送信される心配はありません。


使い方

  1. PLY / LAS / LAZ / PCD / XYZ / CSV ファイルをドラッグ&ドロップ(複数ファイル対応)

  2. 3Dビューで点群を確認。マウスドラッグで回転、スクロールでズーム

  3. 右パネルで各種操作:Point Size調整、Color Mode(Original / Height / Intensity / Classification)切替、Octree LOD有効化

  4. TOOLをBox Selectに切り替えてドラッグで範囲選択 → Delete Selectedで不要な点を削除

  5. TOOLをSectionに切り替えて点群上の2点をクリック → 厚さ調整後 Generate Section で任意角度の断面プロファイルを生成 → Export DXFでCAD出力

  6. TOOLをMeasureに切り替え、点をクリックして距離・面積を計測

  7. 必要に応じてApply SOR Filterを実行(進捗パーセンテージがリアルタイム表示されます)

  8. COORDINATE SYSTEMでSource CRS / Export CRSを設定

  9. EXPORTパネルから PLY / GLB / LAS / LAZ / PCD / XYZ / CSV / Screenshot を選択して出力

対応フォーマット

入力(6種類)

形式実装特徴
PLYThree.js PLYLoaderASCII / Binary
LAS自前パーサー1.0–1.4 / Format 0–3 / RGB / Intensity / Classification
LAZlaz-perf WASM → parseLAS圧縮LAS / 解凍進捗表示
PCD自前パーサーASCII / Binary / LZF圧縮
XYZ自前パーサースペース区切りテキスト
CSV自前パーサーカンマ区切り / ヘッダー自動判定

出力(7種類 + DXF + スクリーンショット)

形式特徴
PLY (ASCII)頂点座標+頂点カラー
GLBThree.js GLTFExporter
LAS 1.2Format 0/2 / Intensity・Classification保持 / 座標逆変換 / CRS変換対応
LAZ 1.2 (圧縮)自作251KB WASMによる算術符号化圧縮 / 大容量データを約8割軽量化 / Intensity・Classification保持 / CRS変換対応
PCD v0.7Binary / packed RGB float / 座標逆変換
XYZスペース区切りテキスト
CSVカンマ区切り / ヘッダー付き
DXF任意直線断面プロファイル 3D POLYLINE
PNGCanvas スクリーンショット保存

カラーモード(4種類)

モード表示
OriginalファイルのRGBカラー
Height HeatmapY座標に基づく青→赤グラデーション
IntensityLAS反射強度の自動正規化グレースケール
ClassificationASPRS分類コードに基づく色テーブル表示

技術スタック

  • Astro — 静的サイトフレームワーク
  • React Three Fiber — Three.jsのReactバインディング
  • Three.js (PLYLoader / GLTFExporter / OrbitControls) — 3Dレンダリング&PLY解析
  • TypeScript — 型安全な実装
  • 自前LASバイナリパーサー・エンコーダー (parseLAS.ts / exportLAS.ts) — LAS 1.0–1.4解析、LAS 1.2 227バイトヘッダー構築・座標逆変換書き出し
  • 自作極小 laz-perf WASM (laz-perf.wasm / compressLAZ.ts / decompressLAZ.ts) — C++ライブラリからビルドした極小WASM(251KB)によるブラウザ完結のLAZ解凍およびLAS→LAZ算術符号化圧縮エクスポート。進捗表示・Web Worker対応
  • 自前PCDパーサー・エンコーダー (parsePCD.ts / exportPCD.ts) — ASCII/Binary/LZF解凍、PCD v0.7 Binary packed RGB float書き出し
  • 空間ハッシュグリッド — SORノイズ除去の高速化(O(n²) → O(n × セル内点数))
  • SOR Web Worker (sorWorker.ts) — partial sort+整数グリッドキー+セル座標キャッシュ、Transferable zero-copy転送、キャンセル対応
  • Voxel Downsample Web Worker (voxelWorker.ts) — 整数キー化+Worker実行
  • Delaunay Mesh Worker (meshWorker.ts) — delaunatorによる2.5D三角形分割+maxEdgeLengthフィルタ
  • Octree全点LOD (octree.ts / octreeWorker.ts) — 全点(数千万点)で八分木空間分割(Web Worker)、カメラ距離ベース動的LOD選択+Frustum Culling、予算3M点固定バッファ、カメラ移動検知ベース更新(6フレームスロットル)
  • Fisher-Yatesサンプリング — 500万点上限のランダム間引き(非LODモード用)
  • 自前XYZ/CSVパーサー (parseXYZCSV.ts) — スペース/カンマ区切り、ヘッダー自動判定、RGB値域自動判定
  • Canvas WebGL Buffer Preserved (preserveDrawingBuffer: true) — 描画バッファ保持による確実なPNGスクリーンショット生成
  • proj4 (coordSystems.ts) — JGD2011全19系/UTM/WGS84/WebMercator座標変換。Vite静的解析回避の動的ロード
  • DXFエクスポート — 任意直線断面プロファイルを3D POLYLINEエンティティとして出力
  • CanvasTexture + Sprite (TextSprite) — 計測ラベルのWebGL直接描画。スクショに映る
  • Voxel Downsampling — 空間ハッシュグリッドによる均一間引き。全属性保持
  • LASOriginMeta — 読み込み時の正規化パラメータ保持。エクスポート時に地理座標復元

処理パイプライン


[入力] PLY / LAS / LAZ / PCD / XYZ / CSV ファイル(単数 or 複数)
→ FileReader → ArrayBuffer
→ LAZ: laz-perf WASMで解凍 → LAS互換ArrayBuffer(進捗表示付き)
→ フォーマット判別: マジックバイト(PLY/LAS/PCD) / 拡張子(XYZ/CSV)
→ パーサー振り分け: PLYLoader / parseLAS / parsePCD / parseXYZCSV
→ LAS: センタリング+正規化(測地座標→単位立方体)、Intensity自動判定、Classification抽出
→ PCD: LZF解凍(binary_compressed時)、NaNフィルタリング
→ 複数ファイル時は頂点データを結合
→ 500万点超: Fisher-Yatesランダムサンプリング(非LODモード用)
→ [3D表示] THREE.Points + PointsMaterial (vertexColors)
→ Octree構築(Web Worker): 全点で八分木空間分割(最大深度8、リーフ512点)
→ Color Mode切替: Original / Height Heatmap / Intensity / Classification
→ Slice: 軸別にMin〜Max範囲でフィルタリング
→ Section (任意直線断面): 2点クリック→垂直断面定義→ビン分割最高点抽出→プロファイル描画
→ Box Select: NDC投影でスクリーン座標判定 → マゼンタハイライト → 削除
→ LOD: 全点Octree + Frustum Culling + スクリーンサイズ判定 → カメラ距離ベース動的点選択(予算3M点)
→ Measure: Raycaster → 2点距離 / 3点面積 (ヘロン) + 3D Spriteラベル描画
→ SOR: Web Worker(partial sort+整数グリッドキー)→ リアルタイム進捗表示+キャンセル対応 → 外れ値除去
→ Voxel Downsample: Web Worker(整数キー化)→ 均一間引き
→ Mesh: Web Worker(delaunator 2.5D Delaunay三角形分割)→ maxEdgeLengthフィルタ → THREE.Mesh描画
→ CRS変換: proj4 Source→Export座標変換(JGD2011/UTM/WGS84)
→ [出力] 3列Grid UIレイアウト
├── PLY ASCII / GLTFExporter (GLB) / XYZ / CSV
├── LAS 1.2 (座標逆変換 / Intensity・Classification保持 / CRS変換)
├── LAZ 1.2 (自作 laz-perf WASMによる算術符号化圧縮 / 座標逆変換 / CRS変換)
├── PCD v0.7 Binary (座標逆変換 / packed RGB float)
├── DXF (任意直線断面プロファイル 3D POLYLINE)
└── Canvas Screenshot (PNG)

開発の経緯

iPhone ProのLiDARスキャナを使い、Scaniverseで身近な物をスキャンしたのがきっかけです。スキャンデータの形式を調べていく中で、Sketchfabにあった「粒々の謎データ」の正体が点群(Point Cloud)であることを知りました。

業務用の点群処理ソフト(TREND-POINT等)は100万円を超える価格帯ですが、中身を分解すると個々の機能は数学的にそこまで複雑ではありません。距離・面積計算、ヒートマップ表示、ノイズ除去フィルタ——高価なソフトの値段の大部分は、行政に提出して通る帳票フォーマットへの準拠やパフォーマンス最適化にあります。

「必要な機能だけ自作して、ブラウザ完結のツールとして公開する」という方針のもと、Point Cloud Viewerを実装しました。Stanford BunnyやVIRTUAL SHIZUOKAの大規模LiDAR点群データで動作検証を行っています。

今後の予定

  • Potree形式読み込み(Octreeタイルストリーミング)
  • Poisson Reconstruction(3Dサーフェス復元)
  • GPU Octree(WebGPU compute shader)
  • WebXR対応(Quest 3での点群VR閲覧)

更新履歴

  • [2026/08/27]: v10 — LAZ圧縮エクスポート対応(自作極小 laz-perf.wasm [251KB] により、ブラウザ内でLAS→LAZの算術符号化高倍率圧縮出力を実現。398MBのLASを72.6MBまで軽量化可能。ファイル名反映、進捗表示インジケーター・属性完全保持・CRS変換に対応)
  • [2026/08/26]: v9 — Octree全点LOD(サンプリング前の全点でOctree構築、カメラ距離ベース動的解像度、予算3M点)、buildOctree Web Worker化、カメラ移動検知ベースLOD更新(6フレームスロットル)、LOD表示点数リアルタイム表示、カラーモード・PointSize変更時LOD即時再描画、20M点以上の確認ダイアログ、非LOD表示上限5Mへ引き上げ、キーフレーム「Add KF」登録でアニメーション再生
  • [2026/08/25]: v8 — SOR Web Worker化+高速化(partial sort+整数グリッドキーで15分→数分)、SORキャンセルボタン、処理時間計測表示、Voxel Downsample Worker化、Delaunayメッシュ生成(2.5D三角形分割+ワイヤフレーム/半透明切替)、ジオメトリ再構築リファクタリング
  • [2026/08/24]: v7 — 任意直線断面プロファイル(2点クリック垂直断面+DXFエクスポート)、SOR非同期進捗表示(50,000点チャンク分割+リアルタイム進捗UI)、SOR時のIntensity/Classification全保持
  • [2026/08/23]: v6 — 計測ラベル3D表示(Sprite)、元座標オフセット保持(LASOriginMeta)、Voxel Downsampling
  • [2026/08/22]: v5 — ボックス選択+削除、断面ポリライン+DXFエクスポート、Octree LOD、座標系選択+CRS変換(proj4)
  • [2026/08/21]: v4 — Intensity/Classification表示、LAS/PCDエクスポート、スクリーンショット保存対応
  • [2026/08/20]: v3 — LAZ圧縮対応 & XYZ/CSVインポート/エクスポート 対応
  • [2026/08/20]: v2 — LAS/PCD フォーマット対応、200万点サンプリング、測地座標の自動正規化
  • [2026/08/19]: v1 公開 — PLY読み込み、ヒートマップ、スライス断面、計測ツール、SORノイズ除去、PLY/GLBエクスポート