Large number of annotations lagging in the latest version

[hamza-hajji]

Describe the bug
In xeokit sdk 2.6.10, rendering 200 annotations runs smoothly, in xeokit-sdk@2.6.50, there is significant lagging, I put two screen casts of the 200 annotations in different versions

To Reproduce
Steps to reproduce the behavior:

Render 200 annotations in xeokit-sdk@2.6.50

const annotations = new AnnotationsPlugin(viewer, {
  // Default HTML template for marker position
  markerHTML:
    "<div class='annotation-marker' style='background-color: {{markerBGColor}};'>{{glyph}}</div>",

  // Default HTML template for label
  labelHTML:
    "<div class='annotation-label' style='background-color: {{labelBGColor}};'>" +
    "<div class='annotation-title'>{{title}}</div><div class='annotation-desc'>{{description}}</div></div>",

  // Default values to insert into the marker and label templates
  values: {
    markerBGColor: "red",
    labelBGColor: "red",
    glyph: "X",
    title: "Untitled",
    description: "No description",
  },
});

for (let index = 0; index < 200; index++) {
  annotations.createAnnotation({
    id: "myAnnotation" + index,
    worldPos: [Math.random() * 2, Math.random() * 2, Math.random() * 2], // 3D World-space position
    occludable: false, // Optional, default, makes Annotation invisible when occluded by Entities
    markerShown: true, // Optional, default is true, makes position visible (when not occluded)
    labelShown: false, // Optional, default is false, makes label visible (when not occluded)
    values: {
      // Optional, overrides AnnotationPlugin's defaults
      glyph: "O",
      title: "Origin",
      description: "This is my annotation.",
      markerBGColor: "blue",
    },
  });
}

It lags

Expected behavior
It doesn't lag, same behavior as xeokit-sdk@2.6.10

[MichalDybizbanskiCreoox]

Hi @hamza-hajji, thank you for your report!

The slowdown that you observe results from the getBoundingClientRect calls (which trigger browser's layout reflows) that were used to implement Annotation::setMarkerAlign and Annotation::setLabelPosition methods, introduced by the PR at #1554

The cost of calling the getBoundingClientRect method accumulates throughout a frame, and if there's a lot of Annotations that require its computation, it really adds up.
We need to consider whether there are other ways to achieve the same result without this costly call.
One possible solution, without sacrificing the alignment feature's utility, would be an optimized code path that didn't require getBoundingClientRect, which would work for annotations with the default "left" marker alignment, and with no label.
Would this limitation cover your use case?

[hamza-hajji]

which would work for annotations with the default "left" marker alignment, and with no label

@MichalDybizbanskiCreoox I don't use marker alignment, but I do set labelHTML for the annotation

[hamza-hajji]

@MichalDybizbanskiCreoox any news on this?

[MichalDybizbanskiCreoox]

Hi @hamza-hajji , a PR that should help make the annotations position update smoother has been merged to the master branch. It'll be included in an upcoming release.