How to import a VRM avatar in Spatial
The definitive guide to using our VRM avatar in Spatial in a clear and simple way
The definitive guide to making some modifications to our VRM avatars so that we can use it on Spatial, one of the emerging 3D worlds platforms that currently supports web, mobile and VR devices.
For this case, we will use the VIPE Heroes avatars. If you follow the process with another VRM avatar, some steps (such as those related to the number of avatar textures) may be slightly different.
Resources
- Blender with VRM add-on
- Unity
- Spatial SDK
Installing the VRM Blender Add-on
The first thing to do is to activate the plugin we have installed for use it in Blender. So open this 3D software and go to Edit → Preferences →Add-ons.
Click Install and look for the add-on zip file previously downloaded. Click on Install Add-on, and activate the check for Import-Export: VRM format add-on. Finally, be sure to save your preferences.
Converting a VRM avatar into a FBX file
Let's bring our 3D avatar into Blender. To do this, go to File → Import → VRM. Now, select all the avatar related objects that appeared in the scene.
With our character selected, go to File → Export → FBX.
Go to the Operator presets on the right side on the window and search for Armature options. Deselect Add Leaf Bone option and save the FBX file.
Extracting avatar textures from the VRM file
Open Blender and export the VRM avatar like in the previous section or just continue with it. Select all the avatar related objects that appeared in the scene and go to Texture Paint.
Go to the image dropdown icon and select one of the avatar textures. Then go to Image → Save as and save it in PNG format.
Repeat the process with all the textures of the avatar. In the case of VIPE Heroes avatars, they have body and clothes textures separated.
Installing Spatial SDK in Unity
To install this and make it work, we will follow the Spatial official documentation where they explain it very well.
Creating an avatar package in Unity
Open Unity with a Spatial scene. It can be the Starter template from Spatial official documentation. Go to Assets → Create → Material and create as many materials as textures your avatar have.
Add the previously created texture PNG files to Unity Assets folder. Then, select one material and drag the corresponding texture file to the Surface Inputs → Base Map checkbox in the Inspector window.
In the Surface Inputs, set the Smoothness to 0. Attention, this may be only needed for VIPE Heroes avatars!
Repeat these steps for all the textures you have. Add the previously converted avatar FBX file to Unity Assets folder. Now, select the FBX, and on the “Rig” section in the Inspector window, select the Animation Type → Humanoid. Then click the Apply button.
Go to the Materials section and drag the corresponding materials previously created to each material input in Remapped Materials. When all the materials are setted, click on Apply button.
It's time to do a right-click on the FBX asset and go to Create → Prefab Variant.
Select the prefab variant you just created and in the Inspector window, click on Add component and search for the Spatial Avatar component. In the Spatial Avatar just added, set the Default Anim Set Type to Feminine/Masculine depending on your avatar.
Open the Spatial Portal window. You can do it by clicking on Spatial SDK → Account.
Be sure that you are logged in with your Spatial account. If not, follow the log in steps!
Go to the Config section in the Spatial Portal and in the Project Configuration, select Avatar in Create New option and click Create.
The new avatar package will show and you will be able to choose a distinctive name for it. Drag the avatar Variant previously created to the Prefab input and select Human in the Category option.
For the thumbnail you need to add a PNG image with transparency and 256x256 px.
Finally click on Publish and accept all prompts. The avatar package will be published into Spatial in about 15 minutes!
Testing your avatar before publishing
You can try your avatar before publishing it in a default empty space just by clicking on the Test Active Package button. Let's see if everything works!
Attention! If Test Active Package button is missing, go to Spatial SDK → Visual Scripting → Regenerate Nodes.
Equipping avatars in Spatial
Log in to Spatial and enter any space. Click on your profile icon on the right bottom corner of the screen, and then go to Edit Avatar. Your new VRM avatar will be there, just click on it, and then in the Save button!
Note: avatar scale issue fix
If you have this error when trying to publish the avatar package, here is a quick and easy solution!
Go back to the FBX file and in the Inspector window, go to the Model section, change the Scale Factor to 100 and click on Apply.
You need to create the Prefab Variant again and repeat the previous steps. Also, double click on the Variant to open it.
Go to the Hierarchy left window and select the Armature part. On the Inspector window, change X, Y and Z scale values to 1. Repeat for Camera, Light and VIPE_Base_Body. Set their scales to 1. Finally, repeat all the steps left and click again in Publish!
Conclusion
Now it's easier than ever to play with our custom VRM avatars in Spatial. Of course, sporting our VIPE Heroes around the metaverse should be mandatory.
Although at first glance it may seem like a tedious process, the steps to follow are actually quite simple. And well, if they weren't, here's our great guide. Now you have no excuse to use your digital identity in this metaverse.
