Mozilla Hubs

What is Mozilla Hubs?

Mozilla Hubs is a collaboration tool used to create virtual spaces to be inhabited and frequented using mixed reality. It’s first-person nature (either by VR or keyboard + mouse) sets it apart from other browser-based collaboration tools. The Mozilla environment is powered through an interconnected environment  which can integrate many different platforms into its interface. Hubs offers innovative solutions for replacing non-physical interactions and can be used to encourage interaction between patrons.

Mozilla Hubs for ABP

As everything is viewed at the ‘human-scale’, Hubs offers the potential to be used as both a design-review and presentation tool within ABP.

Navigating in Spoke

If you plan on creating an interactive space for use within Hubs, there's a good chance you will need to become familar with Spoke. Spoke is the platform's online-based 3D scene and environment editor. Within Spoke, you can compose assets, lights, images, videos and more to create an environment that can be used in Hubs rooms or export as a glTF 3D model file. Spoke is designed to have a low skill barrier for users, so if you have mastered an architectural 3D modelling program, you will be comfortable using Spoke.

We recommend you start with the following guides to get started with Spoke. You can also find some good tutorial videos for Spoke online.

Key elements in Spoke to understand

Spoke is the online 3D modelling editor that facilitates the curation of scenes for Mozilla Hubs. It allows the user to create environments consisting of externally-generated design-based content like buildings and non-design based content such as lighting, videos and images.

Creating and managing non-design based content is straight forward. A brief overview can be found at the following location:

Adding non-design based content 
https://hubs.mozilla.com/docs/spoke-adding-scene-content.html

Adding design-based content of the typical types generated in ABP is possible through a number of different workflows, each tailored to the specific content type. These are generally grouped into two categories: 3D content directly imported into Spoke itself, and 3d content linked to Spoke through Sketchfab.


Mozilla Hubs: environment features and navigation

Hub features

A Mozilla Hubs scenery demonstrating a range of features, including the invite, mute, and 'react' emote buttons

As seen in the above image, Mozilla Hubs contains a range of features to help you navigate your environment, and to interact with others (eg 'React' emotes and the object placement tool). The Mozilla Hubs website explains each feature in more detail.

Create and join rooms

In order to setup and navigate around a Mozilla environment you will need to either create or set up a  room. For instructions on how to setup a Mozilla room, visit the Hubs Documentation: Create and Join Rooms.

Navigation controls

As Mozilla Hubs is designed as an interactive spatial experience, you can access the platform through a variety of devices. Find a list of navigation keys and controls for devices at this Hubs page.

Room settings

Within a room, you are able to change many settings. Consider how much control you would like for other users within your space to have: perhaps you want your room to be invite only, or you may want another – trusted, user to act as a room moderator. Ideally, your permissions and controls should make your room more conducive to a teaching and learning environment. Find out more about changing room settings.


Design-based Model Importing

Sketchfab to Mozilla Hubs tutorial

This tutorial demonstrates an entry level method of importing design-based content into Mozilla Hubs is through the Sketchfab online model viewing portal. Sketchfab is a fermium site which allows users to easily upload and share 3D models. Sketchfab has potential privacy issues as without holding a paid account, users can only upload one privately held 3d model per calendar month.

Exporting a basic model from Rhino

By default, Rhino will recommend meshing any NURBS geometry with an ‘average’ amount of polygons to balance representing the original geometry and keeping the output file small. It is recommended that attention be paid to all exported models. Projects with large file sizes will take longer to upload and take longer to load once a Hubs scene is created.

For small one-off models, the default settings are fine.

Step 1. Export your model from Rhino as OBJ format

1. Export your model from rhino as an .OBJ file - File > Export > Type = .OBJ

Default export options are recommended

Step 2. Navigating the Sketchfab Interface

  1. Create a Sketchfab.com in order to use the service. This can be found in the top right hand corner of the website (www.sketchfab.com).
  2. Click upload to be taken to the portal.
  3. Choose the OBJ model you exported out of Rhino and click upload File.
  4. Write a description  for the uploaded model. 
    NOTE: Specify that the model is ‘Free’ to download if you’re using a free account. Sketchfab only allows free accounts to upload 1 private model a month.
  5. Now the model you loaded will be viewable on the Sketchfab Platform. You can navigate around the model window using the mouse.
  6. By default, when exporting .OBJ files, Rhino will export all material properties as an MTL file along with any associated image files. Sketchfab can process these to generate a textured model.
  7. Textured models can take longer to upload and view in the browser. Use the Sketchfab model preview loading time to benchmark how it might perform on Mozilla Hubs.


  8. NOTE: Highly detailed models probably won’t import from Sketchfab across to Hubs cleanly, so an alternative workflow may be needed (Include link to other tutorial).

Step 3. Creating Links to Sketchfab models in Spoke

  1. Within the Spoke interface, click on Model and an insert point in the scene. A test model of a duck will appear.
  2. Replace the Model URL with the one generated by Sketchfab. The model should now load in its place.

NOTE: The Gumball icon is missing because this chair was modelled away from the origin in Rhino.

Complex Modelling for Mozilla Hubs

Often models for Hubs may consist of multiple materials and even animation. This can lead to the creation of large heavy files with the associated long upload/loading times. As such, it becomes necessary to model in a leaner fashion in order to keep file size low. In this tutorial, a basic workflow will be established which describes a modelling processing that allows for an efficient exchange to Spoke.

This tutorial will transition across 3 different 3D modelling packages;

  1. Rhino
  2. 3DS Max, and
  3. Blender.

Most students in ABP use Rhino as their Front-end modelling platform. Rhino is great for this purpose, however it lacks an ability to texture-map geometry in an easy/precise way or the ability to generate animations. 3ds Max is great for these two purposes and is utilised by students in ABP however it lack the ability to generate GL Transmission Format (GLTF) files, the only format accepted for upload natively into Spoke. GLTF is favourited in Spoke over other formats due to its fast loading times

Step 1. Creating Geometry in Rhino

  1. Create a 3D-Model in Rhino.
  2. A lean model can be created by giving consideration to what will and won’t be seen in the online model. This sample presentation space is composed of an exterior and interior form. Both these forms consist of Nurbs geometry which when meshed, has the ability to generate high face counts.

  3. Keep Model complexity low
  4. To ensure that models sizes are kept low, many faces that get created through commands like Extrude and Shell have been removed by Ctrl + Shift, Clicking and Deleting. Polysurfaces are then exploded into individual faces for Meshing. This approach will ensure that faces with zero curvature are meshed efficiently.

  5. Layer your geometry
    A layering system for the scene has been created based on materials that will be used. Sublayers in each parent layer have been created to hold Nurbs and mesh geometry. This makes it easy to manage and export.
  6. Export Rhino model for Material editing in 3DS Max
    We’re going to attribute materials in 3DS Max as it’s texture mapping tools are better suited to this application. Export a DWG from Rhino by using - File > Export > Type = .DWG

Step 2. Exporting to 3DS Max for Texturing

  1. Open 3DS Max and import your .DWG by selecting File > Import > (insert .DWG file here)
  2. Once imported, you will note that some Basic Materials have been created in 3dsmax.
  3. Material is applied to objects using the 'Layer Explorer' window.
  4. Export the textured model as a .FBX file format. Select the chosen elements and navigate to File > Export Selected
  5. Ensure the following FBX settings have been selected; specifically the box 'Embedded Media'.

Step 3. Using Blender to Create GLTF Files

  1. Open Blender and Navigate to File > Import > .FBX
  2. Locate File and Click Import
  3. Navigate to the imported geometry and Click Select > All
  4. Navigate to File > Export > gLTF 2.0
  5. Ensure you have the appropriate settings checked as pictured.
  6. Click Export gLTF 2.0
    NOTE: For large models, export time can be long and Blender is usually unresponsive for a time.

Step 4. Spoke Import

  1. Navigate to 'My Assets' and click Upload. Locate your file and click Open
  2. The model now has to import into Mozilla Hubs. Depending on where you’ve located your model originally, you may need to find your geometry within the Spoke environment
  3. The Spoke user interface is intuative and has the ability to add other models within the Hubs environment such as sketchfab models.