- Đây là website portfolio 3D do nhà phát triển web Bruno Simon tạo ra, mang đến một môi trường tương tác nơi người dùng lái xe để khám phá
- Được xây dựng trên Three.js, trang web hiện thực hóa kết xuất 3D thời gian thực bằng cách tận dụng cả WebGL và WebGPU
- Bên trong website có các yếu tố mang tính game như hệ thống thành tích, các yếu tố bí mật, và tính năng tin nhắn của khách truy cập (Whisper)
- Toàn bộ mã nguồn và file Blender được công khai trên GitHub theo giấy phép MIT, còn nhạc được phát hành theo giấy phép CC0 để có thể tự do sử dụng
- Đây là một portfolio tiêu biểu cho thấy tiềm năng của trải nghiệm web 3D, khi kết hợp công nghệ web với tương tác sáng tạo
Tổng quan về portfolio 3D của Bruno Simon
- Đây là một portfolio tương tác theo dạng thế giới 3D trên web, nơi bạn có thể khám phá và trải nghiệm các dự án cũng như thử nghiệm của tác giả
- Người dùng có thể điều khiển một chiếc xe đi quanh không gian ảo và tương tác với nhiều vật thể khác nhau
- Câu khẩu hiệu “Don’t break anything!” tạo nên bầu không khí khám phá vui nhộn
- Hỗ trợ cả điều khiển bàn phím như WASD, phím mũi tên, Space, Enter và nhập liệu bằng cảm ứng hoặc gamepad
- Cung cấp nhiều thao tác như di chuyển, nhảy, phanh, tăng tốc, còi, hệ thống treo, v.v.
Yếu tố game và hệ thống thành tích
- Website có 38 thành tích (Achievements) có thể mở khóa thông qua những hành động nhất định
- Ví dụ: “Traveler” (ghé thăm mọi khu vực), “Cookie Clicker” (chấp nhận 1000 cookie), “Flip of faith” (thực hiện backflip thành công), v.v.
- Bao gồm nhiều điều kiện khác nhau như quãng đường lái xe, trải nghiệm thời tiết, phá hủy thùng nổ, v.v.
- Thời gian đạt thành tích và tiến độ được hiển thị theo thời gian thực, đồng thời còn có bảng xếp hạng máy chủ (Leaderboard)
- Tuy nhiên, nếu máy chủ ngoại tuyến thì không thể lưu điểm
Whisper và tính năng cộng đồng
- Khách truy cập có thể để lại tin nhắn ngắn qua tính năng Whisper
- Tối đa 30 ký tự, mỗi người dùng chỉ được để lại một tin nhắn
- Khi có tin nhắn mới được thêm vào, các tin nhắn cũ sẽ bị xóa
- Cấm chửi tục và có thể chọn cờ quốc gia
- Nếu máy chủ Whisper ngoại tuyến thì tính năng nhắn tin sẽ bị vô hiệu hóa
Tech stack và cấu trúc mã nguồn mở
- Phần kết xuất 3D được triển khai bằng Three.js
- Three.js là thư viện do mr.doob tạo ra, và nhờ TSL (Three.js Shading Language) do Sunag bổ sung mà hỗ trợ cả WebGL lẫn WebGPU
- Engine vật lý dùng Rapier, âm thanh dùng Howler.js, font chữ dùng Amatic SC và Nunito
- Toàn bộ mã nguồn được công khai trên GitHub (brunosimon/folio-2025) theo giấy phép MIT
- Kèm cả file Blender nên có thể tự do chỉnh sửa và học tập
- Mã máy chủ không được công khai vì lý do bảo mật, nhưng portfolio vẫn hoạt động mà không cần máy chủ
Âm nhạc và tài liệu bổ sung
- Nhạc nền được Kounine sáng tác riêng cho portfolio này
- Được phát hành theo giấy phép CC0, nên có thể tự do tải xuống và tái sử dụng
- Có sẵn trong kho GitHub tại đường dẫn
/static/sounds/musics
- Còn có tài liệu học Three.js thông qua khóa học trực tuyến Three.js Journey
- Bao quát toàn bộ quá trình tạo web 3D với Three.js
- Quá trình phát triển portfolio cũng được ghi lại qua series Devlog trên YouTube
- Ngay cả sau khi hoàn thành, video cuối cùng vẫn đang tiếp tục được thực hiện
Ý nghĩa tổng thể
- Portfolio của Bruno Simon là một ví dụ kết hợp giữa công nghệ web, tương tác game và biểu đạt nghệ thuật
- Nhờ mã nguồn mở và giấy phép tự do, nó có thể được dùng như một dự án web 3D có thể học hỏi và tái sử dụng
- Với vai trò là ví dụ triển khai thực tế của hệ sinh thái Three.js và kết xuất dựa trên WebGPU, đây là một tác phẩm cho thấy hướng đi của đồ họa web thế hệ mới
4 bình luận
Chẳng phải chỉ là game thôi sao ..
Vị giám đốc phát triển từng phớt lờ ý kiến dùng tjs cho dự án cốt lõi của công ty và khăng khăng đòi dùng babylon.js... Không những chẳng chịu trách nhiệm cho quyết định của mình mà còn kéo cả công ty và nhân sự ra ngoài để lập công ty mới... Giờ anh vẫn sống tốt chứ?
Tôi chỉ mở tạm lên để test một lúc thôi mà... chiếc M1 MacBook của tôi sắp cất cánh rồi. Nhưng đúng là nó rất xuất sắc.
Ý kiến trên Hacker News
Tải lại 1~2 lần thì hiện lên bình thường, nhìn chung là một tác phẩm rất ấn tượng
Chỉ là sẽ tốt hơn nếu có thể zoom out xa hơn. Xin gửi lời khen tới Bruno
Có các đối tượng đền thờ nhỏ tượng trưng cho từng mạng xã hội, tông vào bằng xe thì chúng đổ xuống nhưng vẫn có thể bấm vào liên kết
Cũng có trạng thái toàn cục, ví dụ lao vào cổng portal thì bộ đếm “dâng tế cho vị thần hỗn loạn” sẽ tăng lên
Nhìn chung phong cách nghệ thuật rất nhất quán, và sau khi khám phá khoảng 5 phút, tôi thấy nó được hoàn thiện khá tốt
Tuy vậy, có lẽ đúng hơn là xem nó như một trang portfolio được làm rất chỉn chu, hơn là “trang web 3D ngầu nhất” như tiêu đề trên HN nói
Ngày xưa tôi cũng từng như vậy với trò miễn phí Chex Quest đi kèm trong hộp ngũ cốc
Nhưng bây giờ tôi chỉ xem trang khoảng 30 giây, nghĩ “ngầu đấy” rồi đóng lại ngay
Có lẽ là do (A) giá trị thời gian đã thay đổi, (B) ngưỡng đắm chìm vào game đã cao hơn, (C) tôi đã dành quá nhiều thời gian cho game rồi
Trong 10 năm qua đã có vô số demo three.js/babylon.js, và cái này ở mức khoảng top 10%
Nó vui và chất lượng cao, nhưng không có gì mới, và hiệu quả truyền tải thông tin thì thấp
So với game 3D indie thì độ hoàn thiện cũng vẫn còn khá xa
Nếu lời giới thiệu của một người mới học threejs có chút giá trị nào, thì tôi rất khuyến nghị
Chỉ là khi lái bằng ngón tay, menu nhấn giữ của iOS thường xuyên bật lên làm mất cảm giác nhập vai
Tôi cảm nhận được sự chăm chút trong từng chi tiết và sự thích thú, còn tôi đã chơi minigame đua xe cùng con trai
Tôi tự hỏi những người đạt mốc 20 giây đã làm thế nào. Có phải có speed boost không?
Tôi nghĩ giá trị thật của công nghệ nằm ở chỗ “liệu nó có cho phép làm điều mà trước đây không làm được hay không”
Ví dụ, khi con người thời đồ đá phát hiện ra rìu thép, điều quan trọng không phải là bản thân cái rìu mà là luyện kim
Tương tự, thứ quan trọng hơn bitcoin là công nghệ mật mã, và thứ quan trọng hơn threejs là bạn có thể tạo ra điều mới mẻ gì với nó
Cá nhân tôi cảm thấy với threejs, react-three-fiber, shader v.v. còn có thể làm được nhiều hơn thế rất nhiều
Điều tôi cho là “ngầu” là thứ khiến ta nhìn thế giới theo cách khác đi
Có thể lấy demo CodePen này làm ví dụ
Tôi đã kỳ vọng vào một đổi mới trong trải nghiệm điều hướng đủ để biện minh cho việc dùng 3D, nhưng phần đó thì hơi đáng tiếc