Turn a map into somewhere you can go.
I wanted to make the Berlin I know explorable in the browser: drive towards the Brandenburg Gate, find Berghain on foot, or take a helicopter over Tempelhofer Feld. The Ringbahn gave the project a natural boundary, connecting distinct neighbourhoods into one continuous world.
My work focused on translating Berlin’s geography into the simulation: a map-data pipeline, procedural buildings that follow real footprints, 14 custom landmarks, and routes between 25 destinations. The challenge was making a large geographic dataset feel like a place you recognise and want to explore.
Real geography becomes the structure.
The city starts with OpenStreetMap. Streets, building footprints, courtyards, parks, water and railways were collected through the Overpass API and a regional Geofabrik extract. The dataset contains more than 67,000 building and building-part records, 105,000 road and path segments, and 90,000 individually mapped trees.
Those geographic coordinates are converted into the simulation’s 3D space. The expansion follows the actual S41/S42 rail loop, while preserving road junctions, one-way directions and open courtyards. That connectivity matters: a street has to work for driving and navigation as well as look right on a map.
A city built from rules.
Building outlines become 3D geometry, using mapped heights and floor counts where available, with estimates filling the gaps. Procedural rules supply facade patterns, windows, roof details and vegetation. This makes it possible to populate whole neighbourhoods without individually modelling every building.
Three.js and WebGPU render the world, with TSL shaders generating surface detail and materials. The combination gives the city a real geographic structure and a consistent visual language as you move from street level to the skyline.
The details that make it Berlin.
Landmarks needed more individual attention. Berghain became a detailed procedural model built from its mapped footprint and photographic references: tall industrial windows, weathered plaster, layered graffiti, fencing and an overgrown approach. Tempelhofer Feld keeps its former runway surfaces, and the Spree follows its mapped banks.
I also refined how the city feels to explore. Police sirens come from nearby moving cars at intervals. Searching the map and clicking a destination takes you there and closes the overlay. Berlin street names, local vehicle liveries and neighbourhood arrival points carry the setting through the smaller interactions.
Making the scale manageable.
The expanded city groups buildings and street geometry into 750-metre cells so the renderer can skip distant areas. Repeated objects share geometry through instancing, and night lights are selected from nearby spatial cells. These choices let the simulation reuse its rendering systems across a much larger mapped world.
Validation covered clear arrival points, camera sightlines and 61 directed route checks across the city. I used AI-assisted development throughout, directing the scope, visual references and interaction changes, then reviewing the results in the browser. The work brought together geospatial data, procedural graphics and close attention to a city’s character.