Try โ€‚โ€‰HackMD

Image Not Showing Possible Reasons
  • The image was uploaded to a note which you don't have access to
  • The note which the image was originally uploaded to has been deleted
Learn More โ†’

Preparing your CloneX for Spatial

So you want to be your CloneX in Spatial? You've come to the right place. I will warn you now that this looks like (and is) a fair bit of work to get set up, but the skills you'll learn will help you go far in understanding avatar interoperability and optimization.

Setup

  • Download Clone.Tools.

  • Download the latest supported version of Blender. I'll be using version 3.4 as that's what is supported at the time of writing.

  • Open Blender, install and enable clone.tools Edit -> Preferences -> Add-ons -> Install.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Navigate to the clone.tools plugin on the sidebar

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Select a folder that houses all of your Clone's components.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Your CloneX is now imported into Blender!

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Optimization

There are many ways to optimize your CloneX, and some are faster (and more expensive) than others. In this tutorial, I will be using basic and free techniques that can be done all inside Blender.

Here are the specs we need to optimize to. In this case, we will optimize to the Global specs so we can use this model globally across Spatial.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • In Blender, ensure that Viewport Overlays is enabled and Statistics is selected

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Select all of your meshes and enter Edit Mode with the tab key

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • You'll see in our stats that our meshes have more triangles and vertices than Spatial can handle, and therefore we need to optimize it. In this case, we also have meshes that overlap, and may cause issues later on with intersecting meshes.

  • Let's get rid of any meshes that are 'hidden' by overlapping meshes. In this case, I want to get rid of the body mesh that is under the tshirt and the pants.

  • In Object mode, select your body mesh and then press tab to enter Edit mode.

  • Press Alt + Z to enable X-Ray mode that will allow you to select the backside vertices of the mesh.

  • Select the vertices that are hidden by the body and the pants.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • This removed some of the density of our model, but there's a long way to go to get it down to the specs we need.

  • To do this, we'll be using another Blender plugin called Simplygon. Download the latest version of the Simplygon SDK and install.

  • Open Blender and enable Simplygon Edit -> Preferences -> Add-ons.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Select one of your meshes and use Simplygon to optimize the geometry. To do this, open Simplygon and create a Reduction Pipeline with a Reduction with material baking LOD component. Given that the sum of my meshes' geometry is ~100k triangles, I'm going to use a ratio of .25 to get it down to <~25k triangles.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Process each mesh individually. As you can see, my final set of meshes is now 23K triangles and 17k vertices - perfect for the Spatial avatar requirements.

  • Select all your final meshes and press Ctrl + J to join them into one mesh.

  • During the optimization process, we also created a set of new textures for each mesh. I'm going to save (well technically, unpack) each of these textures by going to File -> External Data -> Unpack Items and write it to the current directory. Once unpacked, you'll see a folder called textures in your Blender project folder. This contains all the textures you created.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • It's great that all of these textures have been optimized, but this will be way too many textures for Spatial to handle individually. We now have to create a texture atlas that combines multiple textures into one.

  • To do this, we can use a Blender add-on called CATS which is a fantastic avatar optimization tool. Download the latest version from Github here. CATS also utilizes an add-on called Material Combiner that you can download here. Enable both add-ons in Blender in the same fashion as demonstrated with clone.tools.

  • Once enabled, open the add-on and select Optimization -> Atlas. Select all of your materials that you've used in your new merged Clone mesh and deselect all materials from the original Clone you imported. Then save the atlas.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Your new Clone mesh should now have one material and one texture (see below for the resulting node setup). Note that this is a 4K texture that won't work with Spatial, but we'll solve for that in Unity.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • You could now apply the original armature to the new combined mesh, but I like going through Mixamo to standardize it into a common armature. To export it for use in Mixamo, go to File -> Export -> FBX and ensure Selected Objects is enabled to make sure we don't export any other meshes.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Rigging

  • Head over to Mixamo and sign up for a free account and login. Upload your FBX file you just exported using Upload Character.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Go through the standard autorigging process. This may take a while.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Select the T-Pose pose and download with default settings

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Unity

  • Download Unity version 2021.3.8f1 - you must use this version in order for this to work
  • Install and ensure you select WebGL support

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Create a new Unity 3D project

  • Download the starter template.

  • Extract the spatial-unity-starter-template-main.zip folder.

  • Go to your Unity Hub and Add project from disk.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’
.

  • Select the extracted spatial-unity-starter-template-main folder.

  • Open the project from Unity Hub.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Drag and drop your Mixamo rigged FBX file into the Unity viewport and set the Rig Animation type to Humanoid and apply.

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Click the Materials tab and use the Standard (Legacy Material Creation Mode and set the Location to Use External Materials (Legacy) and apply. Fix the normals by pressing Fix Now

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Now drag and drop your model into the viewport. You'll notice that the eyes are grey. This is because the eye shine is a transparent material, rather than opaque. Change the surface type to Transparent. That looks better!

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

Image Not Showing Possible Reasons
  • The image file may be corrupted
  • The server hosting the image is unavailable
  • The image path is incorrect
  • The image format is not supported
Learn More โ†’

  • Select your CloneX and create a Prefab Variant of it.

  • Select your CloneX and in the inspector panel, add a Spatial Avatar component.

  • We will now need to optimize our 4K texture to a 1K texture as previously mentioned. To do this, you'll need to navigate to your texture atlas. You can do this by searching for it or finding it in the .fbm folder that was created when importing the FBX.

  • In the inspector, drop down the Advanced section and change the Max Size to 1024 and Use Crunch Compression at 50 and apply. This will healthily optimize the texture for use in Spatial.

  • Click on the Spatial SDK tab and select Configuration. This will prompt you to log into your Spatial account.

  • Create a new Avatar Package and drag and drop your CloneX prefab variant into the Prefab. Also add your PFP to the Thumbnail. It needs to be 256x256 pixels. You can use I<3IMG to resize it to these dimensions. You can also use remove.bg to get rid of your background from your PFP as Spatial requests a thumbnail with transparency.

  • Once you've input all the information correctly, you can now test your avatar in Spatial. To do this, click Test Active Package in the top right of your screen.

  • This will bring you to your Spatial sandbox.

  • If everything looks good to go and is working correctly, you can now publish your avatar to your Spatial account. In Unity, go back to your Creator Toolkit window and click Publish on the active package.

  • Once you've successfully uploaded your avatar, it will take about 15 minutes to process. Once that's completed, head to your Spatial profile and click your profile picture then select Edit Avatar.

Conclusion

You now have the ability to become your CloneX in Spatial. Congratulations! Can't wait to see more Clones in the open metaverse. If you made it this far, give yourself a massive pat on the back and tag @itsmetamike on Twitter with a screenshot of your CloneX in Spatial.

If you want to support my work, head to itsmetamike.xyz and consider minting one of my pieces.

MetaMike is a metaverse tinkerer, an explorer of interoperable virtual worlds and is part of M3.

Follow Meta Mike
Website | Twitter