Optimize performance of AnimationGroup.Parse

kzhsw · June 25, 2025, 7:54am

Background

A recent profiling of loading a serialized scene with babylonFileLoader shows that scene.getNodeById takes about half of the CPU time in the whole loading process.

After looking into the source, I found that the only Parse function that calls getNodeById is AnimationGroup.Parse, which called per targetedAnimation.

github.com/BabylonJS/Babylon.js

packages/dev/core/src/Animations/animationGroup.ts

36b4293e7


      
              const targetedAnimation = parsedAnimationGroup.targetedAnimations[i];

              const animation = Animation.Parse(targetedAnimation.animation);

              const id = targetedAnimation.targetId;

              if (targetedAnimation.animation.property === "influence") {

                  // morph target animation

                  const morphTarget = scene.getMorphTargetById(id);

                  if (morphTarget) {

                      animationGroup.addTargetedAnimation(animation, morphTarget);

                  }

              } else {

                  const targetNode = scene.getNodeById(id);

          

                  if (targetNode != null) {

                      animationGroup.addTargetedAnimation(animation, targetNode);

                  }

              }

          }

          

          if (Tags) {

              Tags.AddTagsTo(animationGroup, parsedAnimationGroup.tags);

          }

The scene.getNodeById, underthehood, called getMeshById, getTransformNodeById, and other similar methods.

github.com/BabylonJS/Babylon.js

packages/dev/core/src/scene.ts

36b4293e7


      
           * Gets a node (Mesh, Camera, Light) using a given Id

           * @param id defines the Id to search for

           * @returns the found node or null if not found at all

           */

          public getNodeById(id: string): Nullable<Node> {

              const mesh = this.getMeshById(id);

              if (mesh) {

                  return mesh;

              }

          

              const transformNode = this.getTransformNodeById(id);

              if (transformNode) {

                  return transformNode;

              }

          

              const light = this.getLightById(id);

              if (light) {

                  return light;

              }

          

              const camera = this.getCameraById(id);

And taking getMeshById as an example, which consumes most CPU time of getNodeById in the profile, it’s a linear search over all meshes in the scene.

github.com/BabylonJS/Babylon.js

packages/dev/core/src/scene.ts

36b4293e7


      
              return this.geometries;

          }

          

          /**

           * Gets the first added mesh found of a given Id

           * @param id defines the Id to search for

           * @returns the mesh found or null if not found at all

           */

          public getMeshById(id: string): Nullable<AbstractMesh> {

              for (let index = 0; index < this.meshes.length; index++) {

                  if (this.meshes[index].id === id) {

                      return this.meshes[index];

                  }

              }

          

              return null;

          }

          

          /**

           * Gets a list of meshes using their Id

           * @param id defines the Id to search for

The scene can not be shared since it contains commerical data, but I can share some stats of it.
The serialized scene have ~2k transformNodes, ~6k meshes, ~4k of which are InstancedMesh, 5 animation groups with ~23k targetedAnimations (channels).

So, the time complexity of the AnimationGroup.Parse is O(m*n) where m is the count of targetedAnimations, n is the count of meshes and transformNodes, which is ~210M id comparsion in this scene.

Description

In babylonFileLoader, AnimationGroup.Parse is called after all meshes, transformNodes, and other stuff needed in getNodeById parsed, and parsing AnimationGroups will not introduce new nodes.

github.com/BabylonJS/Babylon.js

packages/dev/core/src/Loading/Plugins/babylonFileLoader.ts

36b4293e7


      
                  if (postProcess) {

                      container.postProcesses.push(postProcess);

                      postProcess._parentContainer = container;

                      log += index === 0 ? "\nPostprocesses:" : "";

                      log += "\n\t\t" + postProcess.toString();

                  }

              }

          }

          

          // Animation Groups

          if (parsedData.animationGroups !== undefined && parsedData.animationGroups !== null) {

              for (index = 0, cache = parsedData.animationGroups.length; index < cache; index++) {

                  const parsedAnimationGroup = parsedData.animationGroups[index];

                  const animationGroup = AnimationGroup.Parse(parsedAnimationGroup, scene);

                  container.animationGroups.push(animationGroup);

                  animationGroup._parentContainer = container;

                  log += index === 0 ? "\n\tAnimationGroups:" : "";

                  log += "\n\t\t" + animationGroup.toString(fullDetails);

              }

          }

So, it is possible to accelerate this parsing by using a prebuilt lookup table for all nodes before AnimationGroup.Parse called. AnimationGroup.Parse will use the lookup table if provided by the caller, via an extra argument, or some shared context, and if the lookup table does not exist, fallback to the getNodeById method, so this would not be a breaking change.

Proposed change

This reduced time complexity of the AnimationGroup.Parse from O(m*n) to O(m+n)`, but requires additional memory to build the lookup table.

diff --git a/packages/dev/core/src/Animations/animationGroup.ts b/packages/dev/core/src/Animations/animationGroup.ts
index 0530814d5a..f457e86f9c 100644
--- a/packages/dev/core/src/Animations/animationGroup.ts
+++ b/packages/dev/core/src/Animations/animationGroup.ts
@@ -997,7 +997,7 @@ export class AnimationGroup implements IDisposable {
      * @param scene defines the scene that will receive the animationGroup
      * @returns a new AnimationGroup
      */
-    public static Parse(parsedAnimationGroup: any, scene: Scene): AnimationGroup {
+    public static Parse(parsedAnimationGroup: any, scene: Scene, nodeMap?: Map<Node["id"], Node>): AnimationGroup {
         const animationGroup = new AnimationGroup(parsedAnimationGroup.name, scene, parsedAnimationGroup.weight, parsedAnimationGroup.playOrder);
         for (let i = 0; i < parsedAnimationGroup.targetedAnimations.length; i++) {
             const targetedAnimation = parsedAnimationGroup.targetedAnimations[i];
@@ -1010,7 +1010,7 @@ export class AnimationGroup implements IDisposable {
                     animationGroup.addTargetedAnimation(animation, morphTarget);
                 }
             } else {
-                const targetNode = scene.getNodeById(id);
+                const targetNode = nodeMap ? nodeMap.get(id) : scene.getNodeById(id);
 
                 if (targetNode != null) {
                     animationGroup.addTargetedAnimation(animation, targetNode);
diff --git a/packages/dev/core/src/Loading/Plugins/babylonFileLoader.ts b/packages/dev/core/src/Loading/Plugins/babylonFileLoader.ts
index a473590441..9e32ddcdec 100644
--- a/packages/dev/core/src/Loading/Plugins/babylonFileLoader.ts
+++ b/packages/dev/core/src/Loading/Plugins/babylonFileLoader.ts
@@ -423,11 +423,27 @@ const LoadAssetContainer = (scene: Scene, data: string, rootUrl: string, onError
             }
         }
 
+        const nodeMap = new Map<Node["id"], Node>();
+        for (let index = 0; index < scene.meshes.length; index++) {
+            if (!nodeMap.has(scene.meshes[index].id)) { // This follows the behavior of scene.getXXXById, which picks the first match
+                nodeMap.set(scene.meshes[index].id, scene.meshes[index]);
+            }
+        }
+        for (let index = 0; index < scene.transformNodes.length; index++) {
+            if (!nodeMap.has(scene.transformNodes[index].id)) {
+                nodeMap.set(scene.transformNodes[index].id, scene.transformNodes[index]);
+            }
+        }
+        for (let index = 0; index < scene.cameras.length; index++) {
+            if (!nodeMap.has(scene.cameras[index].id)) {
+                nodeMap.set(scene.cameras[index].id, scene.cameras[index]);
+            }
+        }
+        // TODO: all kinds of nodes
         // Animation Groups
         if (parsedData.animationGroups !== undefined && parsedData.animationGroups !== null) {
             for (index = 0, cache = parsedData.animationGroups.length; index < cache; index++) {
                 const parsedAnimationGroup = parsedData.animationGroups[index];
-                const animationGroup = AnimationGroup.Parse(parsedAnimationGroup, scene);
+                const animationGroup = AnimationGroup.Parse(parsedAnimationGroup, scene, nodeMap);
                 container.animationGroups.push(animationGroup);
                 animationGroup._parentContainer = container;
                 log += index === 0 ? "\n\tAnimationGroups:" : "";

Alternatives

The lookup table, since Node["id"] is string, could be plain js object for better browser compatibility.
Optimize underlying getMeshById, getTransformNodeById, and other methods to a O(1) hash lookup, but since scene.meshes is exposed public as raw js array, this could be more challenging, or more breaking.

Joe_Kerr · June 25, 2025, 8:30am

There also is Node.uniqueId (number). It is not readonly but should be as reliable as Node.id, shouldn’t it?

kzhsw · June 25, 2025, 8:34am

The uniqueId might be changed after serialized object parsed, to perserve uniqueness, but id is not changed.

sebavan · June 25, 2025, 5:28pm

Sounds like a nice plan for me

kzhsw · July 2, 2025, 1:51am

So, would you like a pr for this, or more disussions needed? Is using ES2015 Map allowed in current browser compatibility policy?

Deltakosh · July 2, 2025, 1:50pm

Yes a PR will do it (And yes map should work)

kzhsw · July 3, 2025, 7:38am

Here it is

github.com/BabylonJS/Babylon.js

Optimize performance of AnimationGroup.Parse

master ← kzhsw:patch-1

opened 07:15AM - 03 Jul 25 UTC

kzhsw

+39 -4

AnimationGroup.Parse currently invokes scene.getNodeById for each targetedAnimat…ion, resulting in O(m × n) behavior (m = # of targetedAnimations, n = # of scene nodes) and causing major slowdown when loading large scenes. This change introduces an optional `nodeMap: Map<string, Node>` parameter to AnimationGroup.Parse. In the BabylonFileLoader, we build a one‐time hash map for all meshes, transformNodes, cameras, etc., in O(n), then pass it to AnimationGroup.Parse. When provided, the parse method does O(1) lookups per targetedAnimation, reducing overall parsing cost to O(m + n). Fallback to scene.getNodeById is preserved when no nodeMap is supplied. Forum post: <https://forum.babylonjs.com/t/optimize-performance-of-animationgroup-parse/59124>

Topic		Replies	Views
Optimize performance of AssetContainer.addToScene Completed Features sceneserializer , performance , serialization , performance-profiler	2	91	July 4, 2025
scene.getTransformNodeBy… Question about performance/order in selection Questions performance	6	220	December 3, 2023
Create AnimationGroup from blender exported animations Questions	6	1308	January 8, 2020
Animation Groups Not working Bugs	26	3760	February 21, 2021
Animationgroup from imported scene glb Questions	2	539	August 19, 2021

Optimize performance of AnimationGroup.Parse

Background

Description

Proposed change

Alternatives

Related topics