Instant San Francisco

The game

Part game, part model city. Instant San Francisco is a 3D version of the city built from open data, where you ride around, race three rivals over the hills, beat the clock on missions or sit back for a guided tour.

Play now Virtual tour

Free · no account · works best on a laptop or desktop with a keyboard

So what is it?

A game

Race three rivals with fortune-cookie power-ups, run five timed missions, or just pick a ride and a colour and go.

A model city

Built from open data, not drawn by hand: the buildings, streets, parks, piers and trees are where the map says they are.

A virtual tour

Thirteen stops from a foggy dawn at the Golden Gate to night over the skyline. Let it play, or step through it yourself.

An experiment

How far can a browser go? A whole city, cinematic lighting and fog, in a web page with no plugins.

Modes

The same four tabs you see on the start screen.

Explore

Free roam. Ride anywhere between the Ferry Building, the Marina and the Presidio, with street and sight names popping up as you pass. Hop on a cable car, or open the map and teleport.

Race

Four courses on real streets against three rivals, with Mario Kart-style items from floating fortune cookies. No map: learn the hills.

Missions

Five jobs against the clock, from catching a runaway sea lion to the last cable car of the night. An arrow points the way; the map stays shut.

Tour

A cinematic glide past thirteen sights while the day runs from dawn to night. Automatic, or interactive at your own pace.

Race

Races

The course follows the shortest bike route between its checkpoints, and you race three rivals. Ride through floating fortune cookies to pick up items, carry up to three, and fire them with F.

  • SeagullFlies to the rider just ahead and steals their snack. They wobble and slow down.
  • Sourdough loafDropped behind you. Whoever rides over it spins out, unless they jump to clear it.
  • Karl the FogA fog bank smothers whoever is leading. Slow, and they can’t see a thing.
  • Cable car boostA burst of speed, as if you’d grabbed the cable.

    Missions

    Missions

    Timed jobs around the city. A light beam marks the target and an arrow under the timer points the way. The city map stays closed, so there’s no teleporting out of trouble.

    The Bay to Breakers mission: a cyclist weaving through runners on Hayes Street with the countdown timer and arrow at the top
    Bay to Breakers: up the Hayes Street hill through the runners.

      Virtual tour

      The tour

      The camera glides between thirteen sights, rising over the rooftops between stops and settling into a slow orbit at each, while the day runs from a foggy dawn at the Golden Gate to night over the skyline.

      Start the tour Interactive tour

      Interactive: press Space or → to move on to the next stop.

        Four ways to get around

        Cycling down California Street
        BikeThe default. Fast on the flat, honest on the hills: you feel every percent of grade.
        Street-level view of colourful Victorian houses on a sloping street
        On footSlow down and look up. The best way to take in the Painted Ladies or Grant Avenue.
        Skateboarding along Steiner Street
        SkateboardPush uphill, bomb downhill. Steiner Street was made for this.
        A sea lion flopping along the waterfront near Pier 39
        Sea lionA Pier 39 regular, out to see the town. Not fast. Very determined.

        Controls

        ↑↓←→Ride and steer
        SpaceJump
        MBig map, search and teleport (Explore)
        EHop on or off a cable car
        FUse an item (races)
        CChange ride
        RChange the weather
        EscMenu
        EnterStart riding from the menu

        Drag with the mouse to look around your rider.

        Weather and time

        The sun follows its real path over the city for an October day. Press R to cycle the weather: clear, Karl the Fog, overcast, or rain that leaves the streets wet and shining.

        Fog hiding most of the Golden Gate Bridge, one tower visible
        Karl the Fog. Height fog that thickens near the water and thins out over the hills.
        Downtown towers at night with lit windows
        After dark. Every window is a little room with its own light and blinds.

        A living city

        You’re not alone out there. Cars drive the real street grid and stop at working traffic signals, people walk the sidewalks and step aside for you, and the city keeps moving while you ride.

        A cable car climbing a hill street between parked cars and traffic signals
        Cable cars. The Powell–Hyde, Powell–Mason and California lines run at cable speed and stop at their stops. Press E beside one to ride the running board. F-line streetcars run along Market and the Embarcadero.
        Pedestrians on the sidewalk and cars at a signal on Hayes Street
        Street life. Traffic, pedestrians, sea lions hauled out on the Pier 39 docks, gulls over the waterfront, ferries and sailboats on the Bay, and street lamps that come on at dusk.

        Under the hood

        How it’s made

        No hand-built levels. The city is generated from public data and rendered live in your browser with three.js.

        1. The map

          Overpass API → OpenStreetMap ways → map.json

          A build script pulls buildings with their heights and levels, roads and their widths, parks, piers, rail lines, street trees, traffic signals, crossings, lamps and points of interest for the northeast of the city, then flattens it all into a compact file of about 40,000 building footprints and 17,600 road segments.

        2. The ground

          AWS Terrain Tiles (USGS 3DEP) → height field

          Elevation tiles are stitched into a height field so every street climbs and drops exactly as it does in real life. Buildings sit on the slope, roads drape over it, and your speed responds to the grade.

        3. The buildings

          footprint + height → procedural facades

          Footprints are extruded and dressed in procedural facades: floors, window bays, shopfronts and curtain-wall glass, with angled bay windows and bracketed cornices on the row houses. Windows use interior mapping, a shader trick that fakes a real room behind each pane, so the city looks inhabited from any angle.

        4. The light

          three.js → cinematic renderer

          Cascaded shadow maps keep shadows sharp up close and far away. N8AO adds ambient occlusion in the corners, bloom makes lights glow, AgX tone mapping keeps sunsets from clipping, and height fog gives the Bay its depth.

        • three.js
        • postprocessing
        • N8AO
        • Vite
        • Vanilla JavaScript
        • OpenStreetMap
        • USGS 3DEP

        Questions

        Is it really free?

        Yes. No ads, no account, no in-app purchases. It’s a hobby project.

        Does it work on my phone?

        It runs in any modern browser with WebGL 2. On phones and tablets you get an on-screen joystick and buttons, and a lighter graphics preset; a laptop or desktop shows the city at its most detailed.

        How much of San Francisco is in it?

        The northeast of the city: from SoMa and Mission Bay up through downtown, Chinatown, North Beach, Russian and Nob Hill, the Marina and the Presidio to the Golden Gate Bridge, plus Alcatraz out in the Bay.

        My building looks wrong. Why?

        Buildings come straight from OpenStreetMap. If a height or shape is off, the map probably says so too, and anyone can fix it on OpenStreetMap. The fix will show up the next time the city is rebuilt.

        Is it accurate enough to plan a bike route?

        Roughly: the hills and streets are real, but it’s a game, not a navigation app. Don’t ride the Embarcadero as a sea lion in real life.

        Your bike is waiting.

        Play now Sights