Xây dựng và khám phá Tokyo 3D tạo sinh ngay trên trình duyệt

Procedural Tokyo là gì?

Procedural Tokyo là mô hình 3D thời gian thực của Tokyo chạy trên trình duyệt. Mô hình kết hợp các tòa nhà, con đường, địa hình, tuyến đường sắt và đặc điểm địa lý có thật với các chi tiết được tạo theo quy trình như mặt tiền, cửa sổ, tiện ích đường phố, giao thông, ánh sáng, mặt nước, thời tiết và chim.

Dự án sử dụng dữ liệu công khai từ Project PLATEAU, OpenStreetMap và Cơ quan Thông tin Địa không gian Nhật Bản. Trình biên dịch ngoại tuyến chuyển đổi các bản ghi nguồn thành những ô nhị phân gọn nhẹ, trong khi trình duyệt truyền và dựng lưới các ô gần camera.

Bạn có thể dùng phiên bản được lưu trữ tại jeantimex.github.io/tokyo. Trải nghiệm này được thiết kế cho trình duyệt máy tính và không được khuyến nghị trên trình duyệt di động.

Khám phá các cảnh hiện có

Mỗi cảnh bao phủ một khu vực khoảng 3,4 x 2,8 kilômét. Các khu vực bao gồm:

• Tokyo: Ga Tokyo, Marunouchi và các hào quanh Hoàng cung.
• Shiba: Tháp Tokyo, Zojo-ji và Công viên Shiba.
• Shibuya: Ngã tư Scramble, Ga Shibuya và đường cao tốc.
• Shinjuku: Ga Shinjuku, khu nhà chọc trời, Kabukicho và Vườn quốc gia Shinjuku Gyoen.
• Chiyoda: Akihabara, Kanda và Ochanomizu.
• Chuo: Tsukiji, Kachidoki, Tsukishima, Harumi, các khu vực ven sông và kênh đào.
• Fujinomiya: Thị trấn gần núi Fuji với phông nền địa hình trải dài 60 kilômét.

PLATEAU bao phủ hàng trăm thành phố Nhật Bản, dù mức độ chi tiết có thể khác nhau. Trung tâm thành phố có thể bao gồm hình dạng mái nhà chi tiết và kết cấu ảnh chụp từ trên không, trong khi các thị trấn nhỏ hơn có thể sử dụng những khối nhà đơn giản hơn.

Tính năng chính

Tòa nhà và mặt đất chân thực

Các tòa nhà sử dụng thông tin thực về mặt bằng, chiều cao, số tầng và công năng. Khi PLATEAU cung cấp lớp vỏ chi tiết và ảnh mái nhà, các tài sản đó được sử dụng trực tiếp. Mặt tiền, cửa sổ, ban công, lan can mái, thiết bị trên mái và dải biển hiệu cửa hàng được tạo tự động để bổ sung chi tiết ở khoảng cách gần.

Mặt đất sử dụng mô hình độ cao năm mét, ảnh chụp từ trên không, bề mặt đường, lề đường, công viên, rừng và mặt nước. Vạch đường bao gồm vạch làn, vạch qua đường dành cho người đi bộ, vạch dừng, mũi tên, ký hiệu 止まれ của Nhật Bản và giới hạn tốc độ được sơn trên đường.

Nhịp sống thành phố chuyển động

Giao thông di chuyển theo đồ thị đường sá thực tế, đi bên trái, tuân thủ đường một chiều và tín hiệu, xếp hàng tại nút giao, đồng thời sử dụng đường cao tốc và đường nhánh. Tàu chạy trên các tuyến đường sắt thực tế. Cảnh còn bao gồm cột điện, dây điện, đèn đường, đèn tín hiệu giao thông, máy bán hàng tự động, cổng torii, sân ga, cầu vượt dành cho người đi bộ, cây cối và ô tô đỗ.

Thời gian, thời tiết và phản chiếu

Thanh trượt thời gian hoặc đồng hồ Tokyo trực tiếp điều khiển mặt trời, mặt trăng, bầu trời, bóng đổ và độ phơi sáng. Khi buổi tối đến, đèn thành phố bật lên trước khi bóng tối dần bao phủ qua thời khắc chạng vạng. Bộ dựng hình cũng hỗ trợ mây thể tích, phối cảnh khí quyển, mặt nước gợn sóng, phản chiếu trên cửa sổ, biển hiệu phát sáng, đèn pha và hệ thống chiếu sáng Tháp Tokyo.

Các đàn chim có thể đậu trên cây rồi lại bay đi. Trong cảnh Fujinomiya, phông nền địa hình thô tùy chọn đặt núi Fuji phía sau thị trấn và bao gồm ảnh chụp từ trên không cùng lớp tuyết phủ.

Cài đặt và chạy dự án

Sao chép kho mã và cài đặt các phần phụ thuộc bằng npm:

npm install

Tải xuống các kết cấu CC0 được dự án sử dụng. Bước này chỉ cần thực hiện một lần và lưu khoảng 14 MB vào public/textures/:

node tools/assets/fetch_textures.mjs

Tiếp theo, lấy dữ liệu thô cho một khu vực. Ví dụ sau tải dữ liệu nguồn của Tokyo:

npm run fetch -- --area=tokyo

Biên dịch các bản ghi đã tải thành những ô sẵn sàng cho trình duyệt:

npm run compile -- --area=tokyo

Cuối cùng, khởi động máy chủ phát triển:

npm run dev

Mở http://localhost:5280 trong trình duyệt máy tính. Các tệp thành phố đã biên dịch không được đưa vào kho mã, vì vậy mỗi khu vực phải được dựng lại từ dữ liệu nguồn.

Tìm hiểu quy trình dữ liệu

Quy trình gồm hai giai đoạn chính. Lệnh fetch tải các tệp nguồn vào data/raw/<area>/ và ảnh chụp từ trên không vào public/ortho/<area>/. Lệnh compile chuyển đổi các bản ghi đó thành những ô được truyền trực tiếp dưới public/tiles/<area>/.

Chạy toàn bộ quy trình cho một khu vực đã chọn bằng:

npm run fetch -- --area=shibuya
npm run compile -- --area=shibuya

Dữ liệu tải xuống thô có thể rất lớn vì bao gồm ảnh chụp tòa nhà của PLATEAU. README liệt kê dung lượng khoảng 3.6 GB cho Tokyo, 3.0 GB cho Shiba, 1.3 GB cho Shibuya và 0.2 GB cho Fujinomiya. Thời gian biên dịch từ vài giây đến vài phút tùy khu vực.

Kiểm tra và thử nghiệm dữ liệu đã biên dịch

Tạo bản xem trước từ trên xuống của một khu vực bằng:

npm run preview -- --area=tokyo

Chạy các bài kiểm thử của dự án để kiểm tra vòng lặp dữ liệu của ô và khoảng hở của vạch đường:

npm test

Các bước kiểm tra này đặc biệt hữu ích để xác minh sự căn chỉnh địa hình. Bề mặt đường, vạch làn và ký hiệu được chia theo các tam giác của lưới địa hình để luôn nằm phía trên mặt đất dốc và không bị chìm qua ranh giới giữa các ô.

Sử dụng các điều khiển trong trình duyệt

• Kéo để di chuyển góc nhìn.
• Kéo bằng nút phải chuột để xoay.
• Sử dụng con lăn chuột để thu phóng.
• Sử dụng WASD để di chuyển.
• Giữ Shift khi di chuyển để đi nhanh hơn.
• Nhấn N để chuyển đổi giữa ngày và đêm.
• Nhấp vào một tòa nhà để kiểm tra.

Bảng Cài đặt ở góc trên bên phải cho phép bạn chuyển đổi khu vực và điều chỉnh thời gian, giao thông, mây, ánh sáng cũng như chất lượng kết xuất. Các cài đặt được lưu trong trình duyệt.

Mở cảnh bằng tham số URL

Tham số URL hữu ích khi chia sẻ một góc nhìn cụ thể hoặc kiểm thử cấu hình kết xuất. Ví dụ:

https://jeantimex.github.io/tokyo/?area=shibuya&time=18.5&traffic=0

Các tham số được hỗ trợ gồm:

• area=tokyo|shiba|shibuya|shinjuku|chiyoda|chuo|fujinomiya chọn một khu vực.
• time=18.5 đặt giờ địa phương tại Tokyo.
• night=1 chuyển sang chế độ ban đêm.
• cam=x,z,distance,azimuth,elevation thiết lập camera.
• radius=900 điều khiển bán kính góc nhìn đang hoạt động.
• traffic=0 tắt giao thông.
• cars=600 thay đổi số lượng ô tô.
• birds=150 thay đổi số lượng chim.
• clouds=0.25 điều khiển độ phủ mây.
• ortho=0 tắt chế độ chiếu trực giao.

Trang được mở bằng tham số URL sẽ không ghi đè các cài đặt trình duyệt đã lưu.

Cách các Tile Đã Biên dịch Hoạt động

Máy khách sử dụng hệ tọa độ mét cục bộ với gốc tại tâm khu vực. Trục x hướng về phía đông, trục y hướng lên trên và trục z hướng về phía nam. Các tile là những hình vuông 256 mét và được tạo lưới trong Web Worker khi trang web truyền các tile gần góc nhìn hiện tại.

Một khu vực đã biên dịch chứa các tệp sau:

• manifest.json lưu gốc tọa độ, ranh giới, danh sách tile, lưới địa hình, mặt cầu và thông tin ghi công.
• t_<x>_<z>.bin lưu một tile gồm các tòa nhà, bề mặt mặt đất, vạch đường, vật thể, dây điện và biển báo.
• terrain.bin lưu lưới độ cao địa hình Float32 với khoảng cách năm mét.
• roads.json lưu đồ thị đường, cao độ các điểm và các nút giao có đèn tín hiệu.
• rails.json và structures.json lưu các tuyến đường sắt, sân ga, mái che và cầu đi bộ.
• backdrop.bin lưu địa hình thô tùy chọn bao quanh một khu vực.

Thêm hoặc Cấu hình Khu vực

Để thêm một thành phố khác có dữ liệu PLATEAU, hãy định nghĩa một mục trong tools/pipeline/config.mjs. Một khu vực chỉ định điểm trung tâm và các ô lưới PLATEAU cần xử lý. Khu vực cũng có thể định nghĩa kích thước nền bao quanh tùy chọn và góc nhìn camera lúc mở.

Tất cả tập lệnh pipeline đều chấp nhận cùng một tùy chọn khu vực:

npm run fetch -- --area=my-area
npm run compile -- --area=my-area
npm run preview -- --area=my-area

Các tệp PLATEAU được tải thông qua API danh mục dữ liệu PLATEAU. Pipeline loại bỏ bản ghi trùng lặp theo gml:id, điều này rất quan trọng khi một ô dữ liệu Tokyo xuất hiện trong nhiều quận. Mức độ bao phủ khác nhau giữa các thành phố, vì vậy máy khách sẽ dùng chi tiết được tạo tự động khi không có vỏ chi tiết, kết cấu ảnh hoặc vật dụng đường phố.

Chi tiết Kỹ thuật Nâng cao

Địa hình, Đường và Cầu

Dữ liệu PLATEAU, OpenStreetMap và GSI được chiếu vào một lưới mét cục bộ duy nhất. Lưới độ cao chung với khoảng cách năm mét giúp các tile liền kề có độ cao giống hệt nhau dọc theo cạnh. Chân tòa nhà được kiểm tra so với địa hình trong quá trình biên dịch và phần chênh lệch được ghi lại.

Các đường bao mặt đường thiếu chi tiết được tách thành phần xe chạy và vỉa hè bằng các đường tâm của OpenStreetMap. Cầu và cầu vượt sử dụng các biên dạng riêng: cầu đường phố được cân bằng từ bờ này sang bờ kia, đường cao tốc được nâng theo tầng, còn đường dốc được tạo độ dốc để kết nối chính xác.

Ánh sáng và Phản chiếu

Thay vì tạo một nguồn sáng động riêng cho từng đèn, đèn đường và đèn pha được vẽ vào bản đồ ánh sáng. Các nguồn chồng lấp giữ lại giá trị sáng hơn, trong khi dữ liệu độ cao của đèn ngăn ánh sáng bên dưới cầu vượt chiếu sáng mặt cầu.

Phản chiếu trên mặt nước vẽ thành phố lần thứ hai bên dưới bề mặt nước. Gợn sóng làm biến dạng kết quả, còn phản chiếu mây lấy mẫu từ bản đồ thời tiết. Các ô cửa kính được đánh dấu trong kênh alpha của bộ đệm màu và được xử lý trong một lượt phản chiếu không gian màn hình.

Kết xuất và Hiệu năng

Bộ kết xuất sử dụng three.js cùng composer postprocessing của pmndrs. Các hiệu ứng bao gồm che khuất môi trường n8ao, phản chiếu, khí quyển, mây, phát sáng và ánh xạ tông màu. Chim được định vị trong vertex shader, cho phép các đàn lớn sử dụng rất ít thời gian CPU.

Để có hiệu năng tốt hơn, hãy giữ bán kính hoạt động ở mức vừa phải, giảm số lượng ô tô và chim, tắt mây hoặc hạ chất lượng kết xuất trong bảng Cài đặt. Chế độ truyền mặc định tải các tile lân cận; tùy chọn toàn thành phố tải tất cả tile hiện có và có thể cần nhiều bộ nhớ hơn đáng kể.

Triển khai Trang Đã Biên dịch

Sau khi biên dịch các khu vực muốn xuất bản, hãy chạy:

npm run deploy

Lệnh này xây dựng bản phân phối và force-push dist/ dưới dạng một commit duy nhất lên nhánh gh-pages của origin trong kho lưu trữ. Bản triển khai bao gồm các thành phố đã được biên dịch trên máy đó. README ước tính khoảng 650 MB cho bảy khu vực đi kèm.

Ghi công và Cấp phép Dữ liệu

Mã nguồn được phát hành theo Giấy phép MIT, nhưng dữ liệu thành phố vẫn chịu sự điều chỉnh của các điều khoản từ những nguồn gốc tương ứng. Project PLATEAU cung cấp các mô hình thành phố 3D, ảnh mái nhà, cầu và nội thất đường phố. GSI cung cấp dữ liệu độ cao và ảnh chụp từ trên không. Những người đóng góp cho OpenStreetMap cung cấp đường bộ, đường sắt và địa điểm theo giấy phép ODbL. Các kết cấu của Poly Haven được cấp phép CC0, cây cối sử dụng ez-tree theo MIT, còn các thành phần khí quyển và mây đến từ three-geospatial theo MIT.

Kết luận

Procedural Tokyo cho thấy các bộ dữ liệu địa không gian công khai có thể trở thành một trải nghiệm trình duyệt giàu tính chuyển động như thế nào. Để làm việc với dự án, hãy cài đặt các phần phụ thuộc, tải xuống kết cấu và dữ liệu khu vực, biên dịch dữ liệu thành các ô rồi khởi chạy máy chủ phát triển. Từ đó, các tham số URL, cấu hình pipeline, bài kiểm thử và lệnh triển khai cung cấp những cách thiết thực để khám phá và mở rộng dự án.