minerender 2.1.0-alpha.50 → 2.1.0-alpha.52

package/dist/node/index.mjs

@@ -2496,30 +2496,69 @@ var init_TextureAtlas = __esm({
 var ModelGenerator;
 var init_ModelGenerator = __esm({
   "src/model/ModelGenerator.ts"() {
+    init_CubeFace();
     ModelGenerator = class {
       static {
         this.ITEM_LAYERS = ["layer0", "layer1", "layer2", "layer3", "layer4"];
       }
+      /**
+       * Front and back faces plus one zero-thickness side face per run of texels that border a transparent texel,
+       * like vanilla's ItemModelGenerator. Pass the pixels of a single (first) animation frame.
+       */
       static generateItemModel(imageData, layer) {
         const tintindex = this.ITEM_LAYERS.indexOf(layer);
+        const texture = `#${layer}`;
         const mainElement = {
           from: [0, 0, 7.5],
           to: [16, 16, 8.5],
           faces: {
             "south": {
               uv: [0, 0, 16, 16],
-              texture: `#${layer}`,
+              texture,
               tintindex
             },
             "north": {
               uv: [16, 0, 0, 16],
-              texture: `#${layer}`,
+              texture,
               tintindex
             }
           },
           shade: true
         };
-        return [mainElement];
+        const elements = [mainElement];
+        const { width, height, data } = imageData;
+        const opaque = (x, y) => x >= 0 && y >= 0 && x < width && y < height && data[(y * width + x) * 4 + 3] !== 0;
+        const sx = 16 / width;
+        const sy = 16 / height;
+        const sides = [["up" /* UP */, 0, -1], ["down" /* DOWN */, 0, 1], ["west" /* WEST */, -1, 0], ["east" /* EAST */, 1, 0]];
+        for (const [face, dx, dy] of sides) {
+          const horizontal = dx === 0;
+          const lines = horizontal ? height : width;
+          const length = horizontal ? width : height;
+          for (let line = 0; line < lines; line++) {
+            for (let start = 0; start < length; start++) {
+              const exposed = (i) => horizontal ? opaque(i, line) && !opaque(i, line + dy) : opaque(line, i) && !opaque(line + dx, i);
+              if (!exposed(start)) continue;
+              let end = start + 1;
+              while (end < length && exposed(end)) end++;
+              let uv, from, to;
+              if (horizontal) {
+                const y = 16 - (line + (dy > 0 ? 1 : 0)) * sy;
+                uv = [start * sx, line * sy, end * sx, (line + 1) * sy];
+                from = [start * sx, y, 7.5];
+                to = [end * sx, y, 8.5];
+              } else {
+                const x = (line + (dx > 0 ? 1 : 0)) * sx;
+                uv = [line * sx, start * sy, (line + 1) * sx, end * sy];
+                from = [x, 16 - end * sy, 7.5];
+                to = [x, 16 - start * sy, 8.5];
+              }
+              elements.push({ from, to, faces: { [face]: { uv, texture, tintindex } }, shade: true });
+              start = end;
+            }
+          }
+        }
+        return elements;
       }
     };
   }
@@ -2886,7 +2925,15 @@ var init_UVMapper = __esm({
             for (let layerName of ModelGenerator.ITEM_LAYERS) {
               const textureImage = textureMap[layerName];
               if (textureImage) {
-                model.elements.push(...ModelGenerator.generateItemModel(textureImage.data, layerName));
+                const [width, height] = sizes[layerName];
+                const frame = frames[layerName]?.[0].index ?? 0;
+                const columns = textureImage.width / width;
+                model.elements.push(...ModelGenerator.generateItemModel(textureImage.getSectionData(
+                  frame % columns * width,
+                  Math.floor(frame / columns) * height,
+                  width,
+                  height
+                ), layerName));
               }
             }
             console.debug(p5, "Item model elements", model.elements);
@@ -4103,7 +4150,6 @@ var init_ModelObject = __esm({
         if (this.options.tints) this.options.tints = { ...this.options.tints };
         this.addEventListener("added", () => this.updateAnimationSubscription());
         this.addEventListener("removed", () => this.updateAnimationSubscription());
-        console.log("ModelObject options", this.options);
       }
       static {
         this.DEFAULT_OPTIONS = (0, import_ts_deepmerge5.default)({}, SceneObject.DEFAULT_OPTIONS, {});
@@ -4952,6 +4998,10 @@ var EntityObject = class _EntityObject extends SceneObject {
         uv
       ).clone();
       geometry.translate(cube.origin[0] + width / 2, cube.origin[1] + height / 2, cube.origin[2] + depth / 2);
+      if (Math.min(width + growX * 2, height + growY * 2, depth + growZ * 2) > 0) {
+        const index = Array.from(geometry.getIndex().array);
+        geometry.setIndex(index.concat(index.slice().reverse()));
+      }
       const mesh = this.createMesh(name, geometry, material);
       mesh.renderOrder = renderOrder;
       anchor.add(mesh);
@@ -7967,7 +8017,7 @@ var SceneStatsDisplay = class {
   }
   init() {
     this.statsContainer.classList.add("minerender-stats");
-    setInterval(() => {
+    this.interval = setInterval(() => {
       for (let line of this.lines) {
         line.update();
       }
@@ -7976,6 +8026,13 @@ var SceneStatsDisplay = class {
   appendTo(el) {
     el.append(this.statsContainer);
   }
+  dispose() {
+    clearInterval(this.interval);
+    this.interval = void 0;
+    this.lines.length = 0;
+    this.statsContainer.replaceChildren();
+    this.statsContainer.remove();
+  }
   add(line) {
     if (typeof line !== "undefined") {
       this.lines.push(line);
@@ -10414,7 +10471,7 @@ var SKIN_PARTS = Object.values(SkinPart);
 // src/skin/SkinTextureCoordinates.ts
 var baseSkinCoordinates = {
   head: {
-    east: {
+    west: {
       // left
       uv: [
         0,
@@ -10423,7 +10480,7 @@ var baseSkinCoordinates = {
         16
       ]
     },
-    west: {
+    east: {
       // right
       uv: [
         16,
@@ -10432,7 +10489,7 @@ var baseSkinCoordinates = {
         16
       ]
     },
-    north: {
+    south: {
       // front
       uv: [
         8,
@@ -10441,7 +10498,7 @@ var baseSkinCoordinates = {
         16
       ]
     },
-    south: {
+    north: {
       // back
       uv: [
         24,
@@ -10453,24 +10510,24 @@ var baseSkinCoordinates = {
     up: {
       // top
       uv: [
-        16,
         8,
-        8,
-        0
+        0,
+        16,
+        8
       ]
     },
     down: {
       // bottom
       uv: [
-        24,
-        0,
         16,
-        8
+        8,
+        24,
+        0
       ]
     }
   },
   body: {
-    east: {
+    west: {
       uv: [
         16,
         20,
@@ -10478,7 +10535,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    west: {
+    east: {
       uv: [
         28,
         20,
@@ -10486,7 +10543,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    north: {
+    south: {
       uv: [
         20,
         20,
@@ -10494,7 +10551,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    south: {
+    north: {
       uv: [
         32,
         20,
@@ -10504,23 +10561,23 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        28,
-        20,
         20,
-        16
+        16,
+        28,
+        20
       ]
     },
     down: {
       uv: [
-        36,
-        16,
         28,
-        20
+        20,
+        36,
+        16
       ]
     }
   },
   leftArm: {
-    east: {
+    west: {
       uv: [
         32,
         52,
@@ -10528,7 +10585,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    west: {
+    east: {
       uv: [
         40,
         52,
@@ -10536,7 +10593,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    north: {
+    south: {
       uv: [
         36,
         52,
@@ -10544,7 +10601,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    south: {
+    north: {
       uv: [
         44,
         52,
@@ -10554,23 +10611,23 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        40,
-        52,
         36,
-        48
+        48,
+        40,
+        52
       ]
     },
     down: {
       uv: [
-        44,
-        48,
         40,
-        52
+        52,
+        44,
+        48
       ]
     }
   },
   rightArm: {
-    east: {
+    west: {
       uv: [
         40,
         20,
@@ -10578,7 +10635,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    west: {
+    east: {
       uv: [
         48,
         20,
@@ -10586,7 +10643,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    north: {
+    south: {
       uv: [
         44,
         20,
@@ -10594,7 +10651,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    south: {
+    north: {
       uv: [
         52,
         20,
@@ -10604,23 +10661,23 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        48,
-        20,
         44,
-        16
+        16,
+        48,
+        20
       ]
     },
     down: {
       uv: [
-        52,
-        16,
         48,
-        20
+        20,
+        52,
+        16
       ]
     }
   },
   leftLeg: {
-    east: {
+    west: {
       uv: [
         16,
         52,
@@ -10628,7 +10685,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    west: {
+    east: {
       uv: [
         24,
         52,
@@ -10636,7 +10693,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    north: {
+    south: {
       uv: [
         20,
         52,
@@ -10644,7 +10701,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    south: {
+    north: {
       uv: [
         28,
         52,
@@ -10654,24 +10711,24 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        24,
-        52,
         20,
-        48
+        48,
+        24,
+        52
       ]
     },
     down: {
       uv: [
-        28,
-        48,
         24,
-        52
+        52,
+        28,
+        48
       ],
       rotation: 180
     }
   },
   rightLeg: {
-    east: {
+    west: {
       uv: [
         0,
         20,
@@ -10679,7 +10736,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    west: {
+    east: {
       uv: [
         8,
         20,
@@ -10687,7 +10744,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    north: {
+    south: {
       uv: [
         4,
         20,
@@ -10695,7 +10752,7 @@ var baseSkinCoordinates = {
         32
       ]
     },
-    south: {
+    north: {
       uv: [
         12,
         20,
@@ -10705,23 +10762,23 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        8,
-        20,
         4,
-        16
+        16,
+        8,
+        20
       ]
     },
     down: {
       uv: [
-        12,
-        16,
         8,
-        20
+        20,
+        12,
+        16
       ]
     }
   },
   hat: {
-    east: {
+    west: {
       uv: [
         32,
         8,
@@ -10729,7 +10786,7 @@ var baseSkinCoordinates = {
         16
       ]
     },
-    west: {
+    east: {
       uv: [
         48,
         8,
@@ -10737,7 +10794,7 @@ var baseSkinCoordinates = {
         16
       ]
     },
-    north: {
+    south: {
       uv: [
         40,
         8,
@@ -10745,7 +10802,7 @@ var baseSkinCoordinates = {
         16
       ]
     },
-    south: {
+    north: {
       uv: [
         56,
         8,
@@ -10755,24 +10812,24 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        48,
-        8,
         40,
-        0
+        0,
+        48,
+        8
       ]
     },
     down: {
       uv: [
-        56,
-        0,
         48,
-        8
+        8,
+        56,
+        0
       ],
       rotation: 180
     }
   },
   jacket: {
-    east: {
+    west: {
       uv: [
         16,
         36,
@@ -10780,7 +10837,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    west: {
+    east: {
       uv: [
         28,
         36,
@@ -10788,7 +10845,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    north: {
+    south: {
       uv: [
         20,
         36,
@@ -10796,7 +10853,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    south: {
+    north: {
       uv: [
         32,
         36,
@@ -10806,24 +10863,24 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        28,
-        36,
         20,
-        32
+        32,
+        28,
+        36
       ]
     },
     down: {
       uv: [
-        36,
-        32,
         28,
-        36
+        36,
+        36,
+        32
       ],
       rotation: 180
     }
   },
   leftSleeve: {
-    east: {
+    west: {
       uv: [
         48,
         52,
@@ -10831,7 +10888,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    west: {
+    east: {
       uv: [
         56,
         52,
@@ -10839,7 +10896,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    north: {
+    south: {
       uv: [
         52,
         52,
@@ -10847,7 +10904,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    south: {
+    north: {
       uv: [
         60,
         52,
@@ -10857,24 +10914,24 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        56,
-        52,
         52,
-        48
+        48,
+        56,
+        52
       ]
     },
     down: {
       uv: [
-        60,
-        48,
         56,
-        52
+        52,
+        60,
+        48
       ],
       rotation: 180
     }
   },
   rightSleeve: {
-    east: {
+    west: {
       uv: [
         40,
         36,
@@ -10882,7 +10939,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    west: {
+    east: {
       uv: [
         48,
         36,
@@ -10890,7 +10947,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    north: {
+    south: {
       uv: [
         44,
         36,
@@ -10898,7 +10955,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    south: {
+    north: {
       uv: [
         52,
         36,
@@ -10908,24 +10965,24 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        48,
-        36,
         44,
-        32
+        32,
+        48,
+        36
       ]
     },
     down: {
       uv: [
-        52,
-        32,
         48,
-        36
+        36,
+        52,
+        32
       ],
       rotation: 180
     }
   },
   leftTrousers: {
-    east: {
+    west: {
       uv: [
         0,
         52,
@@ -10933,7 +10990,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    west: {
+    east: {
       uv: [
         8,
         52,
@@ -10941,7 +10998,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    north: {
+    south: {
       uv: [
         4,
         52,
@@ -10949,7 +11006,7 @@ var baseSkinCoordinates = {
         64
       ]
     },
-    south: {
+    north: {
       uv: [
         12,
         52,
@@ -10959,23 +11016,23 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        8,
-        52,
         4,
-        48
+        48,
+        8,
+        52
       ]
     },
     down: {
       uv: [
-        12,
-        48,
         8,
-        52
+        52,
+        12,
+        48
       ]
     }
   },
   rightTrousers: {
-    east: {
+    west: {
       uv: [
         0,
         36,
@@ -10983,7 +11040,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    west: {
+    east: {
       uv: [
         8,
         36,
@@ -10991,7 +11048,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    north: {
+    south: {
       uv: [
         4,
         36,
@@ -10999,7 +11056,7 @@ var baseSkinCoordinates = {
         48
       ]
     },
-    south: {
+    north: {
       uv: [
         12,
         36,
@@ -11009,18 +11066,18 @@ var baseSkinCoordinates = {
     },
     up: {
       uv: [
-        8,
-        36,
         4,
-        32
+        32,
+        8,
+        36
       ]
     },
     down: {
       uv: [
-        12,
-        32,
         8,
-        36
+        36,
+        12,
+        32
       ],
       rotation: 180
     }
@@ -11041,35 +11098,35 @@ var slimSkinTextureCoordinates = {
   ...baseSkinCoordinates,
   leftArm: {
     ...baseSkinCoordinates.leftArm,
-    west: { uv: [39, 52, 43, 64] },
-    north: { uv: [36, 52, 39, 64] },
-    south: { uv: [43, 52, 46, 64] },
-    up: { uv: [39, 52, 36, 48] },
-    down: { uv: [42, 48, 39, 52] }
+    east: { uv: [39, 52, 43, 64] },
+    south: { uv: [36, 52, 39, 64] },
+    north: { uv: [43, 52, 46, 64] },
+    up: { uv: [36, 48, 39, 52] },
+    down: { uv: [39, 52, 42, 48] }
   },
   rightArm: {
     ...baseSkinCoordinates.rightArm,
-    west: { uv: [47, 20, 51, 32] },
-    north: { uv: [44, 20, 47, 32] },
-    south: { uv: [51, 20, 54, 32] },
-    up: { uv: [47, 20, 44, 16] },
-    down: { uv: [50, 16, 47, 20] }
+    east: { uv: [47, 20, 51, 32] },
+    south: { uv: [44, 20, 47, 32] },
+    north: { uv: [51, 20, 54, 32] },
+    up: { uv: [44, 16, 47, 20] },
+    down: { uv: [47, 20, 50, 16] }
   },
   leftSleeve: {
     ...baseSkinCoordinates.leftSleeve,
-    west: { uv: [55, 52, 59, 64] },
-    north: { uv: [52, 52, 55, 64] },
-    south: { uv: [59, 52, 62, 64] },
-    up: { uv: [55, 52, 52, 48] },
-    down: { uv: [58, 48, 55, 52], rotation: 180 }
+    east: { uv: [55, 52, 59, 64] },
+    south: { uv: [52, 52, 55, 64] },
+    north: { uv: [59, 52, 62, 64] },
+    up: { uv: [52, 48, 55, 52] },
+    down: { uv: [55, 52, 58, 48], rotation: 180 }
   },
   rightSleeve: {
     ...baseSkinCoordinates.rightSleeve,
-    west: { uv: [47, 36, 51, 48] },
-    north: { uv: [44, 36, 47, 48] },
-    south: { uv: [51, 36, 54, 48] },
-    up: { uv: [47, 36, 44, 32] },
-    down: { uv: [50, 32, 47, 36], rotation: 180 }
+    east: { uv: [47, 36, 51, 48] },
+    south: { uv: [44, 36, 47, 48] },
+    north: { uv: [51, 36, 54, 48] },
+    up: { uv: [44, 32, 47, 36] },
+    down: { uv: [47, 36, 50, 32], rotation: 180 }
   }
 };
 
@@ -11309,34 +11366,34 @@ var SkinObject = class extends SceneObject {
     }
     {
       {
-        const leftArmGroup = this.createAndAddGroup("leftArm", -5, 22, 0);
+        const leftArmGroup = this.createAndAddGroup("leftArm", 5, 22, 0);
         const leftArmGeo = this.getBoxGeometry("leftArm" /* LEFT_ARM */);
         const leftArm = this.createAndAddMesh("leftArm", leftArmGroup, leftArmGeo, mat, "y" /* Y */, -4);
-        leftArm.position.x = this.slim ? -0.5 : -1;
+        leftArm.position.x = this.slim ? 0.5 : 1;
         const leftSleeveGeo = this.getBoxGeometry("leftSleeve" /* LEFT_SLEEVE */);
         const leftSleeve = this.createAndAddMesh("leftSleeve", leftArmGroup, leftSleeveGeo, mat, "y" /* Y */, -4);
-        leftSleeve.position.x = this.slim ? -0.5 : -1;
+        leftSleeve.position.x = this.slim ? 0.5 : 1;
       }
       {
-        const rightArmGroup = this.createAndAddGroup("rightArm", 5, 22, 0);
+        const rightArmGroup = this.createAndAddGroup("rightArm", -5, 22, 0);
         const rightArmGeo = this.getBoxGeometry("rightArm" /* RIGHT_ARM */);
         const rightArm = this.createAndAddMesh("rightArm", rightArmGroup, rightArmGeo, mat, "y" /* Y */, -4);
-        rightArm.position.x = this.slim ? 0.5 : 1;
+        rightArm.position.x = this.slim ? -0.5 : -1;
         const rightSleeveGeo = this.getBoxGeometry("rightSleeve" /* RIGHT_SLEEVE */);
         const rightSleeve = this.createAndAddMesh("rightSleeve", rightArmGroup, rightSleeveGeo, mat, "y" /* Y */, -4);
-        rightSleeve.position.x = this.slim ? 0.5 : 1;
+        rightSleeve.position.x = this.slim ? -0.5 : -1;
       }
     }
     {
       {
-        const leftLegGroup = this.createAndAddGroup("leftLeg", -1.9, 12, 0);
+        const leftLegGroup = this.createAndAddGroup("leftLeg", 1.9, 12, 0);
         const leftLegGeo = this.getBoxGeometry("leftLeg" /* LEFT_LEG */);
         const leftLeg = this.createAndAddMesh("leftLeg", leftLegGroup, leftLegGeo, mat, "y" /* Y */, -6);
         const leftTrousersGeo = this.getBoxGeometry("leftTrousers" /* LEFT_TROUSERS */);
         const leftTrousers = this.createAndAddMesh("leftTrousers", leftLegGroup, leftTrousersGeo, mat, "y" /* Y */, -6);
       }
       {
-        const rightLegGroup = this.createAndAddGroup("rightLeg", 1.9, 12, 0);
+        const rightLegGroup = this.createAndAddGroup("rightLeg", -1.9, 12, 0);
         const rightLegGeo = this.getBoxGeometry("rightLeg" /* RIGHT_LEG */);
         const rightLeg = this.createAndAddMesh("rightLeg", rightLegGroup, rightLegGeo, mat, "y" /* Y */, -6);
         const rightTrousersGeo = this.getBoxGeometry("rightTrousers" /* RIGHT_TROUSERS */);
@@ -11386,9 +11443,10 @@ var SkinObject = class extends SceneObject {
       mesh.geometry = geometry;
     } else {
       const body = this.getGroupByName("body" /* BODY */);
-      const group = this.createGroup("cape" /* CAPE */, 0, body ? 0 : 24, 2);
+      const group = this.createGroup("cape" /* CAPE */);
+      group.position.set(0, body ? 0 : 24, -2);
       (body ?? this).add(group);
-      group.rotation.set(toRadians(-6), Math.PI, 0);
+      group.rotation.x = toRadians(6);
       const cape = this.createAndAddMesh("cape" /* CAPE */, group, geometry, material);
       cape.position.set(0, -8, -0.5);
     }
@@ -11402,7 +11460,7 @@ var SkinObject = class extends SceneObject {
   updateSlim(slim) {
     if (slim === this.slim) return;
     this.slim = slim;
-    const offset = slim ? 0.5 : -0.5;
+    const offset = slim ? -0.5 : 0.5;
     for (const part of ["leftArm" /* LEFT_ARM */, "leftSleeve" /* LEFT_SLEEVE */, "rightArm" /* RIGHT_ARM */, "rightSleeve" /* RIGHT_SLEEVE */]) {
       const mesh = this.getMeshByName(part);
       if (mesh) {
@@ -11499,13 +11557,9 @@ var MineRenderScene = class _MineRenderScene extends Scene5 {
     return this.add(...object);
   }
   async addSceneObject(asset, objectSupplier, _options, parent = this) {
-    console.log("addSceneObject", asset);
-    console.log("parent", parent);
-    console.log(_options);
     this.dirty = true;
     const obj = await objectSupplier();
     if (obj?.options?.instanceMeshes && asset.key && asset.key?.assetType === "models") {
-      console.log("instanceMeshes + key");
       let key = asset.key.serialize();
       if (isModelObject(obj)) {
         const { displayPosition, uvLockRotation, tints, cullMask } = obj.options;
@@ -11522,7 +11576,6 @@ var MineRenderScene = class _MineRenderScene extends Scene5 {
         return obj;
       });
     } else {
-      console.log("!instanceMeshes | !key");
       obj.scene = this;
       await obj.init();
       if (!isBlockObject(obj)) {
@@ -12227,7 +12280,10 @@ var Renderer = class _Renderer {
   constructor(options) {
     this._dirty = true;
     this._resizeListener = void 0;
+    this._running = false;
+    this._inAnimationLoop = false;
     this._disposed = false;
+    this._frameCallbacks = /* @__PURE__ */ new Map();
     this._debugHelpers = [];
     this._eventDispatchers = /* @__PURE__ */ new Map();
     this._changeListener = () => {
@@ -12238,7 +12294,14 @@ var Renderer = class _Renderer {
     if (!Number.isFinite(pixelRatio) || pixelRatio <= 0) {
       throw new RangeError("render.pixelRatio must be a finite positive number");
     }
-    this._animationLoop = this.animate.bind(this);
+    this._animationLoop = (time) => {
+      this._inAnimationLoop = true;
+      try {
+        this.animate(time);
+      } finally {
+        this._inAnimationLoop = false;
+      }
+    };
     this._frameInterval = this.options.render.fpsLimit > 0 ? 1e3 / this.options.render.fpsLimit : void 0;
     this._scene = this.createScene();
     this._camera = this.createCamera();
@@ -12453,15 +12516,39 @@ var Renderer = class _Renderer {
     this._dirty = dirty;
     this.scene.dirty = dirty;
   }
+  /**
+   * Calls a synchronous animation update before each FPS-limited draw while started.
+   * Subscriptions keep the scene drawing without manual dirty flags. Returns an unsubscribe function.
+   * Registering the same callback twice has no effect. Image exports do not invoke callbacks.
+   */
+  onFrame(callback) {
+    if (this._disposed) return () => {
+    };
+    const subscription = this._frameCallbacks.get(callback) ?? {};
+    this._frameCallbacks.set(callback, subscription);
+    return () => {
+      if (this._frameCallbacks.get(callback) === subscription) this._frameCallbacks.delete(callback);
+    };
+  }
   start() {
     if (this._disposed) return;
     this.stop();
-    this.renderer.setAnimationLoop(this._animationLoop);
+    this._running = true;
+    if (!this._inAnimationLoop) this.renderer.setAnimationLoop(this._animationLoop);
   }
   stop() {
     if (this._disposed) return;
-    this.renderer.setAnimationLoop(null);
+    this._running = false;
+    if (this._inAnimationLoop) {
+      queueMicrotask(() => {
+        this.renderer.setAnimationLoop(null);
+        if (this._running) this.renderer.setAnimationLoop(this._animationLoop);
+      });
+    } else {
+      this.renderer.setAnimationLoop(null);
+    }
     this._nextFrameTime = void 0;
+    for (const subscription of this._frameCallbacks.values()) subscription.previous = void 0;
   }
   /**
    * Stops rendering and releases owned resources. Repeated calls have no effect, and a disposed
@@ -12472,6 +12559,7 @@ var Renderer = class _Renderer {
     if (this._disposed) return;
     this.stop();
     this._disposed = true;
+    this._frameCallbacks.clear();
     if (this._resizeListener) {
       window.removeEventListener("resize", this._resizeListener);
       this._resizeListener = void 0;
@@ -12506,18 +12594,25 @@ var Renderer = class _Renderer {
     this.renderer.forceContextLoss();
   }
   animate(t = performance.now()) {
-    if (this._disposed) return;
+    if (!this._running) return;
     if (this._controls?.enabled) {
       this._controls.update();
     }
-    if (this._disposed) return;
-    if (!this.dirty && !this.options.render.renderAlways) return;
+    if (!this._running) return;
+    if (!this.dirty && !this.options.render.renderAlways && !this._frameCallbacks.size) return;
     const interval = this._frameInterval;
     if (interval) {
       const next = this._nextFrameTime;
       if (next !== void 0 && t + 0.1 < next) return;
       this._nextFrameTime = next !== void 0 && t - next < interval ? next + interval : t + interval;
     }
+    for (const [callback, subscription] of [...this._frameCallbacks]) {
+      if (this._frameCallbacks.get(callback) !== subscription) continue;
+      const previous = subscription.previous;
+      subscription.previous = t;
+      callback({ time: t / 1e3, delta: previous === void 0 ? 0 : (t - previous) / 1e3 });
+      if (!this._running) return;
+    }
     this.drawFrame();
   }
   drawFrame() {