DEM to GLB Converter

Pixels per tile side

System Architecture & Pipeline

Universal DEM-to-3D Pipeline
├── Data Layer (Source)
│   ├── Source GeoTIFF (.tif) ────────▶ Elevation (UTM or Geographic)
│   └── Orthophoto / Satellite ───────▶ Texture Source (RGBA/RGB)
├── Coordinate Engine (Proj4js)
│   ├── CRS Detection ────────────────▶ Auto-identify UTM/Projected Systems
│   └── WGS84 Reprojection ───────────▶ High-precision Geographic Mapping
├── Processing Engine (Loam / GDAL-WASM)
│   ├── Metadata Extraction ──────────▶ Transform, NoData (Geotiff.js)
│   ├── Geographic Clipping ──────────▶ -projwin (Crop Texture to DEM)
│   └── Resampling ───────────────────▶ -outsize (Manage Vertex Density)
├── 3D Reconstruction (Three.js)
│   ├── Vertex Mapping ───────────────▶ Z = Elevation (Absolute or Relative)
│   └── Topology Filtering ───────────▶ Face Removal (Drop NoData Pixels)
└── Export & Verification
    ├── GLTFExporter ─────────────────▶ Binary GLB Production
    └── Structural Audit ─────────────▶ Mesh Integrity & Elevation Check

Processing Logic Path

[ SOURCE GEOTIFF ]
       │
       ▼
┌──────────────────────┐      ┌──────────────────────────┐
│  GEOTIFF.JS / LOAM   │ ───▶ │   GEOTRANSFORM & CRS     │
│  (Metadata Loader)   │      │   (Raw UTM Coordinates)  │
└──────────┬───────────┘      └────────────┬─────────────┘
           │                               │
           ▼                               ▼
┌──────────────────────┐      ┌──────────────────────────┐
│    PROJ4JS LAYER     │ ───▶ │   WGS84 BOUNDS OFFSET    │
│ (CRS Transformation) │      │   (Precise Lat/Lon Box)  │
└──────────┬───────────┘      └────────────┬─────────────┘
           │                               │
           ▼                               ▼
┌──────────────────────┐      ┌──────────────────────────┐
│    DEM RESAMPLE      │      │   SATELLITE/ORI FETCH    │
│  (-outsize 1024px)   │      │   (Geographic Alignment) │
└──────────┬───────────┘      └────────────┬─────────────┘
           │                               │
           ▼                               ▼
┌──────────────────────┐      ┌──────────────────────────┐
│   FLOAT32 DATA       │      │   CANVAS MATERIAL        │
│  (Elevation Map)     │      │   (Aligned RGBA Texture) │
└──────────┬───────────┘      └────────────┬─────────────┘
           │                               │
           └───────────────┬───────────────┘
                           │
                           ▼
              ┌────────────────────────┐
              │  THREE.JS CONSTRUCTOR  │
              │  (Mesh Generation)     │
              └────────────┬───────────┘
                           │
           ┌───────────────┴───────────────┐
           ▼                               ▼
┌──────────────────────┐      ┌──────────────────────────┐
│ SCALING: ABS/RELATIVE│      │   ARTIFACT FILTERING     │
│ (User Toggle)        │      │   (Drop NoData Faces)    │
└──────────┬───────────┘      └────────────┬─────────────┘
           │                               │
           └───────────────┬───────────────┘
                           │
                           ▼
              ┌────────────────────────┐
              │     GLTF EXPORTER      │
              │  (Binary Pack GLB)     │
              └────────────┬───────────┘
                           │
                           ▼
              [ VERIFIED 3D ASSET ]

References