UPDATE 2025: Mozilla Hubs is no longer available.

**Introduction
1. Basic workflow**1.1. Modeling
1.2. Low poly modeling
1.3. Texturing
1.4. Baking lighting
1.5. Exporting
1.6. Spoke
1.7. Testing in the HUB

2. A****dvanced topics
2.1. Object animation
2.2. Texture animation
2.3. Spheremap & animated spheremaps
2.4. Soundscapes
2.5. Dynamic lights
2.6. Fog

3. Experimental (coming soon, surprise !)

Introduction

In this tutorial/breakdown we’ll try to get a grasp on how to create a HUB in Mozilla HUB. 

This article is not about how Hubs works in depth. I recommend [this introduction] if you’ve no idea what I’m talking about.

Basically HUB is a multiplayer 3D chatroom with VR support, streaming of content and an easy editing tool that allows for realtime interactions with the environnement.
We’re not going to focus on the editing features of the HUB itself but more on the creation of custom content via it’s parent tool “SPOKE” that allow importing custom meshes, videos, textures and much more.

Note : I use Cinema 4d & Octane Render to construct my mozilla Hubs. You can - and it is even recommanded to use Blender as there are plugins and documented work flows available for the latter.

Furthermore, Blender is open source and Mozilla has always been a defender of open licences - it was thus make even more sens. Still, I use C4D daily and therefore didn’t feel switching tools for this project.
That being said, most stuff written here should more or less pertinent in a Blender environnement.

1. Basic Workflow

Before getting into details, let’s see what this is all about. 
Our goal is to create a HUB from scratch that runs smoothly on a low end computer, a tablet or a phone. 
We’ll stay under the boundaries recommended by Mozilla, that is : 
- Triangles : less than 50 000
- less than 25 unique materials
- less than 256 Mo of texture memory and 2048 x 2048 or less in texture size
- less than 3 lights
- A total content file size of 16 Mo (mesh, texture and everything included).

We’ll first go through some basic steps in order to get a functional HUB we’ll then spend some time exploring more advanced features. 

1.1. Modeling

The picture above is a draft about what direction I want to go, so basically, some vertical structures with a very organic feeling surrounded by giant trees. I was thinking about creating a sort of concert/gathering place at the top of the vertical structures adding a sci-fi tone to the whole thing.

So let’s open C4D and do some basic modelling. The pillars are made of cylinders, broken with a voronoi fracture. I made a basic platform that would allow travelling on those pillard.

Try to Keep organized. A hub will quickly contain dozens of objets. If you don’t want to loose your mind, keep layers and name your groups. If you’re planning big areas, cut them into modules, it makes it much easier to edit later and it allows for some faster back and forth modifications. It’s also helpful keeping your textures a reasonnable size as each texture will span over smaller areas. 

1.2 Low Poly modeling

Once you’ve got you basic shape we can get into some more details but always keep in mind that you’ve got to keep the poly count as low as possible. 

Some tips to keep you poly count low
It might be tempting to add details everywhere and make complex structures start simple, make all the lights bake correctly, add some basic textures, test performance and then work your way up to detailing; Light with a few well placed geometry elements adds a lot to detailing

once I’ve got a basic layout in place, it’s light time ! then baking When rendering * render with a lot of samples (4096) * add texture don’t leave empty surfaces Might be tempting to let to lighting to 

* avoid complexity

1.3 Texturing

First - generate UV map 2048 x 2048

1.4 bake lighting

1.5. Exporting

It’s time for our first live test
1.4 Mo
12 000 triangles
21 Mo video memory
0 light

1.6 Spoke

…