After working on several similar projects that share the same idea of identifying which areas receive the most sunlight over a specific period, I decided to create a simulation.
It uses the existing shadow mapping technique to cast shadows, but instead of calculating shadows for a single moment, it continuously accumulates sunlight exposure by changing the sun’s direction throughout the year. The accumulated results are then converted into a heatmap showing which areas receive the most sunlight over the selected period.
This is especially useful for determining optimal solar panel placement.
The shadow accumulation computations are performed using WebGPU, so WebGPU support is mandatory. This is primarily an experiment with WebGPU rather than a production application, since WebGPU may be disabled by default or unavailable in some browsers.
I’ve included four demos where you can experiment with the shadow accumulation visualization:
- Manhattan: A dense urban area with crowded skyscrapers.
- Residential Area: Houses with different roof shapes and orientations.
- Natural Terrain: A landscape with varying elevations.
- Solar Panel Array: An array with draggable obstructions to experiment with how shadows affect sunlight exposure.
Demo link: https://shadowmap-accumulation.netlify.app/