TravelingHouston

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
  • 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.

Inside the lunar module cabin: angled windows onto the gray lunar surface, instrument panels with round gauges, and a green mission clock.
FIG. 2.1 The cabin of Eagle, built for the site. The Descent begins here, on the first frame.
The lunar module standing on the Moon: a gray paneled ascent stage above a descent stage wrapped in crumpled gold foil, its long shadow across the plain.
FIG. 2.2 NASA’s lunar module, refinished: Kapton foil, aluminum, a rim of earthshine.
The Earth against black space, the Americas lit on the day side with cloud bands, the terminator crossing the Gulf of Mexico.
FIG. 2.3 NASA’s Blue Marble and Black Marble on the way home: dawn on the terminator over Houston.
Galveston Bay seen from high above in the morning, the Houston region beyond it as a photographic patchwork of fields, towns and bayous.
FIG. 2.4 The approach over Galveston Bay: USDA aerial imagery under the city. The page flies it before sunrise; shown here in the morning.

§ 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.

Downtown Houston as a matte clay model at noon: the towers as pale blocks with hard shadows, low buildings spreading to the horizon.
FIG. 3.1 The city in clay (any page with ?view=clay): the map data before the look goes on.
The same view of downtown Houston at golden hour, towers lit amber, streets and freeways below, Daikin Park in the corner and the green land beyond.
FIG. 3.2 The same camera, finished: the palette, glass, windows and aerial ground at golden hour.
The Breakfast Klub rebuilt on its block: a low building with its name on the sign band, patio umbrellas out front, a striped lot and the street in the foreground.
FIG. 3.3 A stop set: The Breakfast Klub on its own block, its sign, its patio and its lot.
Bellaire Boulevard at dusk seen along its length: red and white light trails on both carriageways, lit strip centers and pylon signs on each side, the sun low on the right.
FIG. 3.4 Bellaire Boulevard at dusk, west down the boulevard from Corporate Drive.

§ 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.

Downtown Houston under a gray overcast sky with rain streaking across the view, the towers muted by haze.
FIG. 4.1 The live sky’s rain, forced for this figure. On the site it falls when the airport reports it.
Daikin Park at night from above home plate, the field lit green under the open roof, fireworks bursting gold over the stadium.
FIG. 4.2 Fireworks over Daikin Park on its stops, a volley longer after a home win.

§ 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.

The 404 page: the headline Houston, we have a problem, over a model of the Apollo 13 command module with the lunar module docked, drifting in space with the Earth small behind it, and the flight transcript below.
FIG. 5.1 The 404: Apollo 13, adrift, the transcript as the Flight Journal gives 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.

The fourteen set-pieces, one per guide, one technique each.
No.GuideSet-pieceTechnique
TTDThings To DoLand the EagleLunar gravity against a throttled descent engine, sixty seconds of fuel, the lander’s shadow as the altimeter
EATRestaurantsPassportA dot globe sampled from Natural Earth, great-circle arcs from each cuisine’s homeland, spin with inertia
BBQBarbecueThe PitAn offset smoker whose steel ages in the shader, a lagging needle, smoke that goes white above 275 °F
TMXTacos & Tex-MexLoteríaHTML and CSS 3D, not WebGL: real, focusable cards, a Spanish caller in the browser’s own voice
SWTSweetsScoop StackA stacking model where every offset adds to the lean and the stack sways on a spring until it goes over
BRNCoffee & BrunchLatte ArtA GPU stable-fluids solver on half-float targets: advection, vorticity, twenty Jacobi iterations
BARBarsLast CallA shake read from pointer velocity, steel that frosts as it chills, the bar’s name in neon
MSCLive Music & NightlifeChopped & ScrewedA beat rendered once offline, played at the platter’s real speed; drag it, screw it to 70 percent
FAMKids & FamiliesLaunch PadBallistic arcs over a toy-map Houston drawn from the world’s own city raster
MUSMuseumsThe DistrictA scroll-driven walk through ten pavilions, each from its museum’s architecture, no painting reproduced
OUTParks & OutdoorsPaddle the BayouThe real Buffalo Bayou centerline, a kayak at dusk, a particle swarm of free-tailed bats
SPTSportsBatter UpA timing game at batting-practice speed; go deep and the train runs over the Crawford Boxes
TRPDay TripsRoad AtlasShortest paths over the real mapped freeways, a GPS trace behind the car, the Bolivar ferry
NBHNeighborhoodsThe LoopsA 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.

The Pit: an offset smoker at night with its firebox glowing, white smoke rising from the stack, and a temperature dial reading well past the target band.
FIG. 6.1 The Pit, run too hot: past 275 °F the smoke goes thick and white.
Chopped and Screwed: a turntable on a walnut plinth with a purple-labeled record, a tonearm and a fader, with RPM and pitch readouts and the ten live music venues listed beside it.
FIG. 6.2 Chopped & Screwed: drag the record to slow it, the way DJ Screw did on the south side.

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.

A postcard reading Greetings from The Menil Collection, the name in block capitals filled with an aerial view of Montrose at dusk, a cream border, a Houston postmark and a caption with coordinates.
FIG. 7.1 A postcard from the Menil Collection, as the button makes it.

§ 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