Chào các bạn, mình là Thuận, mình đang làm việc bên bộ phận AR/ VR (Unity developer) tại công ty OneTech Asia. Trong chủ đề lần này, Thuận sẽ chia sẻ cho các bạn về cách tạo không gian ảo 3D trên web với Mozilla Hubs nhé.
Thông qua Mozilla Hubs các bạn có thể kiến tạo các không gian ảo 3D riêng tư hoặc chia sẻ cùng mọi người với nhiều mục đích khác nhau như giao tiếp và cộng tác làm việc. Trải nghiệm tham gia vào không gian với nhân vật đại diện mà không cần phải đeo cách thiết bị thực tế ảo như Meta Quest vì tất cả đang hiển thị ngay trên môi trường trình duyệt website quen thuộc.
Mozilla Hubs là gì?
Mozilla Hubs là một trang web trong đó cung cấp công cụ cộng tác được sử dụng để tạo không gian ảo cho người ở và thường xuyên sử dụng thực tế hỗn hợp. Có thể tương tác với công cụ thông qua các thiết bị VR hoặc bàn phím + chuột. Các khái niệm quan trọng bao gồm:
- Hubs (phòng Hubs) : là công cụ để trình bày và đánh giá thiết kế.
- Spoke: là trình chỉnh sửa cảnh và môi trường 3D.
Một số thông tin và liên kết cần thiế:
- Website: https://hubs.mozilla.com/
- Github: https://github.com/mozilla/hubs
- Tài liệu hướng dẫn: https://hubs.mozilla.com/docs/welcome.html
- Cộng đồng: https://discord.com/invite/dFJncWwHun
Thao tác thực hiện
Đăng nhập
Bạn cần có tài khoản để truy cập vào các danh mục trên “Mozilla Hubs”. Tài khoản sẽ được liên kết qua gmail. Nếu như đây là lần đầu đến với trang web thì bạn ấp vào Sign up để đăng ký tài khoản.
Tạo project
- Truy cập vào công cụ có tên “ Spoke” trên trang web “Mozilla Hubs”.
- Ấn vào Get Started.
Để bắt đầu tạo một không gian mới, bạn ấn vào mục New Project. Trang web cung cấp rất nhiều những không gian 3D có sẵn. Nhưng trong chủ đề lần này, mình xin chia sẻ cách tạo project từ import file 3D bên ngoài.
Import file
Công cụ “Spoke” chỉ cho phép nhận file 3D đuôi .glb. Có hai phương pháp phổ biến để covert file 3D đuôi .glb bao gồm:
Truy cấp trang web “Sketchfab” để convert file khác (fbx, obj,…) về đuôi .glb : Đây là một trang web chuyên xuất bản, mua bán và trao đổi các hình ảnh, đồ họa 3D. Link truy cập web: https://sketchfab.com/
Sử dụng phần mềm 3D “Blender”: Đây là một phầm mềm đồ họa 3D miễn phí và mã nguồn mở, được sử dụng nhiều trong các lĩnh vực: làm phim hoạt hình, kỹ xảo, video game,…
Thiết lập môi trường
Khi đã có mô hình 3D đuôi .glb, bạn chỉ cần kéo thả mô hình trực tiếp vào công cụ spoke. Để góp phần làm tăng tính sinh động cho không gian, công cụ cho phép chỉnh sửa các yếu tố sau:
- Ánh sáng: Spot Light, Direction Light, Point Light, Ambient Light.
- Âm thanh: Audio và Video.
- Hình ảnh: Media Frame và Image.
- Va chạm vật lý: Box Collider.
- Hiệu ứng: Simple Water và Particle Emitter.
Kết quả đạt được
Không gian 3D được hoàn thiện xong, có thể lưu lại thông qua thao tác : Publish to Hubs -> Đặt tên Project Name-> Save Project.
Lưu dự án
Công cụ cho phép chúng ta mời bạn bè tham quan không gian thông qua đường link nhận được. Bên cạnh đó có thể trao đổi thông qua tính năng chat và voice.
Tạm kết
Trên đây là toàn bộ nội dung về cách tạo dự án không gian 3D trên web “Mozilla Hubs”. Hy vọng, qua bài chia sẻ của mình các bạn có thêm kiến thức hay về trang web nhé.
