Hậu trường của Traveling Houston.

Khi Eagle chạm xuống Biển Tĩnh Lặng, Buzz Aldrin báo “Contact light” (đèn chạm đất đã sáng) và phi hành đoàn làm các bước tắt máy. Rồi Neil Armstrong gửi đi lời nhắn cả thế giới đang chờ, và chữ đầu tiên của nó là tên một thành phố: “Houston, đây là Căn cứ Tĩnh Lặng. Đại Bàng đã đáp xuống.”

Vì vậy cẩm nang bắt đầu ở đúng nơi câu nói ấy bắt đầu, bên trong khoang lái của mô-đun Mặt Trăng, cách nhà 238,900 dặm. Bạn cuộn xuống, và bạn rơi suốt đường về: xuyên qua bóng tối, vào bình minh trên vùng Vịnh, rồi xuống một Houston dựng từ dữ liệu bản đồ mở. Từ đó trở đi máy quay không bao giờ ngừng bay. Mỗi cẩm nang là một kế hoạch bay, mỗi địa điểm là một điểm mốc mà máy quay thật sự bay tới, đúng vĩ độ và kinh độ của nó, và mỗi lần chuyển trang là một chuyến bay băng qua thành phố.

Bản kế hoạch, viết xong trước cả dòng code đầu tiên của engine, nêu ra hai điều trang này phải chứng minh: rằng đây là cẩm nang về Houston hữu ích nhất trên internet, và rằng không ai khác có thể làm ra nó. Mọi thứ bên dưới đều phục vụ điều này hoặc điều kia.

Đoạn Đáp Xuống mở đầu bên trong khoang lái của Eagle, dựng riêng cho trang theo kích thước trong tài liệu LM News Reference của Grumman: hai cửa sổ tam giác nghiêng xuống nhìn ra bình nguyên, các bảng điều khiển và cầu dao, màn hình DSKY hiện chương trình P68 với tọa độ bãi đáp, và đồng hồ sứ mệnh chỉ 102:45:58, đúng khoảnh khắc của lời báo ấy. Máy quay rời khoang qua cửa sổ phía Chỉ huy trưởng và bay một vòng quanh mô-đun trên bình nguyên.

Tầng hạ cánh bên ngoài là chính mô hình mô-đun Mặt Trăng Apollo của NASA, thuộc phạm vi công cộng, lấy từ NASA 3D Resources, giảm còn 63,000 tam giác và 365 KB rồi hoàn thiện lại ở đây: lớp Kapton vàng hổ phách và đen nhăn nhúm nhờ một bản đồ nếp gấp dựng sẵn, nhôm anod hóa, ánh phản chiếu của mặt đất đầy nắng, một viền ánh sáng hắt từ Trái Đất. Tầng cất cánh chứa khoang lái được dựng lại, ghép từ nhiều tấm panel, và lúc cất cánh nó để tầng hạ cánh lại trên Mặt Trăng, đúng như ngày ấy.

Trái Đất là ảnh của NASA: Blue Marble Next Generation cho nửa ban ngày, Black Marble cho ánh đèn, cùng lớp mây của NASA, rộng 4,096 pixel trên máy tính và 2,048 trên điện thoại. Khi tiến gần Texas, một mảng 2,048 × 1,536 cắt từ Blue Marble ở độ phân giải đầy đủ, 500 mét mỗi pixel, hòa dần vào trên vùng Vịnh. Mặt trời nằm đúng chỗ của nó: bình minh ở Houston, Bờ Tây vẫn còn chìm trong bóng tối. Ảnh được giải mã ngoài luồng chính (main thread) và mỗi khung hình chỉ tải lên một texture, nên cú rơi không bao giờ bị khựng vì nó.

Ở điểm vào khí quyển, 400,000 feet, radio mất sóng như từng xảy ra với các phi hành đoàn và không khí bùng sáng; dưới 100 dặm, các đồng hồ chuyển sang đơn vị feet. Thấp hơn nữa, mặt đất là một tấm ảnh: ảnh chụp từ trên không của USDA thuộc National Agriculture Imagery Program, được ghép và chỉnh màu hòa vào Blue Marble trên 120 cây số, với một lớp ảnh khảo sát sắc nét hơn ở 30 cây số chính giữa. Bờ biển được vẽ lại từ dữ liệu bản đồ của vùng và lưu dưới dạng distance field, nên đường bờ vẫn mượt ở mọi độ cao, còn mây và bóng mây vẫn giữ cho tới khi bạn hạ xuống dưới 15,000 feet.

Houston ở đây là OpenStreetMap: 75.839 mặt bằng tòa nhà trải khắp Downtown, Midtown và Museum District, Medical Center, Montrose, Uptown, EaDo và khu sân vận động, Space Center, San Jacinto và Kemah. Mỗi tòa được nâng lên đúng chiều cao ghi trên bản đồ nếu bản đồ có ghi (1.842 tòa có, trong đó có các cao ốc), còn không thì lấy chiều cao theo loại công trình. Các xa lộ chở 22,000 ngọn đèn xe, trắng một chiều và đỏ chiều kia (7,000 trên điện thoại), còn các bayou, Ship Channel và vịnh Galveston đều lấy từ cùng nguồn dữ liệu đó.

Mỗi tòa nhà được phân loại theo mặt bằng và chiều cao (nhà ở, nhà kho nhỏ, khối thương mại) rồi sơn bằng một bảng màu Houston sáu tông, với mái tối hơn và máy móc trên mái, lưới cửa sổ cho mọi tòa cao hơn 12 mét, và tường kính màu xám xanh, đồng, xanh lá hoặc bạc. Về đêm, cửa sổ lên đèn. Các địa danh là mô hình dựng theo kích thước đã công bố: San Jacinto Monument, hỏa tiễn Saturn V trong gian trưng bày, tàu con thoi trên lưng chiếc 747, Astrodome, Daikin Park với mái mở và đoàn tàu của nó.

Rồi đến các điểm dừng. Mọi địa điểm trong cẩm nang, trừ Daikin Park và năm nơi trên Bellaire Boulevard vốn có mô hình riêng, đều dựng lại dãy phố của mình từ OpenStreetMap khi máy quay hướng tới: 134 bộ cảnh, 8.774 tòa nhà trên đúng mặt bằng và mái thật của chúng. Mặt tiền theo công năng và vật liệu, kính cửa tiệm và một cánh cửa trên bức tường nhìn ra con đường của địa chỉ, tên thật của địa điểm trên bảng hiệu và tên hàng xóm theo bản đồ trên bảng hiệu của họ; đường phố có vạch kẻ, bãi đậu có ô đậu và xe đang đậu, và những gì loại địa điểm đó có bên ngoài: lò nướng và bàn picnic, dây đèn, một hiên ngồi. Gần như mọi bối cảnh còn có thêm một chi tiết làm riêng cho đúng địa điểm đó.

Bellaire Boulevard có hẳn một con đường riêng, từ Kirkwood đến Gessner: cả hai chiều xe chạy và dải phân cách trồng sồi, dòng xe kéo vệt đèn, mọi tòa nhà thương mại là một mặt tiền dãy tiệm lên đèn với bảng hiệu ghi theo tên các tiệm trên bản đồ, trụ bảng hiệu cho mười hai khu thương mại, cần đèn tín hiệu với bảng tên đường tiếng Anh và tiếng Việt ở phía tây Beltway, tiếng Anh và tiếng Hoa ở phía đông, cổng paifang và lồng đèn của Hong Kong City Mall, Vietnam War Memorial và Teo Chew Temple.

Dừng lại lần lượt ở từng điểm trong 134 điểm dừng, một script đã đếm những gì các bộ cảnh vẽ ra: 51.682 cây, 9.889 người và 24.228 xe, mỗi thứ là một instance của một mô hình dùng chung, nên một đám đông trăm người chỉ tốn một hai draw call, chứ không phải một trăm.

Đồng hồ trên đầu trang là một công tắc. Bật lên, giờ được dàn dựng sẵn của cẩm nang nhường chỗ cho giờ thật: mặt trời đúng vị trí trên Houston ngay phút này, tính ngay trên thiết bị bằng công thức vị trí mặt trời của NOAA, và thời tiết mà National Weather Service ghi nhận gần nhất ở phi trường Bush Intercontinental, mỗi mười phút một yêu cầu nhỏ. Trời âm u thì ánh sáng xám lại và bóng đổ nhạt đi, sương mù thì kéo tới gần, còn mưa thì chảy thành vệt trên ống kính.

Máy bay trên thành phố là máy bay thật. Mọi chiếc trong vòng 60 hải lý quanh Downtown (các chuyến ra vào IAH và Hobby, trực thăng trên Medical Center, những chuyến bay ngang qua ở độ cao 40,000 feet) đều bay đúng vị trí, độ cao và hướng bay mà chúng phát đi, lấy từ các trạm thu tình nguyện của adsb.lol, cập nhật mỗi mười giây và ngoại suy ở giữa hai lần, nên vị trí mới trôi vào êm ái thay vì giật cục. Một proxy nhỏ trên máy chủ hỏi mỗi mười giây một lần, dù có bao nhiêu người đang xem, cắt gọn câu trả lời còn đúng những gì cần vẽ, và bỏ ra những máy bay thuộc các chương trình bảo mật của FAA. Không có gì về người xem bị gửi đi.

Lịch thi đấu của Astros lấy từ Stats API của MLB mỗi lần build. Cả hai điểm dừng Daikin Park đều hiện trận sân nhà kế tiếp, chỉ gọi đó là Opening Day khi một truy vấn thứ hai xác nhận, và sáng hôm sau một trận thắng trên sân nhà, pháo hoa trên sân bắn thêm một loạt, màu cam, xanh dương và trắng.

Một trang tĩnh sẽ đứng yên ở ngày nó được build, nên trang này được build lại và xuất bản hai lần mỗi ngày, và mỗi khi chính trang web thay đổi, với lịch thi đấu và lịch sự kiện mới nhất, còn bảng sự kiện và sáu sự kiện kế tiếp trên trang chủ kiểm tra lại ngày ngay trong trình duyệt, nên sự kiện nào đã kết thúc sau lần build sẽ tự lui ra. Không có gì trên trang được ghi ngày bằng tay.

Digital Wonders viết 158 bài hát nguyên tác cho trang và sản xuất bằng Suno và Mureka, trải trên 9 đài: honky-tonk và western swing, cumbia Tejano và conjunto, zydeco Frenchtown, gospel và blues Third Ward, rap H-Town slowed and chopped, trap trống múa lân cho Bellaire, Afrobeats và Bollywood, yacht rock vùng Gulf Coast, jazz và disco Montrose. Lời bài hát nói về những nơi có thật trong cẩm nang, và hầu hết các địa điểm đều có một bài hát riêng, vang lên khi máy quay tới nơi. Thêm một kênh nữa phát 7 bản thu thuộc phạm vi công cộng: các cuộn piano của Scott Joplin, đĩa nhạc fiddle và country thập niên 1920, và bài The Yellow Rose of Texas do Ban nhạc Lực lượng Tuần duyên Hoa Kỳ trình diễn.

Mặt dò đài đi theo máy quay. Khi dấu mốc của một điểm dừng sáng lên, radio dò sang đài của điểm dừng đó, và điểm dừng nào có bài hát riêng thì bài đó vào thẳng đoạn điệp khúc đầu tiên. Mỗi bài là một bản radio edit, từ ngay trước câu hát đầu tiên đến ngay sau câu cuối, cắt theo mốc thời gian trong lời bài hát đã căn khớp và master ở −16 LUFS. Mỗi cẩm nang có một danh sách phát riêng, và trong đó không bài nào phát hai lần.

Bên dưới tiếng nhạc là giọng thật của Apollo, 7 bản ghi âm của NASA từ Wikimedia Commons nằm giữa những tiếng bíp quindar (“Đại Bàng đã đáp xuống”, bước chân đầu tiên, Apollo 8 trên đường về), cùng một lớp âm nền tổng hợp trực tiếp bằng Web Audio, đi theo giờ và tốc độ của máy quay: tiếng rè radio trên quỹ đạo, tiếng gió chỉ khi bạn thật sự đang di chuyển, xe cộ và chim chóc ban ngày, ve sầu lúc chạng vạng, dế về đêm. Âm thanh chờ lần chạm đầu tiên của bạn. Gõ sai địa chỉ, bạn sẽ gặp Apollo 13 đang trôi dạt, với đoạn lặp thật “Houston, chúng tôi vừa gặp vấn đề”, tất cả chỉ 45 kB.

Cả trang chỉ có một WebGL context. Thành phố là góc nhìn nền; mỗi trò chơi là một góc nhìn gắn với một hình chữ nhật trên trang và được vẽ vào cùng canvas đó bằng scissor, nên texture được dùng chung và không bao giờ chạm tới giới hạn context của trình duyệt nào. Các trò tràn viền được làm mềm mép: thế giới được sao chép mỗi khung hình một lần rồi phủ ngược lên mép của chúng.

Shader được biên dịch song song, ngoài luồng chính, trước khi bất cứ thứ gì mới được vẽ: thành phố được biên dịch khi bạn còn ở ngoài không gian, từng bộ cảnh và từng ô bản đồ ngay khi chúng được tải về. Độ phân giải thích ứng đọc trung vị của từng khung hai giây và, khi chạm mức sàn, sẽ hy sinh kích thước shadow map trước rồi mới đến bloom. three.js, GSAP và Lenis không bao giờ nằm trong lần tải đầu; mọi trang đều là HTML hoàn chỉnh trước khi chúng tới.

Con bug lạ nhất là một khối đen nhấp nháy trên một quán bar ở Downtown, La Carafe. Thủ phạm là một pixel duy nhất không phải là số: dưới multisampling, shader của các tòa nhà điểm dừng ngoại suy giá trị vượt quá mép một tam giác, và lượt bloom đã loang cái NaN đó ra thành cả một khối. Giờ mọi giá trị được nội suy bên dưới bloom đều khai báo centroid, và một bộ quét đọc đầu vào của bloom tại từng điểm trong số 134 điểm dừng để tìm bất cứ thứ gì không phải số hữu hạn.

Mọi trang đều đầy đủ mà không cần lớp 3D, vốn chỉ để trang trí: canvas được ẩn khỏi công nghệ hỗ trợ tiếp cận và mọi thông tin đều là văn bản thật. Khi bật giảm chuyển động, máy quay chuyển cảnh thay vì bay. axe-core không báo vi phạm nào trên các trang được kiểm tra, ở cả kích thước máy tính lẫn điện thoại, và vì axe không nhìn xuyên được vào cảnh 3D, độ tương phản được đo ngay trên từng nét chữ, từng khung hình, trên nền thành phố đang chuyển động. Không có gì bị cắt hay bị thu nhỏ trên chiếc điện thoại 320 pixel.

Tất cả là một bản export tĩnh trên dịch vụ hosting dùng chung bình thường: URL gọn nhờ một file .htaccess, proxy dữ liệu không lưu nằm trong một file PHP, push lên main là lên mạng trong vòng khoảng hai mươi phút, và hơn một trăm unit test (tính toàn vẹn của nội dung, phép chiếu bản đồ, đồng hồ của Đoạn Đáp Xuống, mọi cú máy, mọi tựa đề vừa với chiếc điện thoại nhỏ nhất) chạy trước mỗi lần deploy.

Đo theo cùng cách, dừng ở mọi điểm, một khung hình tốn 122 draw call trên máy tính và 62 trên điện thoại, tính mọi lượt vẽ, kể cả bóng đổ và bloom. Trên laptop của studio, đó là 16 ms mỗi khung hình ở cỡ máy tính và 4.2 ms ở cỡ điện thoại; một chiếc điện thoại thật mất nhiều thời gian hơn, và độ phân giải của nó tự điều chỉnh để theo kịp.

Khi trang đã lên mạng, chúng tôi tự đưa nó qua một vòng đánh giá không nể nang, chấm theo đúng cách một ban giám khảo thiết kế chấm: thiết kế, khả năng sử dụng, sáng tạo và nội dung. Sáng tạo và nội dung đứng vững nhất. Kết quả là hai mươi thay đổi xếp theo thứ tự ưu tiên và một danh sách những gì phải giữ: đoạn mở đầu trong khoang lái, kiểu chữ, Trái Đất nhìn từ không gian, các trang địa điểm, Lotería, trang 404.

Bản đánh giá gọi thẳng tên những khung hình yếu nhất, và đó chính là những khung hình được làm lại. Cảnh tới Houston trước kia đáp xuống một mặt phẳng màu ô liu với đường bờ biển răng cưa như bậc thang; giờ nó là tấm ảnh chụp từ trên không ở phần 2, với đường bờ biển làm mượt từ distance field và những đám mây rẽ ra khi bạn hạ xuống. Mô-đun Mặt Trăng trước kia là một chồng hộp với một quả trứng vàng làm bình nhiên liệu; giờ nó là chính mô hình của NASA, hoàn thiện lại. Thành phố trước kia là một chiếc hộp màu be lặp đi lặp lại; giờ nó được phân loại, tô màu, lắp kính và lên đèn.

Và các trang thì quá dài. Trang chủ rút từ 58 màn hình xuống 48 trên máy tính (69 xuống 54 trên điện thoại), cẩm nang nào cũng ngắn đi khoảng một phần tư, thanh điểm dừng trở thành cách để nhảy tới, phím J và K đi tới điểm dừng kế tiếp và điểm dừng trước, và một dòng Bỏ qua, vào Houston kín đáo nằm dưới đoạn mở đầu. Cũng lượt đó, mỗi loại trang có được một món riêng: bảng lật chữ trực tiếp cho sự kiện, thẻ lên máy bay cho kế hoạch của bạn, các mặt đồng hồ cho bản tin nhiệm vụ, và danh sách thực hiện kiểu cuối phim cho trang nguồn tư liệu.