Skip to content
Back to projects
Released 2026 Web (offline)

Bioclimatic Sun-Shade Simulator

Interactive tool to size a solar shading device using the fiabitat method.

Bioclimatic Sun-Shade Simulator

About

A web app that visualizes in 3D and 2D plan how a brise-soleil (overhang or louvers) protects the user's actual home, positioned on their own satellite parcel. A poorly sized sun shade is useless: too short and it lets summer sun through (overheating); too long and it blocks winter sun (lost free heat gain). Slat angle must match noon solar altitude at the summer solstice — which ranges from 62° in Dunkirk to 72° in Perpignan. Pro tools (PHPP, Pleiades, TRNSYS) are expensive and overkill for a simple decision aid. This fully self-contained web app combines real-world location (Leaflet interactive map), real-time 3D modelling (Three.js with 4K shadow map), a drag-and-drop 2D plan editor, and four analytical views (stereographic sun-path, annual heatmap, gains cube, energy balance). The user draws their house (rectangle or polygon), configures windows by clicking on walls, applies the optimal fiabitat config for their latitude in one click, and plays the sun's path on any date. Educational tool — the balances do not replace a full RT/RE2020 thermal calculation.

Highlights

  • Single-file HTML, zero build: longevity and shareability guaranteed (no risk of npm install breaking in 5 years)
  • Simplified NOAA solar calculations (declination, equation of time, longitude correction) with automatic IANA timezone detection + DST
  • Hottel clear-sky irradiance model (DNI/DHI/GHI), corrected for the 8 French RT/RE2020 climate zones
  • OpenStreetMap and Esri World Imagery tiles composited into a canvas then used as a Three.js ground texture — the house sits on its real parcel
  • 4K PCF shadows computed in real time on the 3D scene
  • Four technical views: stereographic sun-path, annual heatmap, gains cube, energy balance
  • Right-handed Three.js coordinate system with X flipped to align with geography (East on the right when looking North)
  • Future work: Kasten-Linke turbidity model, real gable/hip roofs via straight-skeleton, PDF export of the energy balance

Gallery

04 visuals
Next project
Land Conquest
Turn the real world into your battlefield.