MOZILLA HUBS - HƯỚNG DẪN CÁCH TẠO KHÔNG 3D TRÊN WEB

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. 

Website Mozilla Hubs

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. 

Giao diện công cụ Spoke

Để 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/

Trang web Sketchfab

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,…

Giao diện phần mềm Blender

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.

Không gian môi trường của công cụ Spoke

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.

Không gian 3D được tạo trên Mozilla Hubs

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é.