MicroScape
Urban Microclimate Simulator · CFD Wind Engine · Three.js 3D + D3.js 2D · Real-Time Thermal Comfort
Play Simulator
MicroScape is an urban microclimate simulation tool that runs directly in the browser. A browser-based urban microclimate tool that lets city planners and designers evaluate wind flow, surface temperature, and comfort without any CFD expertise. Configure a city grid, paint buildings and surfaces, run the simulation, and explore results in real time — all in a single-page web app.
Core Stack
- Three.js WebGL (3D) · D3.js SVG (2D) · SOR CFD solver · Penman-Monteith physics model
5-Step Simulation Workflow
- Configure — Set grid dimensions, climate month, latitude/longitude, 24-hour temperature and humidity curves, wind speed and direction
- Map Build — Click to place buildings (assign floor height) or paint 12 surface types — asphalt, grass, trees, water, and more
- CFD Wind — SOR iterative solver computes Laplace wind field · ω = 1.75 · up to 800 iterations · 1e-6 precision threshold
- Microclimate — Solar radiation + convective heat transfer + Penman-Monteith evapotranspiration + longwave radiation → surface temp, air temp, humidity, PET
- Visualize — Switch 2D / 3D, select any of 5 data layers, drag time and height sliders for instant real-time redraw
CFD Wind Engine & Physics Model
- SOR solver iterates Laplace equation (∇²φ = 0) to produce a full-grid wind velocity field · logarithmic wind profile scales speed by surface roughness class
- Solar altitude and azimuth calculated from latitude, longitude, and hour · atmospheric transmittance adjusts incoming shortwave radiation per cell
- Surface energy balance: absorbed radiation = convection + evapotranspiration + longwave emission · exponential height decay exp(-h/5) models vertical temperature gradient
5-Layer Visualization & Real-Time Controls
- Wind Speed — color gradient heatmap + quiver-plot vector arrows showing flow direction and magnitude across the grid
- Surface Temperature / Air Temperature — per-cell thermal result rendered as a continuous color scale with legend
- Humidity — relative humidity distribution accounting for evapotranspiration from vegetation and water surfaces
- Thermal Comfort (PET) — Physiological Equivalent Temperature combines wind chill, radiant heat, and humidity into a single human-readable comfort index
- Time slider 0–23h · height slider with nearest-neighbor interpolation · color-scale legend auto-ranges to current dataset
3D / 2D Dual Canvas Rendering
- 2D canvas (D3.js SVG) — color grid cells + quiver-plot arrows for fast overview across the full simulation domain
- 3D canvas (Three.js WebGL) — BoxGeometry buildings, Cone+Cylinder trees, ArrowHelper wind arrows, OrbitControls touch and mouse orbit
- heightScale exaggeration 1–10× amplifies building height differences · wind compass indicator shows real-time direction angle · performance warning auto-detects fast / medium / slow grid sizes
Responsive Interface & Interaction Design
- Three-column layout — collapsible left control panel (expanded on desktop, folded on mobile) · central canvas · floating right toolbar
- Below 700px switches to mobile layout · touch-gesture 3D orbit controls via OrbitControls · brush system: 1×1 single cell or 3×3 group for fast surface painting
