Issue with baked texture anim

Questions
1

Hi,
I tried to run a BVAT, inspired this code:
https://doc.babylonjs.com/features/featuresDeepDive/animation/baked_texture_animations

and using this code:

export function generate() {
        let baker: VertexAnimationBaker = null,
                mesh: Mesh = null;

        const ranges: AnimationRange[] = [{ from: 0, to: 26, name: "My animation" }];
        SceneLoader.ImportMeshAsync("", "/myroot/", "untitled.glb", globalThis.ppath.scene, undefined)
                .then((importResult) => {
                        mesh = importResult.meshes[1];
                        // create the baker helper, so we can generate the texture
                        baker = new VertexAnimationBaker(globalThis.ppath.scene, mesh);

                        // you can slice the animation here with several animation ranges.

                        return baker.bakeVertexData(ranges);
                })
                .then((vertexData) => {
                        // we got the vertex data. let's serialize it:
                        const vertexDataJSON = baker.serializeBakedVertexDataToJSON(vertexData);
                        // and save it to a local JSON file
                        let a = document.createElement("a");
                        a.setAttribute("href", "data:text/plain;charset=utf-8," + encodeURIComponent(vertexDataJSON));
                        a.setAttribute("download", "vertexData.json");
                        a.click();
                });
}

export function reload() {
        let baker = null,
                mesh = null;
        const animationRanges = [{ from: 0, to: 26, name: "My animation" }];

        // read your mesh like always
        SceneLoader.ImportMeshAsync("", "/myroot/", "untitled.glb", globalThis.ppath.scene, undefined)
                .then((importResult) => {
                        mesh = importResult.meshes[1];
                        // read the vertex data file.
                        return fetch("/vertexData.json");
                })
                .then((response) => {
                        if (!response.ok) {
                                throw new Error("HTTP error " + response.status);
                        }
                        // convert to json
                        return response.json();
                })
                .then((json) => {
                        // create the baker helper, so we can generate the texture
                        baker = new VertexAnimationBaker(globalThis.ppath.scene, mesh);

                        let l = JSON.stringify(json); // I explain it
                        const vertexData = baker.loadBakedVertexDataFromJSON(l);
                        // we got the vertex data. create the texture from it:
                        const vertexTexture = baker.textureFromBakedVertexData(vertexData);

                        const manager = new BakedVertexAnimationManager(globalThis.ppath.scene);
                        // store the texture
                        manager.texture = vertexTexture;

                        // set the animation parameters. You can change this at any time.
                        manager.setAnimationParameters(
                                animationRanges[0].from, // initial frame
                                animationRanges[0].to, // last frame
                                0, // offset
                                30 // frames per second
                        );
                        // associate the manager with the mesh
                        mesh.bakedVertexAnimationManager = manager;

                        // update the time to play the animation
                        globalThis.ppath.scene.registerBeforeRender(() => {
                                manager.time += globalThis.ppath.engine.getDeltaTime() / 1000;
                        });
                });
}

Please note that I have to restringify the json I receive because the loadBakedVertexDataFromJSON method doesn’t like when I give it an object.

But the issue is that reloading the script leads to the animation being truncated.

In Blender, I exported the glb at 30fps, correctly specified the range but it’s as if the anim was cut at half the way.
Is it the serialization I messed up?

Thanks

2

Ok,

I should set all my animations to 60fps because BJS is set at 60fps by default. Now it plays perfectly.

1 Like