RPT · BÁO CÁO SỨ MỆNH · MỘT SẢN PHẨM CỦA DIGITAL WONDERS
Hậu trường của Traveling Houston.
Một cẩm nang 3D về Houston bắt đầu từ Mặt Trăng. Đây là báo cáo sứ mệnh của nó: ý tưởng, cú rơi và thành phố được làm ra sao, dữ liệu trực tiếp và âm thanh, mười bốn trò chơi, phần kỹ thuật bên dưới, và những gì đã thay đổi sau một lần tự chấm thẳng tay.
- Dự án
- Traveling Houston, cẩm nang 3D về Houston, Texas
- Studio
- Digital Wonders, Houston
- Loại
- Tác phẩm portfolio tự thực hiện
- Phạm vi
- Ý tưởng, nghiên cứu, thiết kế, kỹ thuật, âm thanh, âm nhạc
- Công nghệ
- Next.js, React, three.js, GSAP, Lenis, Web Audio
- Trang web
- travelinghouston.com
Mục lục
- § 01Một chữ khởi đầu tất cả.20 THÁNG 7, 1969
- § 02Cú rơi từ Mặt Trăng.ĐÁP XUỐNG
- § 03Thành phố dựng từ chính bản đồ của nó.THẾ GIỚI
- § 04Houston, ngay lúc này.ĐO XA
- § 05Chiếc radio dò đài theo bản đồ.ÂM THANH
- § 06Mười bốn trò, không kỹ thuật nào lặp lại.TRÒ CHƠI
- § 07Một canvas, chứa tất cả.HỆ THỐNG
- § 08Chấm thẳng tay, rồi làm lại.ĐÁNH GIÁ
- § 09Thực hiệnTHỰC HIỆN
- 138địa điểm, nơi nào cũng được kiểm tra
- 14cẩm nang Top 10
- 77sự kiện
- 130điểm dừng dựng lại từ bản đồ
- 84.090tòa nhà từ OpenStreetMap
- 27bài hát nguyên tác
- 14trò chơi, không kỹ thuật nào lặp lại
- 1canvas WebGL
§ 0120 THÁNG 7, 1969 · 102:45:58 GET
Một chữ khởi đầu tất cả.
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.
§ 02ĐÁP XUỐNG · 238,900 DẶM ĐẾN 0 FT
Cú rơi từ Mặt Trăng.
Đ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 62,000 tam giác và 789 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 bump Voronoi 3D, 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.




§ 03THẾ GIỚI · 29.7604° N 95.3698° W
Thành phố dựng từ chính bản đồ của nó.
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ừ Space Center, 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: 130 bộ cảnh, 8.251 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. Mười hai nơi được làm riêng một món đặc biệt.
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.




§ 04ĐO XA · TRỰC TIẾP
Houston, ngay lúc này.
Đồ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 đêm. 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 mỗi ngày: bản export được dựng lại trước bình minh, giờ Houston, rồi xuất bản, 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.


§ 05ÂM THANH · 9 ĐÀI VÀ KHO LƯU TRỮ
Chiếc radio dò đài theo bản đồ.
Digital Wonders viết 27 bài hát nguyên tác cho trang và sản xuất bằng Suno, 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, Viet city pop, Afrobeats và bhangra, 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. Thêm một kênh nữa phát 7 đĩa nhạc thuộc phạm vi công cộng, từ 1916 đến 1924.
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, 6 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.

§ 06TRÒ CHƠI · MỖI CẨM NANG MỘT TRÒ
Mười bốn trò, không kỹ thuật nào lặp lại.
Cẩm nang nào cũng có chung một bộ khung trung thực, mười địa điểm được bay tới trên bản đồ thật, và một trò chơi chỉ có trên trang đó. Không có hai trò nào dùng chung một kỹ thuật, không trò nào bắt buộc phải chơi mới đọc được cẩm nang, và trò nào cũng chơi được bằng bàn phím. Trên các trang cẩm nang, phần lớn là những cảnh tràn viền, tan dần vào thành phố ở mép thay vì nằm trên nó trong một chiếc hộp.
| Số | Cẩm nang | Trò chơi | Kỹ thuật |
|---|---|---|---|
| TTD | Điểm vui chơi | Hạ Cánh Eagle | Trọng lực Mặt Trăng chống lại động cơ hạ cánh có điều tiết, sáu mươi giây nhiên liệu, bóng của mô-đun làm đồng hồ đo độ cao |
| EAT | Nhà hàng | Hộ Chiếu | Quả địa cầu bằng chấm lấy mẫu từ Natural Earth, những cung đường tròn lớn bay từ quê hương của mỗi nền ẩm thực, xoay có quán tính |
| BBQ | Barbecue | Lò Nướng | Lò hun khói offset có lớp thép già đi trong shader, kim đồng hồ phản ứng trễ, khói chuyển trắng trên 275 °F |
| TMX | Tacos & Tex-Mex | Lotería | HTML và CSS 3D, không phải WebGL: lá bài thật, focus được, người xướng bài tiếng Tây Ban Nha bằng chính giọng đọc của trình duyệt |
| SWT | Món ngọt | Tháp Kem | Mô hình chồng kem: mỗi viên lệch đi đều cộng dồn vào độ nghiêng, và tháp lắc lư trên một lò xo cho tới khi đổ |
| BRN | Cà phê & Brunch | Vẽ Latte | Bộ giải stable fluids trên GPU với target half-float: advection, vorticity, hai mươi vòng lặp Jacobi |
| BAR | Quán bar | Ly Cuối | Cú lắc đọc từ vận tốc con trỏ, thép đóng sương khi lạnh dần, tên quán bar bằng đèn neon |
| MSC | Nhạc sống & Chơi đêm | Chopped & Screwed | Một nhịp beat dựng sẵn một lần offline, phát đúng tốc độ thật của mâm đĩa; kéo nó, vặn chậm xuống 70 phần trăm |
| FAM | Trẻ em & Gia đình | Bệ Phóng | Quỹ đạo đạn đạo trên một Houston kiểu bản đồ đồ chơi, vẽ từ chính raster thành phố của thế giới 3D |
| MUS | Bảo tàng | Dạo Khu Bảo Tàng | Cuộn trang để đi qua mười gian nhà, mỗi gian theo kiến trúc bảo tàng của nó, không tái tạo bức tranh nào |
| OUT | Công viên & Ngoài trời | Chèo Dọc Bayou | Đường tâm thật của Buffalo Bayou, một chiếc kayak lúc chạng vạng, một bầy hạt mô phỏng đàn dơi đuôi tự do |
| SPT | Thể thao | Vào Đánh! | Trò canh thời điểm ở tốc độ tập đánh bóng; đánh xa là xe lửa chạy trên Crawford Boxes |
| TRP | Đi chơi trong ngày | Bản Đồ Xa Lộ | Đường đi ngắn nhất trên các xa lộ thật của bản đồ, vệt GPS phía sau xe, chuyến phà Bolivar |
| NBH | Khu phố | Những Vòng Loop | Cuộn trang để lùi ra xa qua I-610, Beltway 8 và Grand Parkway, theo đúng hình học xa lộ của thành phố |
Bay tự do và trang 404 cũng là những màn riêng: một chiếc drone bay khắp thành phố với các tòa nhà đặc (một lưới chiều cao raster hóa từ các mái nhà), và Apollo 13, trôi dạt.


Góc nhìn nào cũng có thể thành một món quà kỷ niệm. Nút Bưu thiếp dựng góc nhìn 3D ở 1,800 × 1,200 rồi đặt vào một tấm thiệp chữ lớn kiểu “Lời chào từ”: tên địa điểm viết hoa khối, lấp đầy bằng chính đường chân trời của nơi đó, một dòng chú thích theo giọng dữ liệu bay, và một con dấu bưu điện ghi ngày giờ ở Houston.
§ 07HỆ THỐNG · MỘT CONTEXT
Một canvas, chứa tất cả.
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ố 130 đ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 khoảng một 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.

§ 08ĐÁNH GIÁ · LƯỢT THỨ HAI
Chấm thẳng tay, rồi làm lại.
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.
§ 09 · THỰC HIỆN
Một sản phẩm của Digital Wonders
Houston, Texas
Ý tưởng, nghiên cứu, thiết kế, kỹ thuật, âm thanh và âm nhạc: Digital Wonders. Dữ liệu bản đồ © những người đóng góp OpenStreetMap (ODbL); ảnh từ NASA và USDA; thời tiết từ NOAA và National Weather Service; máy bay từ adsb.lol (ODbL); bản ghi âm Apollo từ NASA. Mọi nguồn và giấy phép đều có trong trang thực hiện và nguồn tư liệu.
Bạn có một địa điểm, một sản phẩm hay một câu chuyện xứng đáng có cả một thế giới riêng? Đây là thứ chúng tôi làm ra.
Bắt đầu một dự án tại digitalwonders.techHoặc bay lại từ đầu