Best Practices for 3D Animations in Web & AR

3D model optimization is a key part of preparing 3D assets for ecommerce – whether on websites or for augmented reality. It can help to improve file size, load time, and also ensure that assets are ready for AR and web-based 3D experiences.

We wanted to share some of the best practices of using and optimizing 3D assets within VNTANA’s platform alongside Maya and Mixamo.

In this webinar session, Tyler walks us through how to take simple and rigged bone animations, upload them to VNTANA for optimization and make sure the assets work in AR as well.

Keep reading for some of the takeaways or watch the full webinar below.

In our discussion with Tyler, we looked at two types of animation that commonly apply to ecommerce – geometry and skeletal animation. Either can be used for real-time 3D assets but the way they work is slightly different. Tyler explores some of the options you can use to optimize each type of asset to ensure it’s ready for uploading into VNTANA.

How geometry animation works

Geometry animation is a simple type of animation consisting of shape or position changes to the geometry of an item over time.

Animations are applied to the geometry of the asset rather than a separate mesh. This type of animation is often used for depicting static objects rather than moving models.

Best practices for applying geometry animation to real-time assets 

Before you start working with geometry animation, there are a couple of things you need to check.

Tyler explains that it helps if all of the mesh components are broken into individual components rather than grouped together before setting keyframes. It also helps if there are unique pivot points for those components.

You will also need to export this type of animation as a GLB with Animation setting enabled and disable Draco Compression when optimizing, which Tyler demonstrates in the webinar.

How skeletal animation works

Skeletal animation is a bit more complex than geometry animation. It consists of two components – the skeletal structure and the skeletal mesh, which work together to produce the final product.

The structure works like a set of interconnected bones that define the overall shape and movement of a model. The mesh is a surface applied over the bones that gives the model its appearance. Tyler describes it like a skin that goes over the skeletal structure.

When applying animation, this goes into the skeletal mesh rather than the structure itself. This type of animation is better suited for moving or more complex models, which make it ideal for displaying apparel on a 3D model for an online shop.

Another important thing to know about the skeletal mesh is that it and the animation can be two separate files. Typically, the animation file is made to work with a specific skeletal mesh. However, animations can be shared across different skeletal meshes as long as the joint structure is the same – or the animation has been appropriately retargeted.

Best practices for applying skeletal animation to real-time assets

When working with real-time assets, one of the best practices is to enable embed media when exporting an FBX for retargeting and animating, especially when using Mixamo.

You should also aim to export the final animated asset as GLB with Animation settings enabled. You may have to use the Babylon Plugin for Maya to export as a GLB. It’s also important to disable Draco Compression when optimizing the asset.

For an in-depth look at how to optimize your geometry or skeletal animations, be sure to watch the full webinar for a demonstration of it all in action.