Explore how building placement, orientation, terrain, season and time affect direct sunlight across a real-world site.

Sun Arise combines interactive 3D mapping with an independent solar-analysis engine. Buildings can be positioned and rotated on real-world terrain while the application models direct sunlight through time. Now mode synchronises an analytical sunlight field with animated 3D shadows, while Whole day mode calculates accumulated direct-sun exposure across the site.

Analysis

The solar engine is deliberately independent of the renderer. Sun position and shadow occlusion are computed geometrically against building volumes rather than read back from the rendered scene, so the drawn shadows and the analysis are two systems that agree rather than one derived from the other.

Ground samples are taken across a two-metre grid and placed on sampled terrain heights, so the analysis follows the real surface rather than a flat plane. Now mode evaluates that grid against a single sun position and tracks the clock; Whole day mode accumulates direct sun across the civil day on a fixed hourly scale, so seasons stay comparable instead of being normalised against each other.

Any point can be inspected exactly rather than by its nearest grid cell, reporting its sun and shade intervals and how the same spot compares across summer, equinox and winter. A placement can be saved and the building moved, with the two positions measured over the same ground. Dates and times are handled as civil time at the site, including daylight saving, separately from the astronomical calculations.

Now mode reports whether a point has a clear line to the sun and how high the sun is. It shows relative sunlight strength, not irradiance: there is no validated atmospheric model behind it, so no energy figures are claimed.

Build

React and TypeScript over CesiumJS, with Cesium World Terrain and satellite imagery. Scene state is held in a store and reconciled into the globe by key, keeping the renderer and the application model separate. The solar engine is pure TypeScript with no Cesium or UI dependencies, which is what makes it directly testable under Vitest.

Tech

React, TypeScript, CesiumJS, Vite, Vitest

Now mode: the sunlight map at 14:15 with the building's shadow across the site

Now — direct sunlight at a moment in time

Whole day mode: accumulated hours of direct sun across the site, with the shaded band beside the building

Whole day — accumulated hours of direct sun