Helioscape V1
An industry-grade web studio that empowers homeowners to design their own solar system in under five minutes — 3D reconstruction from satellite imagery, drag-and-snap panel layouts that respect real-world obstructions, hour-by-hour shading simulation, and 25-year financial models accurate to within ±2.1% of installed yield.
⚙️
Tech Stack
Three.js + React Three Fiber
drei + react-three-postprocessing
Node.js orchestration layer
🧠
Core Technologies
- React Three Fiber — Declarative 3D scene graph
- Three.js — Roof mesh, panel instancing, shadow shaders
- Mapbox GL — Satellite imagery & address autocomplete
- Next.js — SSR shell + API routes
- WebGL2 + GLSL — Custom irradiance heatmap shader
📦
V1 Deliverables
✓
Address-to-3D reconstruction in under 5 seconds
V1✓
Roof-geometry editor with vertex-level editing
V1✓
Drag-and-snap panel editor with auto-fill suggestions
V1✓
Obstruction & setback enforcement (chimneys, vents, fire code)
V1✓
Annual sunlight heatmap with hour scrubber
V1✓
Battery sizing & self-consumption simulator
V1✓
25-year financial projection with ITC, escalation, IRR
V1✓
Frontend integrations with irradiation / financial / orchestration backends
V1→
AR walk-around on mobile (WebXR)
V2→
Multi-roof commercial mode
V2→
Installer-facing CAD export (DXF, PDF permit packs)
V2→
Real-time monitoring tie-in (Enphase / SolarEdge / Tesla APIs)
V2→
ML-driven obstruction detection (skylights, dormers, satellite dishes)
V2
🏛
Architecture Layers
FRONTEND
React · Next.js · React Three Fiber · drei · TanStack Query
3D ENGINE
Three.js · WebGL2 shaders · instanced meshes · BVH raycasting
INTEGRATIONS
Irradiation API · Financial engine · Orchestration backend · Mapbox
OPS
Vercel edge · Cloudflare R2 imagery cache · Sentry · Datadog RUM