How to use Blender shape keys in BabylonJS?

Questions
1

I’m trying to figure out how to use shape keys from Blender in BabylonJS.

In the past, I used the Tower of Babel exporter, but since that is no longer supported, I’d like to know how I can do this using GLTF or the current BabylonJS exporter for Blender.

Can someone point me to an example on the PG or describe to me how they were able to use shape keys?

2

GPT:
Sure, I can help you with that!

To use shape keys from Blender in BabylonJS, you can export your model from Blender as a GLTF file and then load it in BabylonJS using the SceneLoader class.

Here’s an example of how you can do this:

  1. First, create your model in Blender and add shape keys for the different expressions you want to use. Make sure to give each shape key a unique name.
  2. Next, export your model from Blender as a GLTF file. In the export settings, make sure to check the “Shape Keys” option under the “Geometry” tab.
  3. In your BabylonJS code, use the SceneLoader.ImportMesh() method to load your GLTF file:

javascriptCopy code

BABYLON.SceneLoader.ImportMesh("", "path/to/model.gltf", scene, function (newMeshes) {
    // Handle the loaded meshes here
});
  1. Once your model is loaded, you can access the shape keys by using the morphTargetManager property of each mesh that has shape keys. This property contains an array of morph targets, each of which corresponds to a shape key in Blender.

javascriptCopy code

// Find the mesh with shape keys
var morphMesh = scene.getMeshByName("MyMorphMesh");

// Get the morph target manager
var morphTargetManager = morphMesh.morphTargetManager;

// Get the morph targets
var morphTargets = morphTargetManager.targets;
  1. To animate the shape keys, you can set the influence property of each morph target to a value between 0 and 1. A value of 0 means that the shape key is not applied, while a value of 1 means that the shape key is fully applied.

javascriptCopy code

// Animate the "Smile" shape key
var smileTarget = morphTargets.find(target => target.name === "Smile");
smileTarget.influence = 1; // Fully apply the shape key

// Animate the "Frown" shape key
var frownTarget = morphTargets.find(target => target.name === "Frown");
frownTarget.influence = 0.5; // Partially apply the shape key

I hope this helps! Let me know if you have any further questions.

I found an example in the Playground:
Animating Morph Target Example | Babylon.js Playground (babylonjs.com)

1 Like
3

There’s another example here: Morph Targets | Babylon.js Documentation (babylonjs.com)

1 Like
4

Since you have used TOB, I am letting you know I have modified the .babylon exporter for shape key animation.

Blender 2.93.0

31 May 2021

Changes for API changes in Blender 2.93

- Shape Key animation added

- Switched the default of pickable to False for meshes

- For Shadows, added Cascaded type, autoZBounds & min & max

- For Materials:
    ...

The same type of animation as GLB, AnimationGroup. You will not get synchronous instancing with a JSON file like with TOB. You will also be using BJS’s GPU based Morph targets, not the CPU based, multi-area keys.

It should be more familiar in Blender, however. It will also be left-handed in BJS, & the bones won’t be weird.

2 Likes