TerraSlice 3D

Pick a region on the globe (draw it, or import KML/KMZ, Shapefile or GeoJSON) and build an interactive 3D block model. The model includes real terrain, satellite imagery, roads and rail, realistic buildings, and a layered subsurface that can come from presets or from real borehole logs. It also has analysis tools: cross-sections, flooding and groundwater.

Live app: https://quanta1985.github.io/terraslice3d/ (HTTPS, so Google Earth Engine sign-in works) · mirror: http://remosat.usth.edu.vn/~quanta/terraslice3d/

Run

The app needs no build step. Serve the folder and open it in Chrome or Edge:

python -m http.server 8000
# → http://localhost:8000

Features

Area	What it does
Region	Draw a polygon (D): a label at the cursor shows the area live and turns amber past 40 km² (the OSM-buildings and direct Earth Engine limit). Search places, import .kml/.kmz, a zipped shapefile, .shp + .prj or .geojson, or drop files on the map. You can export the region as GeoJSON.
Buildings	Procedural 3D (no key): OSM footprints extruded to their height, with gabled or pyramidal roofs (from roof:shape, or the default for houses). Three styles: Architectural white model (default), Urban materials (muted concrete, stone and terracotta; loud OSM colour tags are toned down) and Height ramp (pick a ramp; it stretches from 0 m to the region's tall buildings). All are lit like a massing model, with soft darkening at the base and optional thin edge lines. Photorealistic 3D Tiles: Google photogrammetry through a Google Maps API key (Map Tiles API) or a Cesium ion token. The key is stored only in the browser. Building heights from Google Open Buildings: run tools/gee_open_buildings_heights.js in the Earth Engine Code Editor, then import its GeoJSON. It fills OSM buildings that have no height and adds footprints OSM lacks.
Layers	Imagery (satellite / topo / streets), relief shading, vertical exaggeration, roads (Muted cartographic with casings by default, Monochrome light / dark, or Classic vivid; width ×), contours (interval, colour, line width), subsurface, and region isolation. Wireframe (W): replaces the imagery with an adaptive TIN of the terrain: many small triangles where the ground is rugged, a few big ones where it is flat. Faces are flat-shaded, edges are coloured by elevation, and a Mesh detail slider sets the tolerance (the triangle count is shown), and you can pick the colour ramp (9 ramps, legend shows the elevation range).
Subsurface	7 presets, seeded random columns, a layer editor, depth exaggeration, explode, undulation and X-ray. Borehole CSV import: layers come from the logs and thickness is interpolated between boreholes (IDW). 3D borehole logs are drawn in the model.
Analysis	Cross-section (X): a 3D section wall plus a report-ready 2D chart with layers, boreholes, water table and flood, exported as SVG / PNG / CSV. Flood (F): a water level with flooded area (% and km²). Groundwater (G): a water-table depth line. Clicking any point gives a virtual borehole.
3D objects	A toolbox of 19 preset shapes in four groups. Geotech: drill rig, borehole marker, piezometer, monitoring station, survey benchmark. Infrastructure: pylon, wind turbine, water tower, chimney, bridge pier. Nature: conifer, broadleaf tree, rock, flag. Generic: box, cylinder, cone, sphere and wall, sized in metres. Click a shape, then the model: objects can only be placed inside the region. Drag to move; set heading, scale, colour and label; duplicate or delete (Del).
View	Top / oblique / side / under / globe, ⟲ Reset view (R), ↺ Reset settings (every control back to its default; the region, boreholes and objects stay), PNG screenshot. North arrow: classic needle, compass rose, survey star or minimal; any corner, 44–140 px; it turns with the view, a click (or N) faces north, and screenshots include it.
Project	Save / open a .json project holding the region, layers, boreholes, section, objects and settings.

Building heights (Google Open Buildings)

Open Buildings v3 polygons have no height field. The heights come from the separate Open Buildings 2.5D Temporal raster (building_height, 4 m, 2016–2023). The script joins them; this route works for regions of any size:

1. Choose the region, then Layers → Human built-up → ⇩ GEE script (.js) (or ⧉ Copy & open GEE). The script already contains the region and the year / confidence / presence settings. Both buttons ask for a password once per browser tab (ask the author).
2. Paste it into the Earth Engine Code Editor and press Run. Check the map, then run the Drive export from Tasks and download the GeoJSON (height_m, height_max, confidence, source).
3. Build the model in TerraSlice, then drop the file on the map, or use Layers → Import building heights. Above 40 km² OSM buildings are not loaded, so the imported footprints are the buildings (up to 150,000; the largest are kept beyond that).

The plain template is tools/gee_open_buildings_heights.js (draw geometry yourself, or it uses the Hanoi demo).

Or fetch them directly (no export, no download): Layers → Human built-up → ☁ Fetch heights from Earth Engine signs you in with Google (OAuth popup) and runs the same query in your Earth Engine project for the current region (≤ 40 km², year 2016–2023). Nothing secret is stored in the app: the OAuth client ID is public, and the sign-in token stays in your browser. Google allows this only on HTTPS pages or http://localhost: use the GitHub Pages address above, or run locally with start_local.bat (Windows) / python -m http.server 8000 and open http://localhost:8000.

One-time setup in Google Cloud (project ee-quantrananhhumg1):

1. APIs & Services → Library: check that Google Earth Engine API is enabled.
2. Google Auth Platform → Branding / Audience: app name "TerraSlice 3D", audience External, and add your Google account under Test users.
3. Clients → Create client: type Web application; Authorized JavaScript origins https://quanta1985.github.io and http://localhost:8000 (add https://remosat.usth.edu.vn once that server's HTTPS works).
4. Copy the Client ID (…apps.googleusercontent.com; no secret is needed) into Earth Engine settings in the app.

What gets imported: every v3 footprint (confidence ≥ 0.65 by default, adjustable), plus, optionally, raster-only buildings: places where the newer 2.5D raster sees a building (building_presence > 0.5) outside every v3 polygon, vectorised at 4 m. The status line shows both counts so you can compare them with the Code Editor.

Merge with OSM: tagged or level-based OSM heights are kept; an OSM building matching one footprint takes its height; an OSM outline holding two or more footprints (a whole block mapped as one building) is replaced by those houses; unmatched footprints are added (6 m when they have no height).

Borehole CSV

id,lon,lat,layer,top,bottom
BH1,105.850,21.030,Fill,0,2
BH1,105.850,21.030,Soft clay,2,14

top and bottom are metres below ground. Columns can be in any order, separated by ,, ; or tab. Layers are ordered by their mean top depth. English and Vietnamese names (sét, cát, sỏi, bùn, đá vôi…) are coloured automatically. A layer missing from a borehole counts as 0 m thick there.

Shortcuts

D draw · B build · X section · F flood · G groundwater · W wireframe · T/O/S/U views · R reset view · N face north · Del delete object · H help · Esc cancel

Data sources

Esri World Imagery / Topo, AWS Terrain Tiles (Terrarium), OpenStreetMap via Overpass (with the maps.mail.ru mirror as fallback), Photon geocoding, and optionally Google Photorealistic 3D Tiles and Google Open Buildings (CC BY 4.0, imported as a file). These are public services with fair-use limits.

Limits

• OSM buildings and the direct Earth Engine fetch: regions ≤ 40 km². Larger regions get building heights through the GEE script + import (≤ 150,000 footprints). Only major roads above 60 km²; no OSM data above 2000 km².
• Terrain is about 30 m resolution at best and the sea floor is clamped to 0 m. Heights are above sea level; in 3D Tiles mode the subsurface is shifted by a sampled ground offset so it lines up with the mesh.
• Polygon holes and multi-part regions are reduced to the largest outer ring. Regions crossing the antimeridian are not supported.
• Without boreholes the soil column is conceptual (preset or random), not measured geology.

Copyright

© 2026 Tran Anh Quan · [email protected]

Test

node tests/geo.test.js

Files

geo.js geometry, soil model, borehole parsing/IDW, building-footprint import and merge · mesh.js building meshes and the adaptive TIN (RTIN) · profile.js section chart · terrain.js Terrarium heightmap provider · buildings.js procedural buildings (architectural / urban / height-ramp styles) · ramps.js colour ramps · wire.js wireframe TIN renderer · objects.js placeable 3D objects · tiles3d.js Google 3D Tiles · osm.js Overpass + roads · subsurface.js soil walls · analysis.js flood, groundwater, borehole logs · editor.js layer editor · io.js import/export/projects · project.js search, project save/open, file routing · gee.js Earth Engine sign-in, direct height fetch and the per-region Code Editor script · north.js north arrow · draw.js drawing · ui.js panel HTML · app.js wiring. geo.js, mesh.js, profile.js and the objects.js catalogue are pure and Node-testable. tools/gee_open_buildings_heights.js is the Earth Engine script.