How to Create a Custom Avatar for Mozilla Hubs With the Ready Player Me Avatar Maker

Written by Daniel Marcinkowski

Make a custom 3D avatar for Mozilla Hubs with a selfie

Ready Player Me allows you to create a custom avatar for Mozilla Hubs with nothing but a selfie. Check our guide to learn how to create your personal avatar and import it to Mozilla Hubs.

When we introduced Ready Player Me in May of last year, our focus was on creating half-body avatars compatible with Mozilla Hubs. Since then, many things have happened. Most notably, we added full-body avatars compatible with platforms like VRChatLIV, and over 50 other apps and games. But we didn’t forget about Hubs, and we continue adding improvements to our VR-specific half-body avatar creator.

If you didn’t use Ready Player Me in a while, you will find many new hairstyles, a wide selection of facial hair, and new outfits. At the moment, we have over 200 customization options, and we add new ones every week.

Create an avatar for Mozilla Hubs with Ready Player Me

Making your personal avatar for Mozilla Hubs using Ready Player Me creator is simple and takes just a few minutes. Here’s how you can do it in five steps.https://www.youtube-nocookie.com/embed/kFnho8YFCto

Step 1 – Go to mozillahubs.readyplayer.me

We have a few different avatar creators in our portfolio, but the one that you’re looking for to create an avatar for Mozilla Hubs is at mozillahubs.readyplayer.me.

Once you’re on the page, click “Create Avatar“. On the next page, select “Half-body (VR)” as your avatar type. They come with a head, torso, and hands so that everyone can see your expressions. The full-body avatars are currently not compatible with Mozilla Hubs.

Avatar type picker in Ready Player Me

On the next page, select your preferred body type or choose to skip it (our algorithm will pick one based on your face features).

Step 2 – Take or upload a photo

In the next step, you can take a selfie that will be used to generate your avatar. For the best result, make sure that you’re well-lit and keep your face neutral. If you have a saved photo that you want to use, click “Take a Photo!” and then “pick a file” below the camera button.

You can also choose to continue without a photo and use a pre-made avatar.

Take or upload a photo Ready Player Me avatars

Step 3 – Customize your avatar

You can customize your avatar’s outfit, hair, eyes, and more. As mentioned before, there are over 200 customization options to choose from. If you have ideas for new ones, be sure to use the “Feedback” button in the top right corner.

Customize your Ready Player Me Mozilla Hubs Avatar

When you’re ready, click the “Next” button in the top right corner.

On the next page, click “Copy Avatar Link” next to the link to your unique GLB file.

Impoty your Ready Player Me avatar to Mozilla Hubs

Step 5 – Import your avatar to Mozilla Hubs

It’s time to add your personal avatar to Mozilla Hubs! First, go to a Hubs room where you want to use your avatar. Click “More” in the bottom right corner, then “Change Name & Avatar“.

Change Name & Avatar Mozilla Hubs Ready Player Me

In the panel on the right, click “Change Avatar“. On the next screen, click “Avatar GLB URL” in the top right corner and paste the link from your clipboard. Then click “Apply“, and “Accept” to confirm.

Upload Ready Player Me avatar to Mozilla Hubs

You can also save your Ready Player Me avatars in the “My Avatars” tab. To do that, paste the link to your GLB file into your web browser’s search bar to download the file. Then, in Mozilla Hubs, go to “My Avatars“, click “Create avatar“, import the file that you just downloaded, and click “Save“.

Save Ready Player Me avatar in My avatars in Mozilla Hubs

And that’s it! You should have a brand new appearance in the Mozilla Hubs room that you joined into. If anyone asks where you got your brand new avatar, tell them about Ready Player Me. If you want to create a new avatar or add changes to your current one, head over to mozillahubs.readyplayer.me.

How to create a custom avatar for Mozilla Hubs with Ready Player Me?

Metaverse IMG 0689

Daniel Marcinkowski

  • 1 year ago
  • Updated

Making your personal avatar for Mozilla Hubs using Ready Player Me creator is simple and takes just a few minutes. Here’s how you can do it in five steps.

https://www.youtube-nocookie.com/embed/kFnho8YFCto

Step 1 – Go to readyplayer.me

We have a few different avatar creators in our portfolio, but the one that you’re looking for to create an avatar for Mozilla Hubs is at readyplayer.me

Once you’re on the page, click “Create Avatar“. On the next page, select “Half-body (VR)” as your avatar type. They come with a head, torso, and hands so that everyone can see your expressions. The full-body avatars are currently not compatible with Mozilla Hubs.

Avatar type picker in Ready Player Me

On the next page, select your preferred body type or choose to skip it (our algorithm will pick one based on your face features).

Step 2 – Take or upload a photo

In the next step, you can take a selfie that will be used to generate your avatar. For the best result, make sure that you’re well-lit and keep your face neutral. If you have a saved photo that you want to use, click “Take a Photo!” and then “pick a file” below the camera button.

You can also choose to continue without a photo and use a pre-made avatar.

Take or upload a photo Ready Player Me avatars

Step 3 – Customize your avatar

You can customize your avatar’s outfit, hair, eyes, and more. As mentioned before, there are over 200 customization options to choose from. If you have ideas for new ones, be sure to use the “Feedback” button in the top right corner.

Customize your Ready Player Me Mozilla Hubs Avatar

Step 4 – Click “Next” and copy the link

When you’re ready, click the “Next” button in the top right corner. In the window that popped up, you can choose to sign up for our newsletter. We send it once a month to share the latest integrations and other announcements. 

Next, click “Copy” next to the link to your unique GLB file.

Impoty your Ready Player Me avatar to Mozilla Hubs

Step 5 – Import your avatar to Mozilla Hubs

It’s time to add your personal avatar to Mozilla Hubs! First, go to a Hubs room where you want to use your avatar. Click “More” in the bottom right corner, then “Change Name & Avatar“. 

Change Name & Avatar Mozilla Hubs Ready Player Me

In the panel on the right, click “Change Avatar“. On the next screen, click “Avatar GLB URL” in the top right corner and paste the link from your clipboard. Then click “Apply“, and “Accept” to confirm.

Upload Ready Player Me avatar to Mozilla Hubs

You can also save your Ready Player Me avatars in the “My Avatars” tab. To do that, paste the link to your GLB file into your web browser’s search bar to download the file. Then, in Mozilla Hubs, go to “My Avatars“, click “Create avatar“, import the file that you just downloaded, and click “Save“.

Save Ready Player Me avatar in My avatars in Mozilla Hubs

Quick Custom Avatars in Hubs

Jan 28, 2022—2 min read

An avatar with pink heart sunglasses.
Let’s make some avatars!

Looking to create your own custom avatar but not sure where to start? The following tools make it easy to create 3D models you can use in Mozilla Hubs.

Hubs is unique in that it lets you upload and use your own 3D assets — but building them from scratch can be a bit challenging for new users (we’ll cover this in a future Creator Labs post). The avatar makers highlighted below are helpful because they offer a range of avatars that can be personalized using easy-to-use interfaces.

To use your custom avatar, you can link to it in hubs or upload the .glb file exported from the avatar maker. You can find the specific steps to upload custom avatars here: https://hubs.mozilla.com/docs/intro-avatars.html

Hubs Hackweek Avatar Maker

Avatars that perform very well in Hubs with customizable eyes, hair-styles, skin-tones, freckles, clothing, accessories and more.  Try it out here.

💡

Interested in checking out the code behind the maker? Take a look at the github repo.

Gallery Image
Mozilla Hubs HackWeek Avatar Maker

Rhiannan Berry Avatar Customizer

Adorable avatars designed to work well with Mozilla Hubs by Rhiannan. A lot of great customization options including the ability to upload your own logo to your avatar’s top. Try it this avatar maker out here.

💡

Check out the code here: rhiannanberry/Avatar-Customizer
Rhiannan encourages forks, adding cool stuff and sharing what you make!

Metaverse rhiannan berry logo custom

Ready Player Me

Avatars generated from a real photo of yourself with many customization options. Ready Player Me can help you quickly generate a link to your avatar or the .glb file by following the instructions on their site. Major bonus of being cross-platform across many applications and definitely worth checking out.

Metaverse rpm
Ready Player Me

Do you know of any other quick and easy avatar makers that works well with Hubs? Let us know on Twitter or Discord.

Creating an Avatar with Ready Player Me

Overview

Ready Player Me (RPM) is one of the most widely used cross-platform avatar tools. Its popularity has been largely driven by their ability to seamlessly integrate with other software. This is achieved via their Unreal Engine 4 and Unity SDKs, giving developers easy access to an avatar system without having to build their own. They also have web3 native integrations, giving brands the ability to partner with the platform to develop wearables that can only be worn by owners of certain NFTs.

In this tutorial, we will go through the process of creating your own avatar using RPM and testing it in one of their partner applications. Lucky for you, RPM has made this very easy to do. Head to the RPM website to get started.

Designing your Avatar

Metaverse FEOVzVO

Before designing your avatar, you’ll need to create an account tied to your email. Once you’re signed in, head to the avatar creation tool and follow the instructions. You will have the option of using a photo to generate your avatar (which yields mixed results but is a great starting point) or create an avatar from scratch.

Metaverse tSc9OUz

Exploring the Ready Player Me Hub

Once you’ve created your avatar, you’ll land in the RPM Hub. This is your primary access point for identity editing and partner integrations. You’re able to edit your RPM ID, discover partner apps that have integrated the RPM SDK, access NFT wearables and manage your avatars.

Metaverse 8S9qbK1

Let’s start out by looking at some of the apps that RPM has integrated. Currently, RPM has >1,400 partner integrations, spanning applications such as virtual meeting spaces, workout platforms and, of course, gaming. RPM has multiple variations of models, including both full body and ‘head and hand only’ models. They also allow users to download the 3D files for use outside of the partner integrations.

Metaverse 595KOc3

In this tutorial, we’re going to integrate our RPM avatar in Mona and Mozilla. Mona is a platform that allows Unity environment artists to bring their creations to the web, while Mozilla Hubs is a multi-purpose multiplayer virtual world platform. I’ve chosen these as both use their own types of models, but still use the same base avatar design.

Platform Integration Examples

To integrate with Mona, simply click View AppConnect Avatar, and select your avatar. This may take a second to load. To integrate with Mozilla hubs, execute the same process, and ensure you select the RPM version of your avatar, as you may run into issues if selecting the Mona version. Your RPM ID will default to the most recent avatar you’ve created, so feel free to change it to any of the avatars you’ve created.

Let’s now head over to the My Avatars section of the hub. This will show all the apps our RPM avatar has integrated with. Let’s Download avatar .glb for both Mona and Mozilla Hubs and open the downloaded files.

Metaverse yS2o4dK
Metaverse RVD4a2F
Metaverse cSzV6Te

As you’ll see, even though we have the same avatar design for both models, the Mozilla Hubs version does not include arms, legs or a torso. Partners choosing to integrate RPM into their platforms will have the choice of what type of avatar they want to integrate.

Let’s now use our avatar in Mona and Mozilla Hubs. Head to this Temple Garden in Mona and click the Avatar button and sign in with RPM. This will send you a 2FA code to your account email. Once authenticated, select your avatar. Once you’re back in the Mona gallery, zoom out to see your avatar. Press H to see the controls and enjoy the gallery as your avatar.

Metaverse gzlXT5y
Metaverse yKSiTBB
Metaverse hb88ewu

In Mozilla Hubs, we can either join a room that is currently live, or create our room. These rooms are live instances of virtual environments that you can invite others to. The platform allows you to share your screen or camera, bring in 3D objects and interact socially in real time. In this example, we’ll create our own room through the Hubs homepage.

The room you create will have a randomly generated name. Join the room and select Change Name & Avatar. Go to the My Avatars section under Avatars and select Custom Avatar. Upload the Mozilla Hubs .glb file you downloaded earlier. Finally, accept your new avatar. Although you won’t be able to see yourself as an avatar, you can use a different tab to access the room as a new user and view your avatar.

Metaverse 9vFAMCm
Metaverse BQqkeI1
Metaverse oewCHl4
Metaverse Vjq9w0i
Metaverse QL9t4z2

Conclusion

As you can see, the power of Ready Player Me’s cross-platform integration enables people to bring their identity to multiple virtual worlds and adapt their avatar to the platform’s requirements. For now, take your avatar to as many different platforms and explore how the integrations work. In future tutorials, we will bring our avatars to platforms that sit outside of the RPM ecosystem and customize them using other 3D assets.

Alif Vasaya provides expertise in business strategy, community growth hacking, content production, content strategy, digital ads through acquisitions, raising capital, monetizing the Metaverse, NFT affiliate marketing, consulting, and marketing advising for start-up companies.Highly skilled and results-oriented professional with solid academic preparation holding a bachelor's degree in arts and extensive experience in digital marketing, content production, business transformation, and human resource. Proven ability to assess and manage complex obstacles; viewed as a decisive troubleshooter. Successful in intense and demanding environments, providing strong team leadership and structure with a track record of motivating and developing soldiers.

LEAVE A REPLY

Please enter your comment!
Please enter your name here