Add faster synchronous method for VAT baking on vertexAnimationBaker (#16749)

Rather than defer to the engine loop, we should be able to "stop the
world" and render each frame of a given range set to produce a VAT as
quickly as possible. Theoretically this could run on a worker with a
NullEngine and isolated scene, but figure the overhead might not be
worth spinning that up.

Add a test to match sandbox from
https://playground.babylonjs.com/?BabylonToolkit#CP2RN9#302

I don't know if @RaggarDK those assets are okay to check in and use in
the test suite/be available in the playground?

Added some perf logging in the tests with output on my machine

  console.log
    Synchronous bake took: 34.68687499999987 ms
  console.log
    Asynchronous bake took: 2059.416625 ms


It would be nice to see something like a "ThinContainerManager" that can
import .babylon,.gltf, etc. and do all the perf things under the hood
like create VAT, discard unused skeleton/AG, prime itself to create
instances... These benchmarks move towards being able to do something
like that in runtime.

Author: knervous

packages/dev/core/src/BakedVertexAnimation/vertexAnimationBaker.ts

@@ -7,6 +7,7 @@ import type { Scene } from "../scene";
 import { Constants } from "../Engines/constants";
 import { Skeleton } from "core/Bones/skeleton";
 import type { Nullable } from "core/types";
+import { ToHalfFloat } from "core/Misc/textureTools";
 
 /**
  * Class to bake vertex animation textures.
@@ -33,6 +34,52 @@ export class VertexAnimationBaker {
         }
     }
 
+    /**
+     *
+     * @param ranges Defines the ranges in the animation that will be baked.
+     * @param halfFloat If true, the vertex data will be returned as half-float (Uint16Array), otherwise as full float (Float32Array).
+     * @returns The array of matrix transforms for each vertex (columns) and frame (rows), as a Float32Array or Uint16Array.
+     */
+    public bakeVertexDataSync(ranges: AnimationRange[], halfFloat: boolean): Float32Array | Uint16Array {
+        if (!this._skeleton) {
+            throw new Error("No skeleton provided.");
+        }
+        const bones = this._skeleton.bones.length;
+        const floatsPerFrame = (bones + 1) * 16;
+        const totalFrames = ranges.reduce((sum, r) => sum + (Math.floor(r.to) - Math.floor(r.from) + 1), 0);
+
+        const vertexData = halfFloat ? new Uint16Array(floatsPerFrame * totalFrames) : new Float32Array(floatsPerFrame * totalFrames);
+
+        let offset = 0;
+        const matrices = this._skeleton.getTransformMatrices(this._mesh);
+
+        this._skeleton.returnToRest();
+
+        if (halfFloat) {
+            for (const { from, to } of ranges) {
+                for (let f = Math.floor(from); f <= Math.floor(to); ++f) {
+                    this._scene.beginAnimation(this._skeleton, f, f, false, 1.0);
+                    this._skeleton.computeAbsoluteMatrices(true);
+                    for (let i = 0; i < floatsPerFrame; ++i) {
+                        vertexData[offset + i] = ToHalfFloat(matrices[i]);
+                    }
+                    offset += floatsPerFrame;
+                }
+            }
+        } else {
+            for (const { from, to } of ranges) {
+                for (let f = Math.floor(from); f <= Math.floor(to); ++f) {
+                    this._scene.beginAnimation(this._skeleton, f, f, false, 1.0);
+                    this._skeleton.computeAbsoluteMatrices(true);
+                    vertexData.set(matrices, offset);
+                    offset += floatsPerFrame;
+                }
+            }
+        }
+
+        return vertexData;
+    }
+
     /**
      * Bakes the animation into the texture. This should be called once, when the
      * scene starts, so the VAT is generated and associated to the mesh.

packages/dev/core/test/unit/Animations/babylon.vertexAnimationBaker.test.ts

@@ -0,0 +1,99 @@
+import * as fs from "fs";
+import * as path from "path";
+import { NullEngine } from "core/Engines";
+import { Engine } from "core/Engines/engine";
+import { Scene } from "core/scene";
+import { VertexAnimationBaker } from "core/BakedVertexAnimation/vertexAnimationBaker";
+import { AnimationRange } from "core/Animations";
+import { ImportMeshAsync } from "core/Loading";
+import type { Mesh } from "core/Meshes";
+import "core/Animations/animatable";
+import { FreeCamera } from "core/Cameras";
+import { Vector3 } from "core/Maths";
+
+/**
+ * Describes the test suite for VertexAnimationBaker.
+ */
+describe("VertexAnimationBaker", function () {
+    let subject: Engine;
+    let scene: Scene;
+    let mesh: Mesh;
+
+    const animationRanges = [
+        { from: 7, to: 31 },
+        { from: 33, to: 61 },
+        { from: 63, to: 91 },
+        { from: 93, to: 130 },
+    ];
+
+    /**
+     * Create a new engine, scene, and skeleton before each test.
+     */
+    beforeEach(async function () {
+        subject = new NullEngine({
+            renderHeight: 256,
+            renderWidth: 256,
+            textureSize: 256,
+            deterministicLockstep: false,
+            lockstepMaxSteps: 1,
+        });
+
+        // Avoid creating normals in PBR materials.
+        subject.getCaps().standardDerivatives = true;
+
+        // Create a scene
+        scene = new Scene(subject);
+        new FreeCamera("camera", new Vector3(0, 0, 0), scene);
+        const meshPath = path.join(__dirname, "../../../../../../packages/tools/playground/public/scenes/arr.babylon");
+        const meshBuffer = fs.readFileSync(meshPath);
+        const dataUrl = `data:model/gltf-binary;base64,${meshBuffer.toString("base64")}`;
+
+        const result = await ImportMeshAsync(dataUrl, scene);
+        mesh = result.meshes[0] as Mesh;
+
+        subject.runRenderLoop(() => {
+            scene.render();
+        });
+    });
+
+    /**
+     * Tests for bakeVertexDataSync.
+     */
+    describe("#bakeVertexDataSync", () => {
+        it("should bake vertex data as Float32Array for given ranges and produce data ~equal to async bake", async () => {
+            // Arrange: Create a VertexAnimationBaker with the skeleton
+            const baker = new VertexAnimationBaker(scene, mesh);
+
+            // Act: Bake vertex data with halfFloat: false
+            let start = performance.now();
+            const vertexData = baker.bakeVertexDataSync(animationRanges as AnimationRange[], false);
+            let end = performance.now();
+            console.log(`Synchronous bake took: ${end - start} ms`);
+            const asyncVertexData = await baker.bakeVertexData(animationRanges as AnimationRange[]);
+            end = performance.now();
+            console.log(`Asynchronous bake took: ${end - start} ms`);
+            // Assert: Check type and size
+            expect(vertexData.length).toEqual(asyncVertexData.length, "Synchronous and asynchronous vertex data should match");
+            expect(vertexData).toBeInstanceOf(Float32Array, "Vertex data should be Float32Array");
+        });
+
+        it("should bake vertex data as Uint16Array for half-float", () => {
+            const baker = new VertexAnimationBaker(scene, mesh);
+            const vertexData = baker.bakeVertexDataSync(animationRanges as AnimationRange[], true);
+            expect(vertexData).toBeInstanceOf(Uint16Array, "Vertex data should be Uint16Array");
+        });
+
+        it("should throw an error if no skeleton is provided", () => {
+            const mesh = { skeleton: null }; // Mock mesh with no skeleton
+            const baker = new VertexAnimationBaker(scene, mesh as any);
+            expect(() => baker.bakeVertexDataSync(animationRanges as AnimationRange[], false)).toThrow("No skeleton provided.");
+        });
+    });
+
+    /**
+     * Clean up after each test.
+     */
+    afterEach(function () {
+        subject.dispose();
+    });
+});