Building Shadows Map — 3D Sun Shadow Simulator

Interactive 3D map showing directional building shadows and ambient occlusion. Adjust the sun position to change shadow direction in real time. All rendering happens on the GPU in your browser.

What this tool does

Renders real-time directional shadows on 3D building footprints using a GPU-accelerated pipeline combining projected footprint shadows with SDF-based ambient occlusion.

How to use

Pan and zoom to any city (zoom 14+). Adjust the Sun Direction X/Y sliders to change shadow angles. Fine-tune the look with Height Scale, Intensity, Blur, and AO controls.

Sun direction

X controls east-west sun position (negative = west light, positive = east light). Y controls north-south (negative = south light, positive = north light).

Shadow quality

Shadows include a built-in Gaussian blur for soft edges. Use the Blur slider to control softness and Intensity to control opacity.

Ambient occlusion

AO adds contact shadows at building bases for a grounded look. Adjust radius (how far the shadow extends) and intensity (how dark it is).

Privacy

All rendering happens locally in your browser. Map tiles are loaded from OpenMapTiles. No building or location data is ever sent to a server.

Frequently Asked Questions

How does the building shadow map work?

This tool uses MapLibre GL JS with a custom WebGL layer that renders directional building shadows and ambient occlusion in real-time. The shadows are projected based on the sun direction you set with the X and Y sliders, creating a realistic 3D shadow effect on building footprints.

Can I see shadows for any city?

Yes. The map uses OpenMapTiles vector tiles which include 3D building data for most cities worldwide. Pan and zoom to any location, and buildings with shadows will appear at zoom level 14 and above.

What do the Sun Direction X and Y sliders do?

X controls the east-west direction of the sun (negative = west, positive = east). Y controls the north-south direction (negative = south, positive = north). Together they determine the angle and length of building shadows.

What is ambient occlusion (AO)?

Ambient occlusion adds soft contact shadows at the base of buildings where they meet the ground, making them look more grounded and realistic. The AO Radius and Intensity sliders let you control how far and how strong this effect is.

Is my location data stored?

No. All map rendering and shadow calculations happen entirely in your browser. No data is sent to any server.