Chạy, xây dựng và khám phá Portals: 471 thế giới 3D được tạo tự động

Portals là gì?

Portals là một chuyến bay qua trình duyệt, không cần điều khiển, xuyên qua 471 thế giới 3D được tạo tự động. Máy quay đi theo một lộ trình định sẵn, đến một cổng và đi thẳng vào thế giới đang chạy tiếp theo mà không cắt cảnh hay mờ dần. Bạn không điều khiển hướng bay, nhưng có thể kiểm soát tốc độ, cách trình bày, âm thanh, đồ họa và lựa chọn thế giới.

Dự án được xây dựng bằng JavaScript và three.js. Mỗi thế giới tạo hình học và kết cấu ngay trong trình duyệt, còn âm thanh được tổng hợp trong khi phát. Các thế giới không tải mô hình 3D, ảnh kết cấu hay tệp âm thanh bên ngoài. Đây cũng là một trang web tĩnh: không cần tài khoản, máy chủ ứng dụng hay dịch vụ theo dõi.

Kho lưu trữ đại diện cho bản phát hành s8f tính đến ngày 9 tháng 11 năm 2026. Bản phát hành đó chứa khoảng 1,4 triệu dòng JavaScript và 471 thế giới.

Tính năng chính

• 471 thế giới được tạo tự động: Bộ sưu tập bao gồm vùng hoang dã, thành phố, đại dương, không gian nội thất, bầu trời, bối cảnh ngoài hành tinh, cảnh tiền sử, địa điểm lấy cảm hứng từ nghệ thuật, thế giới văn học, cảm hứng từ điện ảnh và truyền hình, kỳ quan cổ đại cùng những trò đùa nội bộ về AI.
• Cổng liền mạch: Thế giới hiện tại và thế giới phía bên kia cổng chạy đồng thời, cho phép máy quay đi qua mà không cần màn hình chuyển tiếp.
• Tài sản được tạo theo quy trình: Hình học, kết cấu và âm thanh được tạo trong trình duyệt thay vì tải dưới dạng tài sản thế giới thông thường.
• Bay tự động: Mỗi thế giới cung cấp một lộ trình và thời lượng cho máy quay. Hầu hết chuyến bay kéo dài khoảng 40 đến 50 giây.
• Đồ họa thích ứng: Chế độ tự động ước tính mức chất lượng từ card đồ họa và điều chỉnh độ phân giải kết xuất để duy trì chuyển động mượt mà.
• Tùy chọn cục bộ: Các thế giới đã xem, mục yêu thích và cài đặt được lưu trong bộ nhớ trình duyệt.
• Thư viện và hành trình: Thư viện hiển thị tất cả thế giới, còn 20 hành trình được tuyển chọn sẽ phát các thế giới đã chọn theo thứ tự cố định.
• Triển khai tĩnh: Bản build dành cho môi trường production tạo các tệp thông thường trong dist, có thể được cung cấp bởi một máy chủ web tĩnh.

Điều kiện cần

Bạn cần Node.js 18 trở lên và Git. Bản xem trước trực tiếp từ mã nguồn không yêu cầu cài đặt hay build. Nên sử dụng card đồ họa chuyên dụng, dù dự án vẫn có thể chạy ở chất lượng thấp hơn trên điện thoại và laptop cũ.

Xác nhận phiên bản Node.js:

node --version

Nếu kết quả thấp hơn phiên bản 18, hãy cập nhật Node.js trước khi tiếp tục.

Chạy Portals trực tiếp từ mã nguồn

1. Sao chép kho lưu trữ

git clone https://github.com/emollick/ai-portals.git
cd ai-portals

2. Khởi động máy chủ mã nguồn cục bộ

npm start

Mở http://localhost:8000 trong trình duyệt. Lệnh này cung cấp cây mã nguồn ở trạng thái hiện tại, không cần cài đặt gói hay biên dịch trước.

Bản xem trước mã nguồn có hai giới hạn được dự kiến. Thư viện không thể nhận diện các thế giới mới được thêm vào hoặc hiển thị trang mô tả đã tạo. Trong lần truy cập đầu tiên, bảng điều khiển trình duyệt cũng báo thiếu tệp atlas.json vì tệp này chỉ được tạo trong quá trình build.

Tạo và xem trước bản build production

Cài đặt các phần phụ thuộc build, tạo gói triển khai và khởi động máy chủ xem trước:

npm install
npm run build
npm run preview

Trang web tĩnh được tạo sẽ nằm trong dist. Mở http://localhost:8001 để kiểm tra.

Bản build nén các tập lệnh của dự án bằng esbuild và tạo các tài nguyên chỉ dành cho triển khai, bao gồm:

• Một trang xem trước chia sẻ nhỏ cho mỗi thế giới và hành trình.
• Một trang đơn giản liệt kê mọi thế giới cùng phần mô tả.
• Dữ liệu thư viện ghi lại những thế giới nào là mới.
• Tệp cấu hình máy chủ.

Tái tạo bản phát hành s8f

Quá trình build chấp nhận một dấu phiên bản. Theo tài liệu của kho lưu trữ, lệnh sau đã tái tạo tệp bản phát hành s8f đang hoạt động, giống từng tệp và từng byte, vào ngày 9 tháng 11 năm 2026:

npm run build -- --stamp s8f

Sử dụng bản build thông thường trong quá trình phát triển. Sử dụng dấu phiên bản khi bạn cần cụ thể siêu dữ liệu bản phát hành hoặc muốn tái tạo bản phát hành được ghi lại.

Điều khiển và cách sử dụng cơ bản

Portals bắt đầu bay tự động. Âm thanh được tắt lúc đầu, vì vậy hãy nhấn S nếu bạn muốn nghe nhạc nền được tổng hợp. Các phím điều khiển gồm:

• Phím cách: Tạm dừng hoặc tiếp tục chuyến bay.
• Mũi tên phải: Tăng tốc đến cổng tiếp theo.
• S: Bật hoặc tắt âm thanh.
• G: Bật chế độ Gentle để máy quay ổn định hơn và đường chân trời cân bằng.
• H: Lưu thế giới hiện tại vào mục yêu thích.
• P: Lưu ảnh.
• I: Mở giao diện thư viện, hành trình và tìm kiếm.
• O: Mở các tùy chọn đồ họa, máy quay, phong cách nghệ thuật, chuyến đi, bạn đồng hành và thời gian trong ngày.
• F: Bật hoặc thoát chế độ toàn màn hình.

Di chuyển chuột sẽ hiển thị thanh điều khiển ở cuối màn hình. Thanh này có các nút tương ứng với những phím điều khiển, cùng với thanh trượt Nhịp độ và thanh trượt Từ Trần tục đến Kỳ lạ. Trong các cửa sổ hẹp, các thanh trượt được chuyển vào giao diện tùy chọn.

Một lần khám phá đầu tiên hữu ích

1. Khởi chạy bản xem trước nguồn hoặc bản xem trước sản xuất.
2. Nhấn S để bật âm thanh.
3. Để một thế giới hoàn chỉnh phát hết để quan sát cách băng qua cổng thông thường.
4. Nhấn G nếu chuyển động của camera khiến bạn khó chịu.
5. Mở thư viện bằng I rồi tìm kiếm hoặc duyệt toàn bộ bộ sưu tập.
6. Điều chỉnh Từ Trần tục đến Kỳ lạ để thay đổi tần suất chọn các thế giới khác thường.
7. Nhấn H khi gặp một thế giới muốn lưu làm mục yêu thích.

Cách các cổng liền mạch hoạt động

Khoảng một giây sau khi băng qua, công cụ sẽ chọn thế giới tiếp theo. Nó dựng thế giới đó từng vài mili giây giữa các khung hình được kết xuất, sau đó làm nóng trước shader và kết cấu trong khi thế giới vẫn khuất khỏi tầm nhìn.

Điểm đến không phải là một bản xem trước tĩnh. Một camera thứ hai kết xuất thế giới tiếp theo đang hoạt động vào phần mở của cổng trong mỗi khung hình. Ngay trước khi camera đến cổng, công cụ chuyển điểm đến thành thế giới hiện tại và tiếp tục chuyến bay. Nếu quá trình chuẩn bị chưa hoàn tất, chuyến bay hiện tại sẽ chậm lại và chờ trước cổng.

Cách các thế giới được chọn

Bộ chọn ưu tiên những thế giới mà khách truy cập chưa từng thấy. Trong khoảng mười hai thế giới đầu tiên của một lượt truy cập, bộ chọn ưu tiên các thế giới được những tác nhân đánh giá của dự án chấm điểm cao nhất. Mỗi thế giới có một cấp chất lượng từ 1 đến 5, và các cấp này giúp quyết định trải nghiệm nào xuất hiện sớm.

Bộ chọn cũng tìm kiếm sự tương phản. Nó có xu hướng chọn một điểm đến khác với bối cảnh hiện tại về loại hình, độ sáng hoặc nhiệt độ. Thiết lập Từ Trần tục đến Kỳ lạ kiểm soát tần suất xuất hiện của những mục khác thường hơn.

Tìm hiểu bố cục dự án

Các tệp và thư mục quan trọng nhất gồm:

• index.html: Trang ứng dụng.
• src/main.js: Điều khiển bàn phím, tùy chọn và thanh điều khiển ở cuối màn hình.
• src/core: Các hệ thống chuyến bay, cổng, chọn thế giới, âm thanh và chất lượng đồ họa.
• src/kit: Các thành phần dựng thế giới dùng chung như bầu trời, nước, địa hình, thực vật, động vật, tòa nhà và nội thất.
• src/worlds: Mỗi thế giới một mô-đun, danh mục thế giới và sảnh mở đầu.
• src/parts: Các thành phần cảnh chính được từng thế giới sử dụng.
• src/extras.js: Danh sách trò chơi, bạn đồng hành và phong cách nghệ thuật.
• src/rides, src/companions và src/styles: Các phần triển khai của những nội dung bổ sung đó.
• src/ui: Mã thư viện và chia sẻ, cùng với ui.css, tệp biểu định kiểu duy nhất của trang.
• vendor/three: Thư viện three.js được đóng gói.
• thumbs: Hình ảnh thu nhỏ của thư viện.
• design: Văn bản thế giới và các bảng thời điểm phát hành được quá trình build đọc.
• tools: Tập lệnh build và máy chủ cục bộ.

Cấu trúc của một mô-đun thế giới

Một thế giới là một tệp nằm dưới src/worlds. Export mặc định của tệp là một đối tượng chứa hàm build. Thế giới cũng phải được đăng ký trong src/worlds/index.js cùng với tiêu đề, loại và chú thích, vì cả bộ chọn lẫn thư viện đều đọc danh sách đó.

Hàm build trả về ba thành phần thiết yếu:

• Một scene three.js.
• Một đường đi của camera.
• Một khoảng thời gian bay.

Hầu hết các thế giới đặt thành phần cảnh chính trong một tệp riêng dưới src/parts. Các tiện ích dùng chung trong src/kit cung cấp những thành phần có thể tái sử dụng, thay vì yêu cầu mỗi thế giới tự triển khai các cảnh nền phổ biến.

Quy trình an toàn để nghiên cứu hoặc mở rộng thế giới

1. Chọn một thế giới hiện có dưới src/worlds giống với loại môi trường bạn muốn tìm hiểu.
2. Lần theo các import của thế giới đó vào src/parts và src/kit để xem scene được lắp ráp như thế nào.
3. Kiểm tra export mặc định và hàm build để tìm hiểu cấu trúc đối tượng thực tế cũng như các quy ước về đường đi camera của kho mã.
4. Kiểm tra phần đăng ký tương ứng trong src/worlds/index.js để biết siêu dữ liệu bắt buộc gồm tiêu đề, loại và chú thích.
5. Chạy npm start để kiểm thử nhanh mã nguồn.
6. Tạo bản build sản xuất để xác minh các tài nguyên thư viện và chia sẻ được tạo ra.

Kho mã này lớn một cách khác thường, vì vậy điều chỉnh một thế giới gần giống sẽ an toàn hơn việc cố suy ra các API chưa được ghi chép hoặc tự xây dựng một mô-đun từ đầu.

Hoạt động của âm thanh và đồ họa

Tổng hợp âm thanh

Mỗi thế giới nhận được một hợp âm chậm và một số tiếng chuông. Hầu hết cũng sử dụng một lớp âm thanh nền yên tĩnh, chẳng hạn như tiếng gió, nước, âm thanh căn phòng hoặc tiếng ù đều đặn của không gian. Một thế giới có thể thêm tối đa ba lớp được chọn từ mười chín hiệu ứng có sẵn, bao gồm mưa, sóng biển, chim và tiếng chuông xa. Công cụ âm thanh của trình duyệt tổng hợp các âm thanh này thay vì tải tệp âm thanh.

Chất lượng đồ họa tự động

Khi đồ họa được đặt thành Tự động, Portals sẽ ước tính mức chất lượng phù hợp dựa trên card đồ họa. Sau đó, ứng dụng tăng hoặc giảm độ phân giải kết xuất để giúp duy trì chuyến bay mượt mà. Trên máy tính xách tay hoặc điện thoại cũ, hãy bật Tự động trước khi thử các thiết lập yêu cầu cao hơn.

Mẹo nâng cao

Sử dụng chế độ Nhẹ nhàng để hỗ trợ khả năng tiếp cận

Nhấn G để giữ camera ổn định hơn và đường chân trời cân bằng. Đây là thiết lập đầu tiên nên thử nếu chế độ bay bình thường gây khó chịu.

Kiểm tra cả phiên bản mã nguồn và phiên bản đã build

Sử dụng máy chủ mã nguồn để lặp nhanh, nhưng luôn kiểm tra bản build trong dist trước khi triển khai. Một số dữ liệu thư viện, trang mô tả, bản xem trước khi chia sẻ và thiết lập lưu trữ chỉ xuất hiện sau khi build.

Kiểm tra khả năng sẵn sàng của cổng, không chỉ giao diện cảnh

Một thế giới phải sẵn sàng trước khi chuyển qua cổng. Khi thay đổi mã thế giới, hãy theo dõi quá trình tiếp cận cổng của thế giới đó cũng như chính cảnh đích. Việc tạo dữ liệu nặng hoặc chuẩn bị shader có thể khiến chuyến bay chậm lại trong lúc chờ.

Sử dụng hành trình cho các chuỗi có thể lặp lại

Portals có 20 hành trình phát các thế giới theo một thứ tự cố định. Ví dụ gồm One Drop of Water, đưa bạn từ một viên mưa đá đến biển sâu, và Zooming Out, bắt đầu bên trong một tế bào sống. Các chuỗi cố định rất hữu ích khi bạn muốn có trải nghiệm được định hướng rõ hơn so với trình chọn thông thường.

Tôn trọng ranh giới lưu trữ và quyền riêng tư

Ứng dụng không có backend và không gửi dữ liệu tài khoản, theo dõi, mục yêu thích hoặc thiết lập đến máy chủ. Khi gỡ lỗi hành vi của mục yêu thích hoặc thế giới đã xem, hãy nhớ rằng các giá trị này được trình duyệt lưu trữ.

Kiểm tra giấy phép trước khi công bố thay đổi

Kho mã nguồn được phân phối theo CC BY-NC-SA 4.0, cho phép chia sẻ và chuyển thể phi thương mại với điều kiện ghi công và sử dụng cùng giấy phép. three.js và một số hàm ngắn sử dụng các điều khoản riêng. Hãy đọc LICENSE và THIRD-PARTY-NOTICES.txt trước khi phân phối lại bản build đã sửa đổi, đặc biệt vì README ghi lại nguồn gốc bổ sung của shader và các hàm tiện ích.

Kết luận

Portals kết hợp các cảnh three.js tạo sinh, âm thanh tổng hợp, đồ họa thích ứng, việc tạo thế giới trong nền và khả năng kết xuất hai thế giới để tạo nên một hành trình liền mạch trên trình duyệt. Bạn có thể khám phá ngay mã nguồn bằng npm start, tạo toàn bộ trang web sẵn sàng triển khai bằng npm run build, đồng thời sử dụng bố cục dự án và các mô-đun thế giới hiện có làm hướng dẫn khi nghiên cứu hoặc mở rộng kiến trúc.