How to achieve the effects such as the gif shows in babylonjs?

The gingiva change shape as the teeth move, but they still stick together.
For example, the tooth and gingiva are meshes.

Hello! Usually facial animation is accomplished by Morph Targets | Babylon.js Documentation ( or Bones and Skeletons | Babylon.js Documentation ( :slight_smile:

1 Like

Thanks for your guide, I have read the documents for a while.

  1. bones and skeletons: how to design the bones and skeletons for loaded mesh (such as from STL file)
  2. morph targets: required same number of vertices

For the gingiva / tooth case, which is the best solution?

This is more of a modeling question than a Babylon.js specific question, so @PatrickRyan might have more experience to answer your question :slight_smile:

@jtcheng if you only have a small number of endpoints for your mesh, i.e. you need to show the teeth before correction and after and you don’t need to show multiple starting points, you can likely get by with morph targets. This does require your meshes to be derived from the same starting mesh so that you have the correct triangle list and corresponding vertices in both your base mesh and your morph mesh.

For example this playground shows a cube morphing into a sphere which was accomplished by creating a cube with several divisions to increase the vertex density on the cube. I then copied the mesh and displaced all vertices to be equidistant from the world origin, in essence turning it into a sphere. The meshes were selected and I made a morph target connection between them which I then animate and export to glTF. The process is different depending on which DCC tool you are creating, but there are plenty of tutorials on each one. These are only representative samples, but there are a lot out there which can be helpful:

If you go with the morph target approach, the easiest way to do it is to start with your final corrected teeth mesh. Then you can use any number of approaches to deform the mesh to create your starting morph. This can be through sculpting brushes in tools like Blender or ZBrush. It could be through moving vertices with soft selection. It could be through the use of deformation tools like bend deformers or lattices. It doesn’t matter how you get to your morph target so long as you don’t change the mesh through adding/combining/removing vertices.

The other option is to go with a skeleton, which will give you a lot more power in creating multiple states of the teeth without the need to sculpt/model multiple states. In this case you will want one bone per tooth that needs to move and a bone hierarchy to help deform the mesh that is skinned to each bone. While this method does give more flexibility to creating multiple states more easily, there is a lot more in terms of setup and tweaking to get it to look right. You will need to spend quite a bit of time painting skin weights on your meshes so that they defore correctly and don’t create problems like faces colliding through one another in obvious ways. You will also likely need to prototype the system a bit, knowing the types of shapes you need to make with the teeth to help you determine the correct number of bones and how far you can move each one before you run into problems with faces stretching noticeably.

In terms of tutorials on skinning and skeletal animation, you will likely find mostly character tutorials for whatever DCC tool you are using. The basics are the same, but since this is a custom rig for a specific use, you likely won’t find a step by step tutorial and will need to experiment and prototype a rig to use.

If you simply wanted to recreate the animation in your original post, I would go with morph targets as you don’t have to worry about skin weighting and blending to achieve good deformation. Simply taking the final mesh and moving the individual tooth meshes to the starting position and sculpting the gum meshes to fit the starting tooth positions would be fastest.


Thanks for all your inputs, I’ll have a try the morph targets.

1 Like

Thanks you, the morph target approach works very well.
I reference this PG:

But, there is a ‘no name’ Texture, do you know how to disable this.
manager.addTarget(target0); ===> this line add the ‘no name’ Texture

The noname texture is the internal one storing morph targets informations. You should not try to remove it or the morph will not work

1 Like

OK, thanks!

1 Like