システム構成

KASUGAI Canvas（CesiumJS + Three.js）をローカルPC・サーバーレス・国内対応・組み込みで動かすための構成についてまとめる章。

全体の判断基準

描画基盤：CesiumJS + Three.js
描画方式：CesiumJS の Viewer / Scene 内でレイヤー・深度・カメラを一括管理。Three.js は点群・3DGS・特殊メッシュ用に補完
2D / 3D 混在、点群、3DGS、Tiles/Buffers を同一 GPU 空間で扱う
ドレープ（2D を 3D 地形に貼り付け）、クリッピング、断面表示などの現場機能
日本国内の PLATEAU / 地理院タイル との親和性
ローカルPC完結・サーバーレスで動作

KASUGAI Canvas 基本構成

┌────────────────────────────────────────────────────────────┐
│                     KASUGAI Canvas                         │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  3D 地球描画層  CesiumJS                             │  │
│   - Viewer / Scene / Globe / ImageryLayerCollection     │  │
│   - ImageryLayer (XYZ / TMS / WMS)                      │  │
│   - Cesium3DTileset (PLATEAU / 3D Tiles)                │  │
│   - TerrainProvider (DEM / CesiumWorldTerrain)          │  │
│   - Entity / DataSource / Primitive (GeoJSON / 図面)    │  │
│   - ClippingPlaneCollection (断面カット)               │  │
│  └──────────────────────────────────────────────────────┘  │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  補完 3D 描画層  Three.js                            │  │
│   - GLB / 点群 / 3DGS レンダラー                        │  │
│   - Cesium の Scene 内 or オーバーレイで連携           │  │
│  └──────────────────────────────────────────────────────┘  │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  ロード・変換層  loaders.gl + Web Worker             │  │
│  │   - GPKG (sql.js + WKB パーサー) / GeoJSON → Arrow/FlatBuffers（FGDBはサーバー or 事前変換）            │  │
│  │   - PLY/LAS → EPT / 3D Tiles / PointCloud            │  │
│  │   - GLB / 3D Tiles → VRAM                            │  │
│  └──────────────────────────────────────────────────────┘  │
│  ┌──────────────────────────────────────────────────────┐  │
│  │  接続層  KASUGAI Connect                             │  │
│  │   - ローカル File / D&D / Box API / Re:Earth     │  │
│  └──────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────┘

ローカルPCで爆速操作する構成

メインレンダラー：CesiumJS + Three.js

CesiumJS
- 3D 地球・3D Tiles・DEM ドレープ・XYZ 重ね合わせを同一 Scene で一括描画
- ImageryLayerCollection で XYZ / TMS / WMS の重ね順を管理
- Cesium3DTileset で PLATEAU 等の大規模 3D Tiles を LOD・カリング
- TerrainProvider で DEM / 標高PNG / CesiumWorldTerrain を 3D 地形化
- ClippingPlaneCollection で 3D Tiles・点群の断面カット
Three.js
- GLB / 点群 / 3DGS 等、Cesium 単体では扱いにくい高度な 3D 表現を補完
- Cesium の Scene 内で連携（正式仕様）
- オーバーレイ canvas はプロトタイプ・障害切り分け用に限定
loaders.gl
- @loaders.gl/arrow, @loaders.gl/3d-tiles, @loaders.gl/gltf などでバイナリを GPU へ

データパイプライン

段階	技術	効果
読み込み	File / Blob / Box API	サーバー不要、ローカル完結。GPKG/FGDB/GLB/LAS/PLY/SPZ 等をそのまま読み込み
変換	Web Worker + Arrow-JS / sql.js + WKB パーサー、FGDB は ogr2ogr サーバー/事前変換	UI ブロックなしで GPKG/GeoJSON → Arrow、FGDB → 事前変換、PLY/LAS → EPT/3D Tiles
永続化	OPFS / IndexedDB	次回起動を即座に行える
描画	CesiumJS + Three.js	同一 `Scene` / 同一 GPU 空間で 3D 地球・地形・3D Tiles・XYZ・点群を重ね描画

必須テクニック

GeoArrow / FlatBuffers
- 数十万〜数百万点の 2D ベクトルを CPU パースなしで GPU へ
Web Worker + loaders.gl
- GPKG/GeoJSON → Arrow、FGDB → サーバー or 事前変換、PLY/LAS → EPT/3D Tiles をバックグラウンド化
OPFS / IndexedDB
- 巨大バイナリをブラウザ内にキャッシュ
CesiumJS + Three.js 連携
- CesiumJS の Scene 内でカメラ・深度・レイヤー順を共有（正式仕様）
- 重ねた canvas は正式な混在レイヤー管理には使用しない

KASUGAI システム組み込み構成

コアエンジン

CesiumJS + Three.js + loaders.gl
- cesium (npm) または Cesium.js ビルド
- three + 必要に応じて gaussian-splats-3d
- @loaders.gl/3d-tiles, @loaders.gl/gltf, @loaders.gl/arrow

組み込むべき CesiumJS 機能

ImageryLayer / UrlTemplateImageryProvider：XYZ / TMS / WMS を 3D 地球 / 地形へドレープ
TerrainProvider / CesiumWorldTerrain：3D 地形を構築
Cesium3DTileset：PLATEAU 等の 3D Tiles を LOD 描画
ClippingPlaneCollection：3D Tiles・点群の断面カット
GeoJsonDataSource / Entity：2D 図面・境界の 3D 表示

データパイプライン

ローカルファイル (GPKG / GeoJSON / GLB / LAS / PLY / SPZ) + FGDB（事前変換）
    ↓
Web Worker or サーバー変換（ブラウザ: sql.js + WKB パーサー / Arrow-JS、サーバー or 事前: ogr2ogr / Potree Converter / entwine）
    ↓
FlatBuffers / GeoArrow / TypedArray / 3D Tiles / EPT (VRAM)
    ↓
CesiumJS + Three.js GPU Render

ロードマップ案

Phase	内容	効果
1	CesiumJS ベース構築 + ImageryLayer / TerrainProvider	XYZ / DEM / 地形表示を高速化
2	Cesium3DTileset 統合 + ClippingPlaneCollection	PLATEAU 等の大規模 3D Tiles・断面表示
3	Three.js 統合 + 点群 + 3DGS	点群・3DGS 可視化を補完

日本国内向け構成

推奨構成

描画基盤：CesiumJS + Three.js + loaders.gl
- 国土地理院タイル（XYZ / 標高PNG）を ImageryLayer / TerrainProvider で合成
- 国交省 PLATEAU（3D Tiles 1.1 / GLB）を Cesium3DTileset / Model で直接ロード
- 点群・3DGS は Three.js 側で補完
参考・相互連携：Re:Earth (OSS)
- PLATEAU 等のデジタルツイン可視化で参考になる OSS ツール（PLATEAU 公式基盤ではない点に注意）
- データエクスポート/API 連携を担保

日本現場機能セット

国内データ	組み込む技術	現場効果
地理院 DEM + 2D図面	Cesium `TerrainProvider` + `ImageryLayer`	平面図を標高にぴったりドレープ
PLATEAU + 現場BIM/CIM	Cesium `Cesium3DTileset` + `ClippingPlaneCollection`	建物・敷地の断面・クリッピング
i-Construction 点群	Cesium `Cesium3DTileset`（pnts）+ Three.js `Points` / Potree	点群を高さスライスで施工管理
写真測量 3DGS	Three.js 専用レンダラー	現場状況をニューラル表現で可視化

サーバーレス・ローカル起動

HTTP サーバーが使えなくても KASUGAI Canvas はクライアント完結で動作可能。

データ読み込み手法

方法	概要
File / Blob / ArrayBuffer 直読	ドラッグ&ドロップ or ファイル選択。HTTP（fetch）不要、CORS なし
OPFS / IndexedDB	ブラウザ内にバイナリをキャッシュ。オフラインでも爆速起動
PWA (Service Worker)	内部で HTTP リクエストを横取りし、ローカル/Zip から返す
Tauri / Electron	デスクトップ化し、Tauri は `tauri://`、Electron は `file://` またはカスタムプロトコルで安全に読み込み

KASUGAI × Box 構成

Box を CDE（保存領域）、KASUGAI Canvas を可視化エンジン
Box API / Direct Download / ローカルファイルからデータを読み込み
可視化結果は KASUGAI Canvas 内で表示・スクリーンショット・URL 共有