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 fourteen 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
- § 06Fourteen games, no technique twice.SET-PIECES
- § 07One canvas, everything in it.SYSTEMS
- § 08Reviewed cold, then rebuilt.REVIEW
- § 09CreditsCREDITS
- 138places, each checked
- 14Top 10 guides
- 77events
- 130stops rebuilt from the map
- 84,090buildings from OpenStreetMap
- 27original 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 62,000 triangles and 789 KB and refinished here: crumpled amber and black Kapton from a 3D Voronoi bump, 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 the Space Center, 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: 130 sets, 8,251 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. Twelve places get a bespoke piece.
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.




§ 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 every night. 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 built every day: the export is rebuilt before dawn, Houston time, and published, 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 27 original songs for the site and produced them with Suno, 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, Viet city pop, Afrobeats and bhangra, Gulf Coast yacht rock, Montrose jazz and disco. The lyrics are about real places in the guide. One more channel plays 7 public-domain records from 1916 to 1924.
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, 6 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 PER GUIDE
Fourteen games, no technique twice.
Every guide has the same honest backbone, ten places flown to on the real map, and one 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 |
|---|---|---|---|
| TTD | Things To Do | Land the Eagle | Lunar gravity against a throttled descent engine, sixty seconds of fuel, the lander’s shadow as the altimeter |
| EAT | Restaurants | Passport | A dot globe sampled from Natural Earth, great-circle arcs from each cuisine’s homeland, spin with inertia |
| BBQ | Barbecue | The Pit | An offset smoker whose steel ages in the shader, a lagging needle, smoke that goes white above 275 °F |
| TMX | Tacos & Tex-Mex | Lotería | HTML and CSS 3D, not WebGL: real, focusable cards, a Spanish caller in the browser’s own voice |
| SWT | Sweets | Scoop Stack | A stacking model where every offset adds to the lean and the stack sways on a spring until it goes over |
| BRN | Coffee & Brunch | Latte Art | A GPU stable-fluids solver on half-float targets: advection, vorticity, twenty Jacobi iterations |
| BAR | Bars | Last Call | A shake read from pointer velocity, steel that frosts as it chills, the bar’s name in neon |
| 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 |
| FAM | Kids & Families | Launch Pad | Ballistic arcs over a toy-map Houston drawn from the world’s own city raster |
| MUS | Museums | The District | A scroll-driven walk through ten pavilions, each from its museum’s architecture, no painting reproduced |
| OUT | Parks & Outdoors | Paddle the Bayou | The real Buffalo Bayou centerline, a kayak at dusk, a particle swarm of free-tailed bats |
| SPT | Sports | Batter Up | A timing game at batting-practice speed; go deep and the train runs over the Crawford Boxes |
| TRP | Day Trips | Road Atlas | Shortest paths over the real mapped freeways, a GPS trace behind the car, the Bolivar ferry |
| NBH | Neighborhoods | The Loops | A scroll-driven pull-back through I-610, Beltway 8 and the Grand Parkway in the city’s own freeway geometry |
Free flight and the 404 are pieces too: a drone over the whole city with solid buildings (a height grid rasterized from the roofs), and Apollo 13, adrift.


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 130 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 in about a minute, 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.

§ 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