Back to all posts

Mozilla Hubs Avatars

As virtual spaces keep on extending, more and more users find it odd to associate themselves with the default fictitious avatars. In this article, we’ll show you how to improve your Mozilla Hubs experience by adding custom recognizable Mozilla Hubs avatars that can be easily generated from a single selfie!

First of all let’s look at the avatar that we prepared for Mozilla Hubs.

We used the FitPerson avatar (body_0.3 pipeline) exported to glb format with one outfit (we recommend to use “lowpoly” versions if possible) and the “generated” haircut. All of the textures and meshes are embedded in the single glb.

The “lighting enhancement” feature is used. 

Here are the detailed lists of Computation and Export parameters of sample avatar:

Export parameters of sample avatar:

{"avatar_modifications":{"parametric_eyes_texture":false,"remove_smile":false,"enhance_lighting":true,"remove_glasses":true,"remove_stubble":false}}

Computation parameters of sample avatar:

{"format":"glb","embed_textures":true,"haircuts":{"list":["generated"],"embed":true,"embed_textures":true},"outfits":{"list":["outfit_0"],"embed":true,"embed_textures":true,"additional_textures":["normal_map","roughness_map","metallic_map","body_visibility_mask"]},"additional_textures":["normal_map","roughness_map","metallic_map"]}

 Mozilla Hubs avatars

Now it’s time to go to https://hubs.mozilla.com/ and create a room…

 Mozilla Hubs avatars

… or join the existing one if you have a code:

Mozilla Hubs avatars

When the room is loaded, we need to join it:

Mozilla Hubs avatars

After that, click the “Change avatar” button in the “Avatar settings” window…

Mozilla Hubs avatars

…and then the “Create avatar” button.

Mozilla Hubs recognizable avatars

In the opened menu click the “Custom GLB” button and provide a path to the generated model.

Mozilla Hubs realistic avatars

When the model preview is updated, save your avatar:

Mozilla Hubs Avatar SDK avatars

It usually takes a few seconds to upload your avatar to the server. After that you will see your new avatar in the gallery. Click on it…

Mozilla Hubs realistic full-body avatars

…And click the “Accept” button:

Now you are ready to use your custom avatar in Mozilla Hubs! Congratulations!

Mozilla Hubs avatars creator