fix(model-viewer): defer bounding box recalculations to render loop for extra models

Author: diegoteran

packages/model-viewer/src/features/controls.ts

@@ -193,6 +193,7 @@ const maxCameraOrbitIntrinsics = (element: ModelViewerElementBase) => {
 };
 
 export const cameraTargetIntrinsics = (element: ModelViewerElementBase) => {
+  element[$scene].updateBoundingBoxAndShadowIfDirty();
   const center = element[$scene].boundingBox.getCenter(new Vector3());
 
   return {

packages/model-viewer/src/features/loading.ts

@@ -252,10 +252,12 @@ export const LoadingMixin = <T extends Constructor<ModelViewerElementBase>>(
      * turntable rotation.
      */
     getDimensions(): Vector3D {
+      this[$scene].updateBoundingBoxAndShadowIfDirty();
       return toVector3D(this[$scene].size);
     }
 
     getBoundingBoxCenter(): Vector3D {
+      this[$scene].updateBoundingBoxAndShadowIfDirty();
       return toVector3D(this[$scene].boundingBox.getCenter(new Vector3()));
     }
 

packages/model-viewer/src/test/features/extra-model-spec.ts

@@ -75,6 +75,36 @@ suite('ExtraModel', () => {
 
         expect(scene._models[1].position.x).to.equal(5);
     });
+
+    test('does not calculate bounding box synchronously when offset changes', async () => {
+        element.loading = 'eager';
+        element.src = CUBE_GLB_PATH;
+        
+        const extra = document.createElement('extra-model');
+        extra.setAttribute('src', CUBE_GLB_PATH);
+        extra.setAttribute('offset', '1 0 0');
+        element.appendChild(extra);
+
+        await waitForEvent(element, 'load');
+        const scene = (element as any)[$scene];
+
+        // Ensure bounds are clean initially
+        scene.updateBoundingBoxAndShadowIfDirty();
+        const oldMaxX = scene._boundingBox.max.x;
+
+        // Change offset
+        extra.setAttribute('offset', '10 0 0');
+        await timePasses(); // allow MutationObserver to trigger updateModelTransforms
+
+        // The bounds should be dirty, but the actual boundingBox value hasn't mathematically updated yet!
+        expect(scene.boundsAndShadowDirty).to.be.true;
+        expect(scene._boundingBox.max.x).to.equal(oldMaxX);
+
+        // However, reading via getDimensions flushes it
+        element.getDimensions();
+        expect(scene.boundsAndShadowDirty).to.be.false;
+        expect(scene._boundingBox.max.x).to.be.greaterThan(oldMaxX);
+    });
   });
 
   suite('hotspot attachment', () => {

packages/model-viewer/src/three-components/ModelScene.ts

@@ -117,6 +117,7 @@ export class ModelScene extends Scene {
 
   private _currentGLTFs: ModelViewerGLTFInstance[] = [];
   private _models: Object3D[] = [];
+  private boundsAndShadowDirty = false;
   private mixers: AnimationMixer[] = [];
   private mixerPausedStates: boolean[] = [];
   private cancelPendingSourceChange: (() => void)|null = null;
@@ -320,9 +321,8 @@ export class ModelScene extends Scene {
     this.setGroundedSkybox();
   }
 
-  updateModelTransforms(index: number, offset?: string|null, orientation?: string|null, scale?: string|null) {
+  updateModelTransforms(index: number, offset?: string|null, _orientation?: string|null, scale?: string|null) {
     const model = this._models[index];
-    console.log(`[ModelScene] updateModelTransforms index: ${index} modelFound: ${!!model} offset: ${offset} orientation: ${orientation}`);
     if (!model) return;
 
     if (offset) {
@@ -342,11 +342,27 @@ export class ModelScene extends Scene {
     }
 
     model.updateMatrixWorld(true);
-    this.updateBoundingBox();
-    this.updateShadow();
+    // Defer bounding box and shadow recalculations.
+    // If developers animate `<extra-model>` offset or scale properties via requestAnimationFrame,
+    // recalculating bounding boxes synchronously every single frame here blocks the main thread and tanks frame rates.
+    // Instead, we mark the bounds as dirty and wait for the render loop or a public dimensions getter to flush the changes.
+    this.boundsAndShadowDirty = true;
     this.queueRender();
   }
 
+  /**
+   * Evaluates bounding box recalculations asynchronously.
+   * Flushed right before a frame is rendered or when dimension properties are formally queried
+   * to ensure that high-frequency layout changes don't stall execution natively.
+   */
+  updateBoundingBoxAndShadowIfDirty() {
+    if (this.boundsAndShadowDirty) {
+      this.boundsAndShadowDirty = false;
+      this.updateBoundingBox();
+      this.updateShadow();
+    }
+  }
+
   reset() {
     this.url = null;
     this.renderCount = 0;
@@ -1241,6 +1257,7 @@ export class ModelScene extends Scene {
   }
 
   renderShadow(renderer: WebGLRenderer) {
+    this.updateBoundingBoxAndShadowIfDirty();
     const shadow = this.shadow;
     if (shadow != null && shadow.needsUpdate == true) {
       shadow.render(renderer, this);