CityLab

CityLab · playable browser cities

Every city here starts at the station.

CityLab builds places you arrive in by train. You do not spawn on a street corner. You ride in, watch the city grow in the window, and step off when it looks interesting. Then the place is yours: drive it, sail it, fish it and build on it.

1 line running, 1 on the board

Evening on the coast west of Calder. Pine woods run down to a beach, a red suspension bridge crosses a river mouth, and the city's towers stand at the end of the shore under a jagged mountain range.
Ride 01, the coast west of Calder, a little after six.

Departures

The board

Each line is a city you can play in your browser. They share a loader, a copy of Three.js and a robot named Seven. New lines are added to the board as they open.

  1. 01 Shoreline Limited Granite Pass to Calder Union On time
  2. 02 Next line Calder has an elevated loop, a harbour and a ferry that crosses the bay. Something will leave from one of them. Later

The cities

Where each line goes, and what you can do there

Evening on the coast west of Calder. Pine woods run down to a beach, a red suspension bridge crosses a river mouth, and the city's towers stand at the end of the shore under a jagged mountain range.

Ride 01 · Calder · build 1.13.2

Shoreline Limited

Granite Pass to Calder Union

What if you arrived in a city by train, and then never had to leave?

Seven boards a streamlined train at a snowy mountain pass and rides it down through the pines, along the sea and into a city called Calder. Step off anywhere. Fish from a boat, run the rails as a little locomotive, call two transforming cars, cut trees and build a town of your own with power from the old telegraph line.

  • Ride
  • Explore
  • Boat and fish
  • Rail
  • Drive
  • Build
  • Snowy peaks
  • Glacial lake
  • Pine forest
  • Meadows
  • Lava and sandstone coast
  • Reef
  • City
  • 12 kmof track in one circuit, with a balloon loop at each end
  • 4stations, from a snowed-in chalet to a clock-tower terminal
  • 4shapes for Seven: robot, boat, locomotive and engine
  • 8blueprints, from a campfire to a powered workshop

What you can do

Ride the line

  • Board at any of four stations. The train keeps a timetable, running the whole line back and forth whether Seven is aboard or not.
  • Roll the whole length of the train while it moves, from the nose to the glass dome car.
  • Five camera views: Seven, window seat, chase, nose and trackside.
  • Hold F to speed the ride up. Press T to step from morning to night.
  • Eight postcards to frame and keep in an album.

Explore Calder

  • Five neighbourhoods: downtown towers, Old Town row houses, the harbour, the hill and the waterfront.
  • A room behind every window, built by the shader as you look in, lit from inside after dark.
  • Brick walls and asphalt roads made from real bricks and stones modelled in Blender, with cracked and potholed stretches, patched repairs, tar-sealed cracks and oil stains where cars wait.
  • Traffic lights the cars stop for, zebra crossings, hydrants and mailboxes, and water tanks on the roofs.
  • After dark the streets turn damp, and the puddles shine with the street lamps.
  • Billboards for Eric's other projects. Stand in front of one and press E to open it.
  • Mote, the drone from FIELDWORK, scouts ahead and lights a beacon at the nearest door or view.

Jobs around Calder

  • Eleven townsfolk in Calder and along the line post jobs when they need a hand. A gold marker means someone has work.
  • Carry parcels to doors, rush deliveries against the clock, take letters up the line, find lost cats and kites, fix flickering lamps, catch fish, photograph views and gather materials.
  • Jobs are built on the spot and send Seven to places it has not been much. Mote points the way when you press Q.
  • Earn Calder marks. Three jobs for someone makes them a friend, and friends do favours. Trade marks for parts at June's garage.
  • Find every neighbourhood and landmark. Press N for your jobs, who needs a hand and the places you have found.

Seven changes shape

  • Drive into deep water and Seven folds into a boat. Ride the swells and fish from it. Near the shore, press E to hop onto land as a robot.
  • Press E on the track and Seven becomes a small locomotive that runs the rails.
  • Press 1 or 2 on a road: Firehawk lands from the sky, Redline arrives in a cloud of tyre smoke.
  • Seven folds into an engine under either car's hood. Drive it, then stand it up as a robot. Drive into deep water and Seven leaves it for the boat.

Build outside the city

  • Cut trees for logs, branches and leaves. Break rocks for stone.
  • Eight blueprints: campfire, fence, lean-to, cabin, lookout tower, power pole, lamp post and workshop.
  • Cut a street lamp in town for steel and wire. Repair drones grow it back in one game day.
  • Run power poles from the railway's telegraph line. Cabins and workshops light up after dark.
  • Everything Seven cuts and builds is saved in your browser.

The land and the sea

  • Granite peaks with snow on the ledges, a turquoise glacial lake and forests that grow in stands.
  • Mountains cast long, soft shadows across the valleys as the sun moves, and gullies, ridges and scree fans are worked out from the land itself.
  • Clear lake water you can see the bed through, with ripples of light on the stones and, on the highest setting, reflections of the peaks.
  • Blue haze that rises from the valleys, a sky that glows around the sun, and real drifting clouds on the highest setting.
  • Rocks that change with the land: lava at Gull Point, sandstone sea stacks, lake granite, mountain talus.
  • Gulls, pigeons, squirrels, rabbits, deer and fish that react when Seven gets close.
  • A reef from Lumen Reach, with dolphins, orcas and a whale from the Starlight Menagerie offshore.
  • A fishing game: cast, hook and reel without snapping the line.
Controls
Drive
WASD or arrows, left side of a phone screen, or a gamepad
Board, act, build
E
Cameras
C
Postcard
P, album J
Ask Mote
Q
Call the cars
1 Firehawk, 2 Redline
Blueprints
B

From the line

Shared parts

What every city runs on

These pieces live once in /citylab/shared/ or came from earlier labs. A new city starts with all of them.

  • The loadercitylab/shared/boot/

    Shows every file as it arrives, compiles every shader before play, and keeps the build number so a new version is fetched fresh.

  • Three.jscitylab/shared/vendor/

    One copy of three.js r185 for every city, with the meshopt decoder.

  • Seven and Motefrom FIELDWORK

    The FW-7 field unit with its treads and tank controls, and the drone that rides on its back.

  • Culling and batchingfrom Lumen Reach

    Instances drawn by cell, near and far versions, and shadow stand-ins that keep a phone cool.

  • Sky, trees and waterfrom Lumen Reach

    The day-night table, card trees that let light through, and the reef.

What came before

Built from parts that already worked

  • City Explorer

    An older 1986 New York with rain, crowds and a subway car you could walk in while it moved. It proved rooms behind windows, walkable trains and traffic that stops for you.

  • Island V5: Lumen Reach

    The sky, the trees and grass, the loader, the reef, the fishing game, the boat and the culling tricks.

  • FIELDWORK

    Seven, the FW-7 field unit, and Mote, the drone that shows the way.

  • Firehawk

    Firehawk and Redline, the two transforming cars, rigged again so Seven can ride inside.

  • Starlight Menagerie

    The dolphins, orcas, whale and jellyfish that swim off the coast.

  • Blender, through the MCP

    The train, the stations and the animals are Python scripts run inside Blender. The brick and asphalt are too: real bricks, mortar and stones are modelled there and baked into seamless textures. A change is an edit to a script and one export.

  • Slop New York

    Mr.doob's open-source Manhattan (MIT licence). Its tricks for building fronts, wet streets, rooftops, traffic lights and car shadows were rewritten for Calder.

From the notebook

The city before the train

Before CityLab had a station, it had City Explorer. Eric built it in the open in May and June 2026 and posted short notes as it grew. Here they are in order, oldest first.

  1. The first sketch

    A night city made with Three.js, shaders and a few tricks collected from around the internet that week. All of it runs in the browser.

  2. It starts to look like a place

    A street-level view with high-rises, lit storefronts and lane markings.

  3. Bigger than planned

    Route and boarding controls show up on screen. Eric's verdict: “city-explorer is… unreal, and it’s MASSIVE.”

  4. A racetrack in one try

    Eric reports that Claude Fable added a racetrack, repaired a car model and gave the track physics in one pass. He points out the wheels turning and the tires following the steering.

  5. What if you could ride it?

    A one-line question asks whether a tram could carry the rider around and through the city.

  6. What a long run taught him

    The long post. Eric walks through a very long /goal run in OpenAI's Codex and what it showed him about how he works.

  7. Fourth try, and close

    The fourth version of the same city scene. The streetlights switch, and now that there are streetlights, there are cars.

  8. A train goes around

    An early cut of a train looping the whole city.

  9. A million buildings

    A stress test with one million made-up buildings. Far-off buildings drop to simpler detail so the view can hold them all.

More notes live in Field Notes and the Advisory Hour archive.

House rules

What every city has to earn

  1. Arrive by rail. Every city starts at a station. You ride in and watch it grow in the window.
  2. Step off anywhere. The train is the way in, not a fence. Leave it and go where you like.
  3. Phones too. Every city has to run smoothly on a phone, with thumbs as good as a keyboard.
  4. No waiting at the door. Every shader is ready before play, so nothing stutters the first time you see it.
  5. Made up, on purpose. The cities, the stations and everyone in them are invented.

The station master