![](https://hackmd.io/_uploads/BkWaV4I43.png) # Converting an FBX Avatar to VRM ## Oveview In this tutorial, we will show you how to create a custom avatar for use in Webaverse. More specifically, we will be taking an avatar from the Mixamo library, converting it from an FBX file to a VRM file, and then bringing it into Webaverse to use as your in-game avatar. ## Mixamo [Mixamo](https://www.mixamo.com/) is an Adobe product that is commonly used to animate avatars. It has an extensive library of animations and avatars built into the platform, and also allows you to upload your own avatars for animation purposes. You will need to create an account to access the platform. ![](https://i.imgur.com/61eyMQr.png) Once logged in, you will see your primary avatar, and two tabs titled *Character* and *Animations*. Select the character you'd like to use as your avatar and search for the *T-Pose* animation. ![](https://i.imgur.com/HoOhAHy.png) Download your avatar and ensure the settings are the same as below. ![](https://i.imgur.com/NRffQ8o.png) ## Blender Blender is a free, open-source computer graphics and modeling software that is commonly used given its low barriers to entry. [Download](https://www.blender.org/download/) the latest version of Blender and open up a new project. ![](https://i.imgur.com/KUbJ2Pv.png) Once your project is open, import your FBX file that you downloaded from Mixamo. ![](https://i.imgur.com/SPJFZ34.png) Once imported, select your avatar and press *Tab*. This will bring you into Blender's *Edit Mode*, which will allow you to make changes to the avatar mesh. ![](https://i.imgur.com/8xldynG.png) Although our model is relatively optimized (you'll see that there are 28k tris/14k verts), there are a few changes we can make to ensure it's as performant as possible. This is very important, especially when dealing with web based environments. Once in edit mode, press *A* to select all vertices of the mesh. In the edit mode menu, select *Mesh -> Clean Up -> Decimate Geometry*. ![](https://i.imgur.com/urgs2ce.png) In the bottom left hand corner of the viewport, the *Decimate Geometry* widget will appear. Use the *Ratio* slider to decimate the geometry as much as possible without it being detrimental to the look of the model. You can see that by decimating, we've brought our tris down to ~11k and our verts down to ~6k. ![](https://i.imgur.com/8QA7jUe.png) We've now got our model optimized and ready to export. Before exporting, delete your default camera and light from your scene collection. Go to *File -> Export -> FBX*. ![](https://i.imgur.com/WyOg4MB.png) Ensure you set the *Path Mode* to *Copy* and click the *Embed Textures* button before exporting. ![](https://i.imgur.com/4FswT0a.png) ## Unity Now that we have our FBX optimized, we can bring it into Unity. Technically, you could jump straight to this point after exporting from Mixamo, but it's always worthwhile doing what's possible to optimize your model. In Unity, we're going to be using a plugin called [UniVRM](https://github.com/vrm-c/UniVRM). UniVRM will allow us to export our FBX file as a VRM for use in Webaverse. To ensure you don't run into build errors, head to the download page for UniVRM and check what version of Unity UniVRM is currently compatible with. ![](https://i.imgur.com/2V0xsTi.png) ![](https://i.imgur.com/O2acJfg.png) Download the version of Unity from the [Unity Download Archive](https://unity3d.com/get-unity/download/archive) or [Unity Hub](https://unity3d.com/get-unity/download) that corresponds to the latest UniVRM update - in this case it's Unity-2019.4.LTS or later. ![](https://i.imgur.com/XHBlvIu.png) ![](https://i.imgur.com/KcfrbPX.png) Create a new Unity project using the correct version of Unity and import the UniVRM package by dragging it into your assets folder. ![](https://i.imgur.com/dKKyTj5.png) Add your FBX avatar to your assets folder. Select your avatar. Select *Rig* in the inspector and select *Animation Type -> Human* then apply. ![](https://i.imgur.com/BMWMlRk.png) Select *Materials* in the inspector and select *Use External Materials (Legacy)* then apply. ![](https://i.imgur.com/OCpylFe.png) Drag your avatar into the scene. ![](https://i.imgur.com/KASnbSC.png) Change your Armature object AND Hips object have a *Transform Position* of (0,0,0) in the inspector. ![](https://i.imgur.com/i0K8Iwi.png) ![](https://i.imgur.com/8JEN1lO.png) Select your Avatar object, open the *VRM0* menu tab and click *Export to VRM 0.x*. ![](https://i.imgur.com/BjCCaYW.png) Ensure you click *Make T-Pose* and fill out all requested metadata. ![](https://i.imgur.com/xEHqSA2.png) ## Webaverse Once exported, go to [Webaverse](https://app.webaverse.com), drag and drop the VRM file into the world and press Equip. ![](https://i.imgur.com/hiw6mX2.png) ![](https://i.imgur.com/rpQli5Y.png) There you have it - a brand new Webaverse avatar from Mixamo. If you've got your own FBX/OBJ avatar, you can always bring it into Mixamo and then export it with a T-Pose animation and follow the same process to bring it into Webaverse. :::info *Meta Mike is the co-founder of VERSED and leads Partner Success at GigLabs. He has a passion for contributing to the education and enablement of the open metaverse.* ::: Follow Meta Mike [LinkedIn](https://www.linkedin.com/in/itsmetamike/) | [Twitter](https://twitter.com/itsmetamike) | [Website](https://hackmd.io/@metamike) ## Export as FBX There are various ways to bring your CloneX into different platforms. In this example, we're going to produce and FBX file of a CloneX, bring it into Unity, produce a VRM file, and bring it into Webaverse. It's very important to note that we are dealing with a heavy file that has complex meshes in its current state. We can optimize this model by retopologizing, decimating our mesh and compressing our textures. We will not, however, be doing this in this tutorial. Feel free to [read my previous tutorial](https://hackmd.io/@metamike/fbx-vrm-webaverse) that ran through some of these concepts. To export your model as an FBX file, go to *File -> Export -> FBX*. ![](https://i.imgur.com/8q9Nc2o.png) Ensure you set the *Path Mode* to *Copy* and click the *Embed Textures* button before exporting. ![](https://i.imgur.com/4FswT0a.png) ## Unity Now that we have our FBX file, we can bring it into Unity. In Unity, we're going to be using a plugin called [UniVRM](https://github.com/vrm-c/UniVRM). UniVRM will allow us to export our FBX file as a VRM for use in Webaverse. To ensure you don't run into build errors, head to the download page for UniVRM and check what version of Unity UniVRM is currently compatible with. ![](https://i.imgur.com/2V0xsTi.png) ![](https://i.imgur.com/O2acJfg.png) Download the version of Unity from the [Unity Download Archive](https://unity3d.com/get-unity/download/archive) or [Unity Hub](https://unity3d.com/get-unity/download) that corresponds to the latest UniVRM update - in this case it's Unity-2019.4.LTS or later. I will be using Unity-2019.4.31f1 as this is compatible with VRChat which I'll be testing in a later tutorial. ![](https://i.imgur.com/XHBlvIu.png) ![](https://i.imgur.com/KcfrbPX.png) Create a new Unity project using the correct version of Unity and import the UniVRM package by dragging it into your assets folder. ![](https://i.imgur.com/dKKyTj5.png) Add your FBX avatar to your assets folder. Select your avatar. Select *Rig* in the inspector and select *Animation Type -> Human* then apply. ![](https://i.imgur.com/BMWMlRk.png) Select *Materials* in the inspector and select *Use External Materials (Legacy)* then apply. ![](https://i.imgur.com/OCpylFe.png) Drag your avatar into the scene. ![](https://i.imgur.com/oE8FBRJ.png) Change your Armature AND Hips objec to have a *Transform Position* of (0,0,0) in the inspector. ![](https://i.imgur.com/8xw4jbx.png) ![](https://i.imgur.com/WkVzF2m.png) Select your Avatar object, open the *VRM0* menu tab and click *Export to VRM 0.x*. ![](https://i.imgur.com/IaQtCdu.png) Ensure you click *Make T-Pose* and fill out all requested metadata. ![](https://i.imgur.com/xEHqSA2.png) Press *Export*. ## Webaverse Once exported, go to [Webaverse](https://app.webaverse.com), scroll down to change your view to 3rd person, drag and drop the VRM file into the world and press *Equip*. ![](https://i.imgur.com/D2n3Tqu.jpg) ![](https://i.imgur.com/9zwNWBj.png) ![](https://i.imgur.com/nrVTmSz.jpg) There you have it - a brand new Webaverse avatar from Mixamo. If you've got your own FBX/OBJ avatar, you can always bring it into Mixamo and then export it with a T-Pose animation and follow the same process to bring it into Webaverse. :::info *Meta Mike is the co-founder of VERSED and leads Partner Success at GigLabs. He has a passion for contributing to the education and enablement of the open metaverse.* ::: Follow Meta Mike [LinkedIn](https://www.linkedin.com/in/itsmetamike/) | [Twitter](https://twitter.com/itsmetamike) | [Website](https://hackmd.io/@metamike)