Cómo se hizo Traveling Houston.

Cuando el Eagle se posó en el Mar de la Tranquilidad, Buzz Aldrin cantó “Contact light” y la tripulación hizo la secuencia de apagado. Entonces Neil Armstrong mandó el mensaje que el mundo estaba esperando, y su primera palabra fue el nombre de una ciudad: “Houston, aquí Base Tranquilidad. El Águila ha aterrizado.”

Por eso la guía empieza donde empezó esa frase, dentro de la cabina del módulo lunar, a 238,900 millas de casa. Haces scroll y caes todo el camino de regreso: a través de la oscuridad, hacia el amanecer sobre el Golfo y hasta abajo, a un Houston construido con datos de mapas abiertos. De ahí en adelante la cámara nunca deja de volar. Cada guía es un plan de vuelo, cada lugar es un punto de ruta al que la cámara vuela de verdad, a su propia latitud y longitud, y cada cambio de página es un vuelo de un lado a otro de la ciudad.

El plan, escrito antes de la primera línea de código del motor, nombraba dos cosas que el sitio tenía que demostrar: que es la guía de Houston más útil de internet, y que nadie más la podría haber hecho. Todo lo que sigue sirve a una o a la otra.

El Descenso empieza dentro de la cabina del Eagle, construida para el sitio con las medidas de la LM News Reference de Grumman: dos ventanas triangulares inclinadas hacia la llanura, los paneles y los interruptores, el DSKY marcando P68 con las coordenadas del sitio de alunizaje, y el reloj de la misión en 102:45:58, el momento de aquella llamada. La cámara sale por la ventana del Comandante y le da la vuelta al módulo sobre la llanura.

La etapa de descenso que se ve afuera es el propio módulo lunar Apollo de la NASA, de dominio público, tomado de NASA 3D Resources, recortado a 63,000 triángulos y 365 KB y con un acabado nuevo hecho aquí: Kapton ámbar y negro arrugado con un mapa de pliegues precalculado, aluminio anodizado, un reflejo del suelo iluminado por el sol, un contorno de luz terrestre. La etapa de ascenso, donde va la cabina, se reconstruyó como un mosaico de paneles, y al despegar deja la etapa de descenso en la Luna, como pasó de verdad.

La Tierra son imágenes de la NASA: Blue Marble Next Generation para el lado de día, Black Marble para las luces y la nubosidad de la NASA, a 4,096 píxeles de ancho en una computadora y 2,048 en un celular. Al acercarse a Texas, un parche de 2,048 × 1,536 del Blue Marble a resolución completa, a 500 metros por píxel, se funde sobre el Golfo. El sol está donde debe estar: amanece en Houston y la Costa Oeste sigue a oscuras. Las imágenes se decodifican fuera del hilo principal y se sube una textura por cuadro, así que la caída nunca se traba por eso.

En la interfaz de entrada, a 400,000 pies, se pierde la señal de radio, como les pasaba a las tripulaciones, y el aire se enciende; por debajo de 100 millas los instrumentos marcan en pies. Más abajo el suelo es una fotografía: imágenes aéreas del USDA, del National Agriculture Imagery Program, unidas y corregidas de color para fundirse con el Blue Marble a lo largo de 120 kilómetros, con una toma más nítida sobre los 30 del centro. La costa está trazada con los datos del mapa de la región y guardada como un campo de distancia, así que el litoral se ve suave a cualquier altitud, y las nubes y sus sombras se mantienen hasta que bajas de los 15,000 pies.

Aquí Houston es OpenStreetMap: 75,839 contornos de edificios en Downtown, Midtown y el Museum District, el Medical Center, Montrose, Uptown, EaDo y los estadios, el Space Center, San Jacinto y Kemah. Cada uno se levanta a la altura que registra el mapa cuando la tiene (así pasa con 1,842 de ellos, incluidas las torres) y a una altura según su tipo cuando no. Las autopistas llevan 22,000 luces de tráfico, blancas en un sentido y rojas en el otro (7,000 en un celular), y los bayous, el Ship Channel y la bahía de Galveston salen de los mismos datos.

Cada edificio se clasifica por su planta y su altura (una casa, un cobertizo, un bloque comercial) y se pinta con una paleta de seis tonos de Houston, con techos más oscuros y equipos en las azoteas, cuadrículas de ventanas en todo lo que pase de 12 metros, y muros cortina de vidrio gris azulado, bronce, verde o plateado. De noche las ventanas se encienden. Los lugares emblemáticos son modelos construidos con medidas publicadas: el San Jacinto Monument, el Saturn V en su pabellón, el transbordador sobre su 747, el Astrodome, Daikin Park con el techo abierto y su tren.

Luego, las paradas. Cada lugar de las guías, salvo Daikin Park y los cinco de Bellaire Boulevard, que tienen modelos propios, reconstruye su cuadra a partir de OpenStreetMap mientras la cámara va para allá: 134 escenarios, 8,774 edificios sobre sus contornos y techos reales. Una fachada según su uso y su material, vidrio de aparador y una puerta en el muro que da a la calle de su dirección, el nombre real del lugar en su letrero y el de cada vecino, tal como lo registra el mapa, en el suyo; calles con sus líneas, estacionamientos con sus cajones y carros estacionados, y lo que ese tipo de lugar tiene afuera: ahumadores y mesas de picnic, guirnaldas de luces, un patio. Casi todos los escenarios llevan además una pieza hecha solo para su lugar.

A Bellaire Boulevard le tocó una calle entera, de Kirkwood a Gessner: los dos sentidos de circulación y el camellón de robles, tráfico en estelas de luz, cada edificio comercial como la fachada iluminada de una plaza, rotulada con los locales que registra el mapa, anuncios de poste para doce plazas, semáforos de brazo con placas de calle en inglés y vietnamita al oeste del Beltway y en inglés y chino al este, el paifang y los faroles de Hong Kong City Mall, el Vietnam War Memorial y el Teo Chew Temple.

Deteniéndose en cada una de las 134 paradas, un script contó lo que dibujan sus escenarios: 51,682 árboles, 9,889 personas y 24,228 carros, cada uno una instancia de un modelo compartido, así que una multitud de cien personas cuesta una o dos draw calls, no cien.

El reloj del encabezado es un interruptor. Actívalo y la hora que la dirección de arte eligió para la guía le cede el paso a la real: el sol donde está sobre Houston en este minuto, con las fórmulas de posición solar de la NOAA calculadas en el dispositivo, y el clima que el National Weather Service observó por última vez en Bush Intercontinental, con una pequeña consulta cada diez minutos. Un cielo nublado vuelve gris la luz y desvanece las sombras, la neblina se cierra y la lluvia raya el lente.

Los aviones sobre la ciudad son reales. Cada uno dentro de 60 millas náuticas del centro (el tráfico de IAH y Hobby, helicópteros sobre el Medical Center, sobrevuelos a 40,000 pies) vuela en la posición, la altitud y el rumbo que transmite, tomados de los receptores voluntarios de adsb.lol y actualizados cada diez segundos; entre una lectura y otra se calcula por navegación a estima, así que cada posición nueva entra suave en vez de saltar. Un pequeño proxy en el hosting pregunta una vez cada diez segundos, sin importar cuánta gente esté mirando, recorta la respuesta a lo que dibuja el renderizador y deja fuera los aviones inscritos en los programas de privacidad de la FAA. No se envía nada sobre el visitante.

El calendario de los Astros llega de la Stats API de MLB con cada build. Las dos paradas de Daikin Park muestran el próximo juego en casa, lo llaman Día Inaugural solo cuando una segunda consulta lo confirma, y la mañana después de una victoria en casa los fuegos artificiales sobre el parque tiran una tanda más, en naranja, azul y blanco.

Un sitio estático se queda congelado el día en que se construyó, así que este se regenera y se publica dos veces al día, y cada vez que cambia el propio sitio, con los calendarios y la cartelera más recientes, y el tablero de eventos y los seis próximos de la página de inicio vuelven a revisar la fecha en el navegador, así que un evento que terminó después del build se hace a un lado. Nada en el sitio está fechado a mano.

Digital Wonders escribió 158 canciones originales para el sitio y las produjo con Suno y Mureka, repartidas en 9 estaciones: honky-tonk y western swing, cumbia tejana y conjunto, zydeco de Frenchtown, gospel y blues del Third Ward, rap de H-Town lento y cortado, trap con tambores de danza del león para Bellaire, afrobeats y Bollywood, yacht rock de la costa del Golfo, jazz y disco de Montrose. Las letras hablan de lugares reales de la guía, y la mayoría de los lugares tiene una canción propia que suena cuando llega la cámara. Un canal más toca 7 grabaciones de dominio público: rollos de pianola de Scott Joplin, discos de violín y country de la década de 1920, y The Yellow Rose of Texas de la Banda de la Guardia Costera.

El dial sigue a la cámara. Cuando se enciende el marcador de una parada, el radio se sintoniza en la estación a la que pertenece esa parada, y una parada con canción propia entra directo en su primer coro. Cada canción es una edición para radio, de justo antes de su primera línea cantada a justo después de la última, cortada con los tiempos de su letra sincronizada y masterizada a −16 LUFS. Cada guía tiene su set list, y ninguna canción suena dos veces en la misma guía.

Debajo de la música están las voces reales del Apollo, 7 grabaciones de la NASA de Wikimedia Commons entre tonos quindar (“El Águila ha aterrizado”, el primer paso, el Apollo 8 de regreso a casa), y un fondo sintetizado en vivo con Web Audio que sigue la hora y la velocidad de la cámara: estática de radio en órbita, viento solo cuando de verdad te estás moviendo, tráfico y pájaros de día, chicharras al atardecer, grillos de noche. El sonido espera tu primer toque. Una dirección equivocada aterriza en el Apollo 13, a la deriva, con el loop real de “Houston, hemos tenido un problema”: 45 kB en total.

Hay un solo contexto WebGL en todo el sitio. La ciudad es la vista de fondo; cada juego es una vista ligada a un rectángulo de la página y dibujada en el mismo canvas con un scissor test, así que las texturas se comparten y nunca se llega al límite de contextos de ningún navegador. Las piezas a todo lo ancho tienen los bordes difuminados: el mundo se copia una vez por cuadro y se vuelve a poner encima de sus orillas.

Los shaders se compilan en paralelo, fuera del hilo principal, antes de que se dibuje cualquier cosa nueva: la ciudad mientras todavía estás en el espacio, cada escenario y cada tesela conforme van llegando. La resolución adaptativa lee la mediana de ventanas de dos segundos y, cuando toca su piso, sacrifica primero el tamaño del mapa de sombras y después el bloom. three.js, GSAP y Lenis nunca van en la primera carga; cada página es HTML completo antes de que lleguen.

El bug más raro fue un bloque negro que parpadeaba sobre un bar del centro, La Carafe. Era un solo píxel que no era un número: con multisampling, el shader de los edificios de las paradas extrapolaba sus valores más allá del borde de un triángulo, y el pase de bloom esparcía ese único NaN hasta volverlo un bloque. Ahora cada valor interpolado bajo el bloom se declara centroid, y un escáner lee la entrada del bloom en cada una de las 134 paradas, buscando cualquier cosa que no sea un número finito.

Cada página está completa sin la capa 3D, que es decoración: el canvas está oculto para las tecnologías de asistencia y cada dato es texto real. Con el movimiento reducido activado, la cámara corta en vez de volar. axe-core no reporta ninguna infracción en las rutas auditadas, en tamaños de computadora y de celular, y como axe no puede ver a través de una escena 3D, el contraste se mide sobre los propios glifos, cuadro por cuadro, encima de la ciudad en movimiento. En un celular de 320 píxeles nada se corta ni se amplía.

Todo es una exportación estática en un hosting compartido común y corriente: URLs limpias desde un archivo .htaccess, el proxy del tráfico aéreo en un solo archivo PHP, un push a main que queda en línea en unos veinte minutos, y más de cien pruebas unitarias (la integridad del contenido, la proyección del mapa, el reloj del Descenso, cada toma de cámara, que cada título quepa en el celular más chico) que corren antes de cada deploy.

Medido igual, deteniéndose en cada parada, un cuadro toma 122 draw calls en computadora y 62 en celular, contando cada pasada, sombras y bloom incluidos. En la laptop del estudio son 16 ms por cuadro en tamaño de computadora y 4.2 ms en tamaño de celular; un celular real tarda más, y su resolución se adapta para seguir el ritmo.

Con el sitio ya en línea, lo sometimos a nuestra propia revisión en frío, calificado como califica un jurado de diseño: diseño, usabilidad, creatividad y contenido. La creatividad y el contenido fueron lo que mejor salió. La revisión regresó con veinte cambios en orden de prioridad y una lista de lo que había que proteger: la apertura en la cabina, la tipografía, la Tierra desde el espacio, las páginas de los lugares, la Lotería, la 404.

Señaló sin rodeos los cuadros más débiles, y esos son los que se reconstruyeron. La llegada aterrizaba en una superficie lisa color verde olivo con una costa escalonada; ahora es la fotografía aérea de la sección 2, con una costa suavizada a partir de un campo de distancia y nubes que se abren mientras bajas. El módulo lunar era una pila de cajas con un huevo dorado como tanque; ahora es el propio modelo de la NASA, con acabado nuevo. La ciudad era una misma caja beige repetida; ahora está clasificada, pintada, acristalada e iluminada.

Y las páginas eran largas. La página de inicio pasó de 58 pantallas a 48 en computadora (de 69 a 54 en celular), cada guía perdió más o menos una cuarta parte de su largo, el riel de paradas se volvió una forma de saltar, J y K llevan a la parada siguiente y a la anterior, y un discreto Saltar a Houston espera debajo de la apertura. La misma pasada le dio a cada tipo de página un recurso propio: un tablero de paletas en vivo para los eventos, un pase de abordar para tu plan, placas de instrumentos para el informe de misión, créditos finales para el colofón.