RPT · MISSION REPORT · A DIGITAL WONDERS PRODUCTION
The making of Traveling Houston.
A 3D field guide to Houston that begins on the Moon. This is its mission report: the idea, how the fall and the city were made, the live data and the sound, the three games, the engineering underneath, and what changed when it was reviewed cold.
- Project
- Traveling Houston, a 3D field guide to Houston, Texas
- Studio
- Digital Wonders, Houston
- Type
- Self-initiated portfolio piece
- Scope
- Concept, research, design, engineering, sound, music
- Stack
- Next.js, React, three.js, GSAP, Lenis, Web Audio
Contents
- § 01One word started it.20 JULY 1969
- § 02The fall from the Moon.THE DESCENT
- § 03A city built from its own map.THE WORLD
- § 04Houston, right now.TELEMETRY
- § 05A radio that follows the map.AUDIO
- § 06Three games, no technique twice.SET-PIECES
- § 07One canvas, everything in it.SYSTEMS
- § 08Reviewed cold, then rebuilt.REVIEW
- § 09CreditsCREDITS
- 140places, each checked
- 14Top 10 guides
- 485events on the board
- 134stops rebuilt from the map
- 84,613buildings from OpenStreetMap
- 158original songs
- 14games, no technique twice
- 1WebGL canvas
§ 0120 JULY 1969 · 102:45:58 GET
One word started it.
When the Eagle touched down on the Sea of Tranquility, Buzz Aldrin called “Contact light” and the crew ran through the shutdown. Then Neil Armstrong sent the message the world was waiting for, and its first word was the name of a city: “Houston, Tranquility Base here. The Eagle has landed.”
So the guide starts where that sentence did, inside the lunar module’s cabin, 238,900 miles out. You scroll, and you fall the whole way home: through the dark, into dawn over the Gulf, and down into a Houston built from open map data. From then on the camera never stops flying. Every guide is a flight plan, every place is a waypoint the camera really flies to, at its own latitude and longitude, and every page change is a flight across town.
The plan, written before the first line of engine code, named two things the site had to prove: that it is the most useful guide to Houston on the internet, and that nobody else could have built it. Everything below serves one or the other.
§ 02THE DESCENT · 238,900 MI TO 0 FT
The fall from the Moon.
The Descent opens inside Eagle’s cabin, built for the site from the dimensions in Grumman’s LM News Reference: two triangular windows canted down to the plain, the panels and breakers, the DSKY showing P68 with the landing site’s coordinates, and the mission timer at 102:45:58, the moment of that call. The camera leaves through the Commander’s window and circles the lander on the plain.
The descent stage outside is NASA’s own public-domain Apollo lunar module, from NASA 3D Resources, cut down to 63,000 triangles and 365 KB and refinished here: crumpled amber and black Kapton from a baked map of hand-pressed creases, anodized aluminum, a reflection of the sunlit ground, a rim of earthshine. The ascent stage that holds the cabin was rebuilt as a patchwork of panels, and at liftoff it leaves the descent stage on the Moon, as it did.
The Earth is NASA imagery: Blue Marble Next Generation for the day side, Black Marble for the lights and NASA’s cloud cover, 4,096 pixels across on a desktop and 2,048 on a phone. Closing on Texas, a 2,048 × 1,536 patch of the full-resolution Blue Marble, 500 meters to the pixel, blends in over the Gulf. The sun is where it should be: dawn in Houston, the West Coast still in the dark. The imagery decodes off the main thread and uploads one texture a frame, so the fall never stalls on it.
At entry interface, 400,000 feet, the radio drops out the way it did for the crews and the air flares; below 100 miles the instruments read in feet. Under that the ground is a photograph: USDA aerial imagery from the National Agriculture Imagery Program, stitched and graded into the Blue Marble over 120 kilometers, with a sharper survey over the middle 30. The coast is traced from the region’s map data and kept as a distance field, so the shoreline stays smooth at any altitude, and the clouds and their shadows hold until you come down through 15,000 feet.




§ 03THE WORLD · 29.7604° N 95.3698° W
A city built from its own map.
Houston here is OpenStreetMap: 75,839 building footprints across downtown, Midtown and the Museum District, the Medical Center, Montrose, Uptown, EaDo and the stadiums, the Space Center, San Jacinto and Kemah. Each is raised to its mapped height where the map records one (it does for 1,842 of them, the towers among them) and to a height for its type where it does not. The freeways carry 22,000 lights of traffic, white one way and red the other (7,000 on a phone), and the bayous, the Ship Channel and Galveston Bay come from the same data.
Every building is classed by footprint and height (a house, a shed, a commercial block) and painted from a six-tone Houston palette, with darker roofs and rooftop units, window grids on anything over 12 meters, and curtain walls in blue-gray, bronze, green or silver glass. At night the windows light. The landmarks are models built from published dimensions: the San Jacinto Monument, the Saturn V in its hall, the shuttle on its 747, the Astrodome, Daikin Park with its open roof and its train.
Then the stops. Every place in the guides except Daikin Park and the five on Bellaire Boulevard, which have models of their own, rebuilds its block from OpenStreetMap as the camera heads its way: 134 sets, 8,774 buildings on their real footprints and roofs. A facade by use and material, storefront glass and a door on the wall that faces the address’s street, the place’s real name on its sign and the neighbors’ mapped names on theirs; streets with their lines, lots with their stalls and parked cars, and what that kind of place has outside: pits and picnic tables, string lights, a patio. Nearly every set also carries a piece made for its place alone.
Bellaire Boulevard got a street of its own, from Kirkwood to Gessner: both carriageways and the oak median, light-trail traffic, every commercial building as a lit strip-center front lettered from its mapped tenants, pylons for twelve centers, signal mast arms with English and Vietnamese street blades west of the Beltway and English and Chinese east of it, Hong Kong City Mall’s paifang and lanterns, the Vietnam War Memorial and the Teo Chew Temple.
Holding on each of the 134 stops in turn, a script counted what their sets draw: 51,682 trees, 9,889 people and 24,228 cars, each one an instance of a shared model, so a crowd of a hundred people costs a draw call or two, not a hundred.




§ 04TELEMETRY · LIVE
Houston, right now.
The clock in the header is a switch. Turn it on and the guide’s art-directed hour gives way to the real one: the sun where it is over Houston this minute, from NOAA’s solar position formulas worked out on the device, and the weather the National Weather Service last observed at Bush Intercontinental, one small request every ten minutes. Overcast grays the light and fades the shadows, fog closes in, and rain streaks the lens.
The aircraft over the city are real. Every one within 60 nautical miles of downtown (the IAH and Hobby traffic, helicopters over the Medical Center, overflights at 40,000 feet) flies at its broadcast position, altitude and track from adsb.lol’s volunteer receivers, updated every ten seconds and dead-reckoned in between, so a new fix eases in instead of jumping. A small proxy on the host asks once every ten seconds however many people are watching, trims the answer to what the renderer draws, and leaves out aircraft on the FAA’s privacy programs. Nothing about the visitor is sent.
The Astros’ schedule comes from MLB’s Stats API with every build. Both Daikin Park stops show the next home game, call it Opening Day only when a second query confirms it, and the morning after a home win the fireworks over the park run a volley longer, in orange, blue and white.
A static site freezes the day it was built, so this one is rebuilt and published twice a day, and whenever the site itself changes, with the latest schedules and listings, and the events board and the home page’s next six re-check the date in the browser, so an event that ended since the build steps aside. Nothing on the site is dated by hand.


§ 05AUDIO · 9 STATIONS AND THE ARCHIVE
A radio that follows the map.
Digital Wonders wrote 158 original songs for the site and produced them with Suno and Mureka, across 9 stations: honky-tonk and western swing, Tejano cumbia and conjunto, Frenchtown zydeco, Third Ward gospel and blues, H-Town rap slowed and chopped, lion-dance trap for Bellaire, Afrobeats and Bollywood, Gulf Coast yacht rock, Montrose jazz and disco. The lyrics are about real places in the guide, and most places have a song of their own that plays when the camera arrives. One more channel plays 7 public-domain recordings: Scott Joplin piano rolls, fiddle and country records from the 1920s, and the Coast Guard Band’s Yellow Rose of Texas.
The dial follows the camera. When a stop’s marker lights, the radio retunes to the station that stop belongs to, and a stop with a song of its own cuts in at its first chorus. Every song is a radio edit, from just before its first sung line to just after its last, cut from the timings in its aligned lyrics and mastered to −16 LUFS. Each guide has a set list, and no song plays twice in one.
Under the music are the real voices of Apollo, 7 NASA recordings from Wikimedia Commons between quindar tones (“The Eagle has landed,” the first step, Apollo 8 on the way home), and a bed synthesized live in Web Audio that follows the camera’s hour and speed: radio hiss in orbit, wind only while you are really moving, traffic and birds by day, cicadas at dusk, crickets at night. Sound waits for your first tap. A wrong address lands on Apollo 13, adrift, with the real “Houston, we’ve had a problem” loop, all 45 kB of it.

§ 06SET-PIECES · ONE PAGE EACH
Three games, no technique twice.
Every guide has the same honest backbone, ten places flown to on the real map, and two of them have a piece of play that exists only on that page. No two share a technique, none is needed to read the guide, and every one plays from the keyboard. On the guide pages most are full-bleed scenes that dissolve into the city at their edges instead of sitting on it in a box.
| No. | Guide | Set-piece | Technique |
|---|---|---|---|
| BBQ | Barbecue | The 14-Hour Brisket | A whole cook on a seeded night: a fire with real lag, white smoke from a starved fire, the stall, paper or foil, probe tender by feel, a judge’s scorecard |
| MSC | Live Music & Nightlife | Chopped & Screwed | A beat rendered once offline, played at the platter’s real speed; drag it, screw it to 70 percent |
The 404 is a piece too: Apollo 13, adrift. And Final Approach has a second mission, the tour: the same airliner over the Top 10, with solid buildings (a height grid rasterized from the roofs) and the rules for flying over a city.


Any view also makes a keepsake. The Postcard button renders the 3D view at 1,800 × 1,200 and sets it as a large-letter “Greetings from” card: the place’s name in block capitals filled with its own skyline, a caption in the telemetry voice, and a postmark with the date and time in Houston.
§ 07SYSTEMS · ONE CONTEXT
One canvas, everything in it.
There is one WebGL context on the site. The city is the background view; every game is a view bound to a rectangle of the page and drawn into the same canvas with a scissor, so textures are shared and no browser’s context limit is ever reached. The full-bleed pieces are feathered: the world is copied once a frame and laid back over their edges.
Shaders compile in parallel, off the main thread, before anything new is drawn: the city while you are still in space, each stop set and tile as it streams in. Adaptive resolution reads the median of two-second windows and, at its floor, gives up the shadow map’s size and then bloom. three.js, GSAP and Lenis never ship in the first load; every page is complete HTML before they arrive.
The strangest bug was a black block that blinked over one downtown bar, La Carafe. It was a single pixel that was not a number: under multisampling, the stop buildings’ shader extrapolated its values past a triangle’s edge, and the bloom pass spread that one NaN into a block. Every value interpolated under the bloom is now declared centroid, and a scanner reads the bloom’s input at every one of the 134 stops for anything that is not a finite number.
Every page is complete without the 3D layer, which is decoration: the canvas is hidden from assistive technology and every fact is real text. With reduced motion the camera cuts instead of flying. axe-core reports no violations on the audited routes at desktop and phone sizes, and because axe cannot see through to a 3D scene, contrast is measured on the glyphs themselves, frame by frame, over the moving city. Nothing is cut or zoomed on a 320-pixel phone.
The whole thing is a static export on ordinary shared hosting: clean URLs from an .htaccess file, the air-traffic proxy in one PHP file, a push to main live within about twenty minutes, and more than a hundred unit tests (content integrity, the map projection, the Descent’s clock, every camera shot, every title fitting the smallest phone) run before every deploy.
Measured the same way, holding on every stop, a frame takes 122 draw calls on a desktop and 62 on a phone, every pass counted, shadows and bloom included. On the studio’s laptop that is 16 ms a frame at desktop size and 4.2 ms at a phone’s size; a real phone takes longer, and its resolution adapts to keep up.

§ 08REVIEW · SECOND PASS
Reviewed cold, then rebuilt.
Once the site was live we put it through our own cold review, judged the way a design jury judges: design, usability, creativity and content. Creativity and content held up best. It came back with twenty ranked changes and a list of what to protect: the opening in the cabin, the type, the Earth from space, the place pages, Lotería, the 404.
It named the weakest frames plainly, and those are the ones that were rebuilt. The arrival had landed on a flat olive plane with a stair-stepped coast; it is now the aerial photograph in section 2, with a coast smoothed from a distance field and clouds that part as you come down. The lunar module had been a stack of boxes with a gold egg for a tank; it is now NASA’s own model, refinished. The city had been one beige box repeated; it is now classed, colored, glazed and lit.
And the pages were long. The home page went from 58 screens to 48 on a desktop (69 to 54 on a phone), every guide lost about a quarter of its length, the stop rail became a way to jump, J and K go to the next and last stop, and a quiet Skip to Houston sits under the opening. The same pass gave each kind of page a device of its own: a live split-flap board for events, a boarding pass for your plan, instrument plates for the briefing, closing credits for the colophon.
§ 09 · CREDITS
A Digital Wonders production
Houston, Texas
Concept, research, design, engineering, sound and music by Digital Wonders. Map data © OpenStreetMap contributors (ODbL); imagery from NASA and the USDA; weather from NOAA and the National Weather Service; aircraft from adsb.lol (ODbL); Apollo recordings from NASA. Every source and license is in the colophon.
Have a place, a product or a story that deserves a world of its own? This is what we build.
Start a project at digitalwonders.techOr start the flight again