📄 Project Details
📋 Uploaded Files
FileTypeSizeFormat
⚙ Pipeline Status

    Creating Project...

    0%
    ✓
    Project created successfully!

    Project Manager

    Create a new diorama project by uploading DEM, shapefiles, and optional layers — or open an existing one

    + Create New Project
    ▲
    Drop DEM file here or browse
    GeoTIFF, DTED, ASC, HGT, IMG, NetCDF
      🏠
      Drop contour file here or browse
      Zipped SHP, GeoPackage, GeoJSON, KML/KMZ — contour lines with elevation attributes
        🗺
        Drop ortho image or browse
        GeoTIFF, ECW, MrSID, JPEG2000, JPEG, PNG
          📄
          Any additional files — reports, configs, metadata
          PDF, CSV, Excel, TXT, XML, JSON, or any other
            📂 Your Projects
            No projects yet. Create your first project to get started.

            DioramaStudio Workflow

            DEM IN → Interactive 3D diorama with hillshade, 40+ gradient ramps, satellite draping, contours & 4K export (PNG / JPEG)

            ↓ INPUTS REQUIRED

            • ▲
              DEM File (Digital Elevation Model)
              GeoTIFF (.tif), ASC (.asc), JSON grid — auto-detect extent, resolution, NoData
            • 🗺
              Satellite Imagery (auto-fetched) — ESRI World Imagery tiles
              Automatically downloaded from coordinates, draped on terrain with adjustable opacity
            Minimum: 1 DEM file. Satellite imagery and hillshade are generated automatically.

            ↑ OUTPUT DELIVERED

            • 🖼
              PNG — lossless, 4K (3840px wide), 300 DPI, print-ready
              High quality for reports, large-format print, and archival
            • 📷
              JPEG — compressed, 4K (3840px wide), 95% quality
              Lightweight for email, web, presentations
            • 🎨
              Interactive 3D Viewer — orbit, zoom, pan in real-time
              40+ gradient ramps, hillshade controls, V-exag slider, satellite draping
            Interactive 3D exploration with real-time controls, plus one-click 4K export for print-quality output.
            Input
            Geometry
            Analysis
            Enrichment
            Render
            Export
            1
            Input Ingestion & Validation
            Load, validate, harmonize all source files
            ▲ DEM Loading & Repair
            Read elevation raster, prepare terrain foundation
            Auto-detect: CRS, resolution, extent, NoData, vertical datum
            Repair: Void fill (IDW), smooth artifacts, normalize datum
            Resample: Bicubic upsample if resolution > 5m
            auto-detect CRSGDAL
            📋 Vector Layer Extraction
            Unzip, parse, classify, and repair all vector layers
            Unzip: .shp.zip → .shp/.shx/.dbf/.prj; also .gpkg, .geojson, .kml, .gdb, .dxf
            Classify: Auto-detect layer type by geometry + attributes
            Repair: Fix topology, reproject to match DEM CRS
            auto-classifyOGR/Fiona
            🗺 Orthoimagery (If Provided)
            Load aerial/satellite photo for terrain draping
            Load: GeoTIFF, ECW, MrSID, JP2, or WMS tiles
            Align: Warp to DEM extent and CRS
            Fallback: Procedural texture from slope + land cover if no ortho
            GDAL warpfallback procedural
            ✅ Completeness Check
            Score input quality, fill missing attributes with defaults
            Mandatory: DEM + 1 vector layer → proceed
            Scoring: Attribute completeness %, extent overlap check
            Defaults: Missing height → 6m residential, missing width → by road class
            auto-scoredefault fill
            2
            3D Geometry Construction
            Flat data → 3D scene geometry
            ⛰ Terrain Mesh from DEM
            Elevation grid → high-resolution 3D surface mesh
            Method: Planar grid with per-vertex elevation from DEM, up to 200×200 segments
            Vertical exaggeration: 1×–30× via interactive slider (default auto-scaled)
            UV mapping: Full 2048×2048 texture canvas for hillshade + gradient + satellite
            Three.js WebGLPlaneBufferGeometry
            🏘 Building Extrusion
            2D footprints → 3D buildings on terrain
            Height: 1) height_m attr, 2) floors × 3m, 3) default by type
            Base: Sample DEM at centroid for placement
            Roof: Gable for residential, flat for commercial (auto from type)
            procedural roofsextrude
            🛣 Road & Path Surfaces
            Centerlines → 3D road ribbons draped on terrain
            Width: From attr or default by class (highway 12m, primary 8m, track 3m)
            Draping: Buffer → sample DEM → offset above terrain
            Intersections: Auto-detect, smooth junction geometry
            profile drapeauto-width
            🌊 Water Bodies & Streams
            Water polygons → flat reflective surfaces
            Polygons: Flatten terrain, place water at mean elevation
            Streams: Buffer centerline → drape → water material
            Material: Semi-transparent blue with reflection
            auto-levelwater plane
            🪨 Smooth Diorama Pedestal
            Terrain perimeter extruded down with geological strata cross-section
            Extrusion: Bilinear-interpolated edge elevation, 300 horizontal segments, 16 vertical subdivisions
            Strata: 14-layer geological color column (topsoil → clay → sandstone → bedrock) with smooth interpolation
            Smoothing: 3-point moving average on edge positions, indexed geometry with computed normals
            Bottom face: Deep bedrock closure with wavy strata texture
            bilinear interpolationindexed mesh
            3
            Site Suitability Analysis
            Multi-criteria evaluation — which areas can be used, which cannot
            ⍑ Slope Analysis
            DEM → slope gradient → classify by steepness
            Compute: dz/dx, dz/dy from DEM → slope in degrees per cell
            Classes: Flat (0–5°), Gentle (5–15°), Moderate (15–25°), Steep (25–35°), Very Steep (>35°)
            Rule: Slopes >25° unsuitable for construction; >15° requires engineering review
            GDAL/NumPyauto-classify
            ▲ Elevation Zones
            Elevation bands → flood risk & access feasibility
            Low zone: <5m above water table → flood risk, avoid
            Mid zone: 5–50m → optimal for development
            High zone: >50m → access cost increases; >200m → impractical
            Buffer: Water body setback (30–100m from streams/coast)
            zone classifybuffer analysis
            🔎 Aspect & Drainage
            Sun exposure, water flow direction, accumulation
            Aspect: South-facing preferred (N. hemisphere) for solar exposure
            Flow dir: D8 algorithm from DEM → drainage pattern
            Accumulation: High flow areas → unsuitable (drainage channels)
            Curvature: Concave = water collects; convex = stable
            D8 flowaspect compute
            📍 Proximity Constraints
            Distance to roads, water, existing structures
            Road access: >500m from road → high access cost
            Water setback: Min 30m from streams, 100m from coast
            Structure buffer: Setback from existing buildings (zoning)
            Exclusion zones: Protected areas, hazard zones (from shapefiles)
            OGR proximitybuffer rules
            🎯 Weighted Overlay & Scoring
            Combine all factors → suitability score per cell
            Weights: Slope 35%, Elevation 20%, Proximity 20%, Drainage 15%, Aspect 10%
            Score: 0 (unsuitable) to 100 (ideal) per raster cell
            Classes: Suitable (≥70, green), Marginal (40–70, yellow), Unsuitable (<40, red)
            Output: Classified raster + polygon boundaries per zone
            MCE/AHPraster algebra
            📈 Suitability Map Overlay
            Color-coded zones draped on 3D diorama
            Green zones: Suitable — flat, accessible, drained, safe elevation
            Yellow zones: Marginal — moderate slope or partial constraints
            Red zones: Unsuitable — steep, flood-prone, inaccessible, or restricted
            Export: Suitability-overlaid diorama as PNG/JPEG
            color overlay3D drape
            4
            Scene Enrichment & Annotation
            Make the image self-explanatory
            🌲 Vegetation Placement
            Land cover → 3D trees and ground cover
            Placement: Poisson disk sampling within vegetation zones
            Trees: Parametric models sized by canopy attr or zone type
            Ground: Textured by land cover (grass, crop, bare soil)
            instanceddensity from attrs
            🎨 Terrain Texturing Engine
            Hillshade base + gradient overlay + satellite draping
            Hillshade: Sun azimuth 315°, altitude 45°, slope amplification ×4 — adjustable strength 0–100%
            Gradients: 40+ color ramps (terrain, sequential, diverging, bathymetry, analysis, aesthetic) at configurable opacity
            Satellite: ESRI World Imagery tiles auto-fetched and blended with hillshade + gradient
            Contours: Marching squares extraction with labeled elevation sprites
            2048×2048 canvasreal-time blend
            📌 Auto-Labels & Legend
            Every feature labeled from attributes
            Labels: Building name/ID, road name, water name, parcel ID
            Declutter: Priority-based, overlap removal algorithm
            Legend: Color-coded key for all layer types baked into image
            declutterattr-driven
            📐 Map Furniture
            Scale bar, north arrow, title block, grid
            Scale bar: Auto-sized, bottom-left
            North arrow: True north, top-right
            Title block: Project name, date, CRS, credits
            Grid: Coordinate overlay with labeled tick marks
            auto-placedoverlay
            5
            3D Rendering & Best Viewpoint
            Optimal camera + photorealistic render
            🎥 Auto-Viewpoint Calculation
            Find the single best camera angle for full site comprehension
            Bounding box: 3D extent of all geometry
            Camera: Oblique 30°–45° tilt, distance = 1.5× bbox diagonal
            Azimuth: Score 8 directions by visibility % + shadow readability
            FOV: 35°–50° — context without distortion
            auto-best-anglevisibility score
            ☀ Lighting Setup
            Sun, sky, shadows for clear 3D readability
            Sun: From site lat/lon, morning angle for readable shadows
            Sky: Soft gradient dome, no distracting clouds
            Shadows: Soft shadow maps, fill light to prevent black areas
            shadow mapsgeo-sun
            ⚙ WebGL Render & Export
            Interactive 3D scene + one-click 4K capture
            Engine: Three.js r128 WebGL with ACES Filmic tone mapping + sRGB encoding
            Export: Renders at 3840px wide (4K / 300 DPI) then restores to screen size
            Controls: Gradient selector, opacity, hillshade strength, V-exag (1×–30×) — all real-time
            Camera: OrbitControls — orbit, zoom, pan with damping
            Three.js WebGL4K export
            6
            Image Export & Delivery
            Final diorama with everything baked in
            🖼 PNG Export (Lossless)
            Full-quality — print, reports, zoom-in detail
            Resolution: 4K–8K, 300 DPI
            Baked in: 3D terrain, buildings, roads, water, trees, labels, legend, scale bar, north arrow, title block
            Size: 20–80 MB
            losslessprint-ready
            📷 JPEG Export (Compressed)
            Lightweight — email, web, presentations
            Resolution: 4K, 95% quality
            Size: 2–8 MB
            Same content: Identical view and annotations as PNG
            compressedshareable
            ✅ Self-Explanatory Output
            Zero narration needed — the image tells the story
            Labels: All features from shapefile attributes
            Legend: Color-coded layer key
            Scale + north: Spatial reference without GIS
            Metadata: CRS, datum, source, date on the image
            self-documentingzero-narration

            Input Quality → Output Accuracy

            DEM SourceResolutionVertical AccuracyDetail LevelBest For
            LIDAR0.5–1 m1–3 cmCurbs, walls, micro-featuresSite-scale engineering
            Drone Photogrammetry2–5 cm5–15 cmBuilding shapes, terrain detailConstruction, as-built
            National DEM (5m)5 m0.5–1 mTerrain shape, building massesPlanning, feasibility
            SRTM / ASTER30 m5–16 mBroad terrain onlyRegional overview

            Site Suitability Criteria & Thresholds

            FactorWeightSuitable (Green)Marginal (Yellow)Unsuitable (Red)
            Slope35%0–5° flat to gentle5–15° moderate>15° steep — requires cut/fill
            Elevation20%5–50m safe, accessible50–150m higher cost<5m flood risk / >150m impractical
            Road Proximity20%<200m from road200–500m moderate access>500m remote, high access cost
            Drainage15%Convex / well-drainedFlat / moderate flowConcave / high accumulation
            Aspect10%South/SE facing (solar gain)East/West facingNorth facing (shadow)

            Supported Vector Formats

            FormatExtensionNotes
            Zipped Shapefile.shp.zipMust contain .shp/.shx/.dbf/.prj
            GeoPackage.gpkgSingle file, multi-layer — recommended
            GeoJSON.geojsonAlways WGS84, good for web
            KML / KMZ.kml/.kmzGoogle Earth format
            File Geodatabase.gdb (zipped)Esri native, multi-layer
            DXF / DWG.dxf/.dwgCAD formats, needs CRS assignment
            GML.gmlOGC standard XML
            MapInfo TAB.tabMapInfo native

            Technology Stack

            Three.js r128WebGL 3D rendering, mesh construction, materials
            GeoTIFF.jsClient-side GeoTIFF DEM parsing
            Canvas 2D API2048×2048 terrain texture compositing
            ESRI World ImagerySatellite tile fetching and terrain draping
            IndexedDBClient-side file storage for DEM data
            Marching SquaresContour line extraction from elevation grid
            OrbitControlsInteractive 3D camera (orbit, zoom, pan)
            40+ Color RampsArcGIS/QGIS-style gradient presets
            Loading project...
            Reading DEM file

            Project Viewer

            Location

            Display Controls

            %
            %
            x

            Contour Lines

            px
            m

            View Update

            Barren Island Volcano — India

            Copernicus DEM GLO-30 (TanDEM-X) | 12.24°–12.32°N, 93.82°–93.90°E | V-exag: 1.0x | EPSG:4326 v3.5

            Barren Island, Andaman Sea

            DEM: Copernicus GLO-30 (TanDEM-X)
            Grid: 200 × 200 points (~8.9 km × 8.9 km)
            Resolution: 30m | V-accuracy: ±4m
            Elevation: -11.7m to 355.2m
            Summit: 355m (active volcano)
            Vertical exaggeration: 1.0x
            Datum: WGS84 + EGM2008 geoid
            India's only active volcano
            Controls: Left-drag orbit | Right-drag pan | Scroll zoom

            Terrain Legend

            Ocean (≤0m)
            Beach / Coast (0–10m)
            Coastal Vegetation (10–80m)
            Rocky Slopes (80–200m)
            Volcanic Rock (200–300m)
            Crater / Summit (>300m)
            Exposed Strata (sides)

            Screenshots & Uploads

            Upload screenshots or exported images to review and compare.

            📷
            Drop images here or click to upload
            PNG, JPG, WebP supported