7 phút đọc
Trong cộng đồng phát triển web, việc xây dựng các ứng dụng mô phỏng không gian ba chiều thường đòi hỏi nhiều thư viện cồng kềnh và cấu hình phức tạp. Tuy nhiên, dự án mã nguồn mở tiny-world-builder của tác giả Jason Kneen đã chứng minh điều ngược lại. Đây là một trình chỉnh sửa thế giới voxel 3D độc lập hoạt động trực tiếp ngay trên trình duyệt web, cho phép người dùng tự do xây dựng, điêu khắc, bay lượn trải nghiệm và chia sẻ những thế giới tí hon của riêng mình.
Tính đến bản cập nhật ngày 22/08/2026, kho lưu trữ này đã đạt được 1.526 ngôi sao (stars) và 203 lượt chia sẻ mã nguồn (forks) trên GitHub. Với ngôn ngữ lập trình chính là JavaScript, dự án thu hút sự chú ý mạnh mẽ từ giới lập trình nhờ sự tối giản trong kiến trúc và khả năng vận hành mượt mà không phụ thuộc vào các dịch vụ bên ngoài.
Kiến trúc vận hành độc lập và khả năng triển khai tĩnh nhanh chóng
Ứng dụng tiny-world-builder được thiết kế để triển khai như một trang web tĩnh trên các nền tảng phổ biến như Vercel hoặc Netlify. Cả hai cấu hình máy chủ này đều khởi chạy tệp lệnh ./publish.sh và phục vụ thư mục dist/ được tạo ra sau đó. Trang đích của ứng dụng nằm tại tệp index.html ở thư mục gốc, trong khi bộ công cụ xây dựng luôn sẵn sàng hoạt động tại các đường dẫn /tiny-world-builder.html và /tiny-world-builder.
Điểm đặc biệt giúp hệ thống này hoạt động hoàn toàn độc lập là việc tự lưu trữ (self-hosted) thư viện Three.js phiên bản r185 cùng các bộ tải/giải mã (loaders/decoders) đi kèm ngay trong thư mục vendor/three/. Nhờ đó, quá trình vận hành và triển khai thực tế hoàn toàn không bị lệ thuộc vào các mạng phân phối nội dung (CDN) bên ngoài.
Netlify Identity đóng vai trò là nhà cung cấp tài khoản qua email hoặc OAuth cho hệ thống. Ngoài ra, việc đăng nhập bằng ví điện tử Phantom cũng sử dụng chung các API tài khoản này sau khi ví ký thực hiện một thử thách từ máy chủ (server challenge), từ đó trả về một mã token phiên làm việc của ví đã được ký mã hóa. Người dùng cần thiết lập biến môi trường
TINYWORLD_WALLET_SESSION_SECRETtrong Netlify trước khi kích hoạt tính năng đăng nhập bằng ví trên môi trường thực tế.
Hệ thống giao thông thông minh và thuật toán tự động nhận diện địa hình
Mặc định, khi người dùng tải ứng dụng, hệ thống sẽ tự động tạo ra một bản đồ kích thước cố định 20×20 với các tuyến đường trục chính, đường vành đai, cầu vượt sông, các điểm cuối ngõ cụt và 36 phương tiện giao thông vận hành liên tục trên các lộ trình dài. Cơ chế này cực kỳ hữu ích cho việc kiểm tra quy hoạch tuyến đường hoặc đánh giá quy mô lưu lượng giao thông. Việc thay đổi giá trị seed= trên URL sẽ giúp tạo ra cùng một bố cục đường sá nhưng với các cảnh quan xung quanh được thay đổi một cách nhất quán.
Điểm nhấn công nghệ của tiny-world-builder nằm ở trí tuệ nhân tạo của các phương tiện di chuyển:
- Các phương tiện chỉ di chuyển trên các ô đường đi (path) hoặc ô cầu (được dùng làm cầu đường bộ).
- Các vật thể như đá, cây cối, nhà cửa hoặc hàng rào khi được đặt lên đường đi sẽ ngay lập tức trở thành vật cản giao thông. Lúc này, các phương tiện đang hoạt động sẽ tự động tìm tuyến đường thay thế để đi vòng qua, hoặc dừng lại hoàn toàn nếu không còn lối đi nào khác.
- Hệ thống kiểm tra va chạm thời gian thực ngăn các xe đi xuyên qua nhau. Các xe sẽ tự động phanh hoặc nhường đường trong phạm vi va chạm an toàn. Nếu bị chặn quá lâu, chúng sẽ tự tìm đường đi mới xung quanh ô đường bị tắc nghẽn nếu mạng lưới giao thông có lối rẽ khác.
Bên cạnh đó, trình chỉnh sửa cung cấp một danh sách vật liệu phong phú để người dùng tương tác bao gồm: Cỏ, Đường đi, Đất, Nước, Đá, Dung nham, Cát, Tuyết, Nhà ở, Cây cối, Hàng rào, Đá tảng, Cầu, Cây trồng, Ngô, Lúa mì, Bí ngô, Cà rốt, Hoa hướng dương, Bụi cỏ, Hoa, Bụi cây, Bò, Cừu và công cụ Xóa.
Các quy tắc về địa hình và vật thể được bộ dựng hình (renderer) chuẩn hóa chặt chẽ. Ví dụ, cây trồng bắt buộc phải có đất ở bên dưới, cầu buộc phải bắc qua nước, và các vật thể thông thường sẽ không thể nổi trên mặt nước. Hơn thế nữa, các yếu tố như đường đi, đường bờ biển, bọt nước, cầu, hàng rào, tường lâu đài, nhà cửa và đá tảng đều có khả năng tự nhận diện các ô lân cận (adjacency-aware). Khi đặt một vật thể bên cạnh, hệ thống sẽ tự động dựng lại các ô xung quanh để liên kết đường sá, tạo bờ sông, cập nhật hướng cầu, nối các bức tường rào, gộp cụm nhà thành các khối hình chữ L, T, dấu cộng (+) hoặc hình vuông, và biến các ô đá đơn lẻ thành các mỏm đá gồ ghề.
Cấu trúc mã nguồn tinh gọn trong một tệp JavaScript duy nhất
Mặc dù sở hữu những tính năng phức tạp, toàn bộ logic cốt lõi của dự án được gói gọn trong một khối script duy nhất chứa khoảng 29.000 dòng mã JavaScript thuần (vanilla JS). Mã nguồn được tổ chức ngăn nắp theo từng phần bằng các dòng chú thích phân đoạn dạng // -------- xyz --------. Mô hình dữ liệu của ứng dụng được phân tách rất rõ ràng:
- Các cụm nhà sử dụng thuật toán tìm kiếm theo chiều rộng (BFS –
bfsHouseCluster) kết hợp với các hàm kiểm tra ghép nốitryCompositevàtrySquaređể quyết định xem một nhóm các ô nhà có nên được dựng thành một cấu trúc thống nhất hay các khối hình chữ nhật kéo dài. - Hàng đợi hoạt ảnh
dropAnimschung giúp xử lý hiệu ứng chuyển động mượt mà (ease-out) khi các ô hoặc vật thể mới rơi vào vị trí. Các hoạt ảnh theo từng khung hình khác (như cây đung đưa, cây trồng nhấp nhô, nguồn khói) sẽ kiểm tra thuộc tínhobj.userData.landingđể tạm dừng chuyển động trong khi vật thể vẫn đang rơi xuống.
Người dùng cũng có thể trực tiếp điều khiển các phương tiện đang chạy thông qua đường dẫn relay/API tương tự như cách tệp send-command.js hoạt động. Để kiểm tra thủ công sau các thay đổi về giao diện, tác giả đã thiết lập một danh sách kiểm tra nhanh trên trình duyệt bao gồm: tải trang không lỗi console, các tính năng đặt/xóa hoạt động bình thường, các phím tắt công cụ phản hồi tốt, các hàng rào lân cận tự cập nhật chính xác và bóng mây ở mức 0% vẫn giữ lại các đám mây hiển thị được.
Những điểm còn bỏ ngỏ của dự án
Mặc dù tài liệu hướng dẫn mở rộng mã nguồn đã được cung cấp chi tiết trong tệp AGENTS.md, dự án tiny-world-builder vẫn còn một số điểm chưa được làm rõ. Nguồn tài liệu chưa đề cập chi tiết đến hiệu năng xử lý thực tế của trình duyệt khi mở rộng kích thước bản đồ lên cấu hình cực đại vượt quá mức 20×20 mặc định, cũng như cách thức tối ưu hóa bộ nhớ khi tệp JavaScript duy nhất tiếp tục phình to trong tương lai. Ngoài ra, việc tương tác trên các thiết bị di động có màn hình cảm ứng hiện vẫn chưa được mô tả cụ thể trong tài liệu kỹ thuật hiện tại của kho lưu trữ.
Nguồn tham khảo: Xem bài gốc
