From an OpenStreetMap row to a shaded pixel

The planet is cut into cells, not squares

Most web maps cut the world into a Mercator grid, which stretches badly toward the poles and forces a projection choice on you. CityMap3D cuts the sphere itself into cells instead.

A cell is a region of a real sphere. Near the equator and near the pole it covers a comparable area, so the tile that reaches your camera carries the amount of detail that distance deserves, not the amount the projection happened to leave there. More on that in OpenStreetMap as a 3D globe, not a flat map.

Every tile is geometry, at every zoom

There is no raster fallback anywhere in the pipeline. Near, far, at orbit: a tile is polygons, heights and colours, never a picture of them.

That is what lets a palette hold to the horizon. A restyled map does not fade back into somebody else's baked PNG at the point where the detail stops mattering, because there is no PNG.

Tiles travel as a binary format built for the job rather than as text, and decoding runs off the main thread, so the map stays under your finger while it loads.

Detail follows the real distance, in three dimensions

Each visible tile gets a level of detail computed from its true camera-to-tile distance, not from a zoom slider, and not from a flat-map approximation that ignores how high the camera sits.

Above the ground, objects are packed into instanced meshes pooled across every loaded tile, so thousands of trees, lamps and markers reach the GPU as a handful of submissions rather than as thousands of them.

The load adapts to the device it runs on

A closed loop watches the frame the engine actually delivers and adjusts how much work is in flight. It measures the frame it delivers and takes work off itself until the frame fits.

Nobody has to guess what your users carry, and nobody has to pick a quality tier for them.

The sky is computed from your date and your place

Sun position comes from the coordinates and the timestamp you pass. The moon shows the phase of that exact night, with its terminator and its parallactic rotation. Above them a catalogue of 1 660 real stars and the 88 classical constellations rotates as it would for an observer standing there.

The sun then drives every directional light in the scene: the shadows, the tint of the air, the glow around the sun itself, the colour of the next pixel. Set the date to golden hour and the whole map moves with it.

What the picture is made of

The renderer is a high dynamic range (HDR) pipeline, and what it buys you is visible rather than technical:

• Cascaded shadows that stay sharp near the camera and hold at distance
• Ambient depth, so alleys, doorways and recesses darken the way they would
• Atmospheric fog that hazes distance without flattening a canyon
• A sun and moon glow pinned to where the sun actually is
• Filmic tonemapping, then a grading stage that re-tones the whole engine to your palette

The chain is composable and nothing in it is hidden from you: replacing a shader chunk is a supported thing to do, not a fork. See restyling the map at runtime, with no rebuild.

Tiles arrive while you watch

A tile that is not generated yet answers 202; the client subscribes over a WebSocket and is notified the moment the tile is ready to download. No polling loop, no refresh: how live tile updates work.

What this is built on

The world is compiled ahead of time on our infrastructure and served as tiles; the renderer runs on WebGL 2.

Map data comes from OpenStreetMap and its contributors, under the Open Database Licence. Our work is to turn that data into a 3D map: which OpenStreetMap tags become 3D geometry.

Read on: what you plug in: canvas, scene and camera.