Fly it
Why I built it
The buildings
What's in it
Run it
Full tour
All of Chicago in 3D, in a browser tab. More than 100,000 buildings stand at their true heights,
built from City of Chicago and OpenStreetMap data, and their windows light up floor by floor as the
real sun goes down. You can fly it like a drone, ride the L, walk the Riverwalk at the water, or
drive Lower Wacker under the street.
Fly it: chicago-open-world.vercel.app. It works best
on a laptop or desktop with a recent browser.
Why I built it
I live in Chicago, and every map of it is flat. I wanted a city you could stand inside: the river
6.3 m below Wacker Drive where it really is, the lake at its real level, the double-decker streets
underneath the Loop, and a skyline you could check against the real one. The world is projected in
metres around State and Madison, the zero point of Chicago's address grid, so the HUD always knows
which corner you're over.
The first ten seconds
There are about sixty controls, and a first visit used to open all of them on one sheet, covering
the city. Now the city is the first thing you see, and a small card teaches three things by having
you do them: drag to look around, press W, A, S or D to fly, and press ⌘K to go somewhere. Each
step finishes when you actually do it, not when you read it. The full sheet is still one key away
on ?.
How the buildings are drawn
Every building in the city uses one shader. I didn't want a material per building, or even per
style: 100,000 buildings with their own materials would mean tens of thousands of draw calls,
and the target is to stay under 900.
facadeMaterial.js patches Three.js's standard
physical material through onBeforeCompile, so the buildings keep real lighting, shadows and
reflections while adding what a city needs:
- Façades from texture arrays. Eight Chicago façade families (brick walk-ups, limestone,
curtain-wall glass and more) live in one
sampler2DArray, and each building picks its layer
from an attribute. One texture binding covers the whole city.
- Windows that light by floor. At night each window cell hashes its position, but a whole
floor shares part of that hash, so offices light up a floor at a time, while homes like three-flats
light more sparsely and warmer. Frames and mullions stay dark, which is what makes an
all-glass tower read as glass.
- One set of uniforms for the whole city. Night, snow on the roofs, the fireworks' flashes on
the towers facing them, and Buckingham Fountain's show lights on its pools are all uniforms, so
changing the whole skyline costs one update.
How the city streams
The city covers 110 km², too much to load at once.
TileStreamer.jsx keeps detailed 500 m tiles near the
camera, simpler tiles for the rest of each 2 km block those sit in, and whole 2 km blocks beyond. Tiles decode
six at a time, nearest first, so the city fills in outward from where you are. The swap to a new
level of detail runs inside a React transition, which keeps the old tiles on screen until the new
ones are ready, so nothing blinks. The loading screen only waits for the tiles within 3 km.
What's in it
- The north-south spine from Wrigleyville to 35th Street, Western Avenue to the lake, with the top
50 towers checked against a curated list on every build
- The river and the lake at their real levels, the harbours with about 1,200 moored boats, and the
beaches
- Lower Wacker, Lower Michigan and the other streets under the streets, with their own traffic
- The L, Metra and eight bus routes in their true colours, on real headways, and rides from the
front window
- Wrigley, Rate Field, Soldier Field and the United Center, which light up and fill on real game
days. When a Chicago team wins, the skyline wears its colours until 2 a.m.
- Hand-modelled landmarks built in Blender from checked-in scripts, from Marina City to Buckingham
Fountain
- Three guide lenses (Visit, Live and Work) with 6,900 places, tours and commute times
The full illustrated tour, with every screenshot, every control and how each phase came together,
is in docs/TOUR.md.
Run it
git clone https://github.com/AllStreets/Chicago-Open-World.git
cd Chicago-Open-World
npm install --prefix pipeline && npm install --prefix app
npm run dev # http://localhost:5173
npm test # pipeline and app unit tests
The generated world (about 182 MB) is committed, so npm run dev works straight after install.
Because of that, the full history is a large download (about 500 MB). If you only want to run it,
git clone --depth 1 fetches just the current version.
To rebuild it from the source data, run npm run fetch, npm run textures and
npm run build:world.
The code is in three places: shared/project.js is the one projection both halves use,
pipeline/ turns public data into tiles at build time, and app/ is the Vite, React 19 and
React Three Fiber app.
Data
- City of Chicago Data Portal: Building Footprints (
syp8-uezg) and the City Boundary
(qqq8-j68g)
- OpenStreetMap: building heights and setbacks, water, parks, roads and their lower levels,
rail and street trees. © OpenStreetMap contributors, available under the
ODbL.
- Cook County 2017 LiDAR: the river and lake levels
- ESPN's public site API: team schedules and scores
Live CTA train positions are simulated on typical schedules for now, and the HUD says so.
License
MIT. See LICENSE.
