The problem of using BLEND SHAPES for animation and customization

Hello!
We have a problem with blend shapes working on an object when one of the blend shapes is used for animation.
For example, we have prepared a scene where there are 4 blend shapes on the model, three of them are set to sliders, and the fourth is used for animation. And when we connect this animation, these blend shapes do not work to deform the object. For example, you can disable the animation and see that the blend shapes work.
Does anyone know how to make blend shapes work with animation?
I am attaching the link to the project
https://playcanvas.com/editor/scene/1714532

The animation also animating the blendshape values looking at the anim data. All the keyframes are setting the value of the blend weight to 0 (see screenshot)

So you will need to change the animation to not include these keyframes.

Or as a quick workaround, the anim update is executed between the update and postUpdate of script calls.

You could apply the weight value every frame in the postUpdate instead.

eg:

var BlendShape = pc.createScript('blendShape');

// initialize code called once per entity
BlendShape.prototype.initialize = function () {
    this.weights = {};
    
    this.app.on("change:weight", this.changeWeight, this)

    this.app.on('destroy', () => {
        this.app.off('change:weight', this.changeWeight, this);
    });
};

BlendShape.prototype.changeWeight = function ({ key, value }) {
    this.weights[key] = parseFloat(value);
}

BlendShape.prototype.postUpdate = function (dt) {
    for (const key in this.weights) {
        this.entity.model.meshInstances[0].morphInstance.setWeight(key, this.weights[key]);
    }
};

Project https://playcanvas.com/project/1065146/overview/f-blend-shapes-test

1 Like

Or as a quick workaround, the anim update is executed between the update and postUpdate of script calls.
it worked. thank you for your help