@vizij/render 0.1.1 → 0.1.2

package/dist/index.js

@@ -1006,6 +1006,48 @@ function InnerRenderedShape({
           );
         }
       },
+      roughness: (value) => {
+        const standard = material.current;
+        if (standard?.roughness !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          standard.roughness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      metalness: (value) => {
+        const standard = material.current;
+        if (standard?.metalness !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          standard.metalness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      shininess: (value) => {
+        const phong = material.current;
+        if (phong?.shininess !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          phong.shininess = value;
+          phong.needsUpdate = true;
+        }
+      },
+      emissive: (value) => {
+        const standard = material.current;
+        if (standard?.emissive && (0, import_utils5.instanceOfRawRGB)(value)) {
+          standard.emissive.setRGB(value.r, value.g, value.b);
+          standard.needsUpdate = true;
+        }
+      },
+      emissiveIntensity: (value) => {
+        const standard = material.current;
+        if (standard?.emissiveIntensity !== void 0 && (0, import_utils5.instanceOfRawNumber)(value)) {
+          standard.emissiveIntensity = value;
+          standard.needsUpdate = true;
+        }
+      },
+      specular: (value) => {
+        const phong = material.current;
+        if (phong?.specular && (0, import_utils5.instanceOfRawRGB)(value)) {
+          phong.specular.setRGB(value.r, value.g, value.b);
+          phong.needsUpdate = true;
+        }
+      },
       ...morphTargetSettings[2]
     },
     shape
@@ -1126,7 +1168,10 @@ var MATERIAL_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES = [
   " color",
@@ -1135,7 +1180,10 @@ var MATERIAL_NAME_SUFFIXES = [
   " opacity",
   " roughness",
   " metalness",
-  " shininess"
+  " shininess",
+  " emissive intensity",
+  " emissive",
+  " specular"
 ];
 function deriveMaterialName(shape, values) {
   for (const key of MATERIAL_FEATURE_KEYS) {
@@ -1242,19 +1290,20 @@ var import_zustand2 = require("zustand");
 var import_middleware = require("zustand/middleware");
 var import_immer = require("immer");
 var THREE3 = __toESM(require("three"));
-var import_utils6 = require("@vizij/utils");
+var import_utils8 = require("@vizij/utils");
 
 // src/actions/create-new-element.ts
 var import_react9 = require("react");
 var import_lodash3 = require("lodash");
 
 // src/functions/create-world-element.ts
+var import_utils6 = require("@vizij/utils");
 function createDefaultGroup(partialBody) {
   const translation = partialBody.features?.translation || { animated: false, value: { x: 0, y: 0 } };
   const rotation = partialBody.features?.rotation || { animated: false, value: { x: 0, y: 0, z: 0 } };
   const scale = partialBody.features?.scale || { animated: false, value: { x: 1, y: 1, z: 1 } };
   return {
-    id: partialBody.id || crypto.randomUUID(),
+    id: partialBody.id || (0, import_utils6.createBrowserSafeId)(),
     name: partialBody.name || "new-body",
     type: partialBody.type || "group",
     tags: partialBody.tags || [],
@@ -1315,7 +1364,32 @@ function removeFromTree(state, nodesToRemove) {
   });
 }
 
+// src/memoryInvestigation.ts
+function getGlobalMemoryInvestigation() {
+  return globalThis;
+}
+function updateRenderState(updater) {
+  const globalObj = getGlobalMemoryInvestigation();
+  if (!globalObj.__VIZIJ_MEMORY_INVESTIGATION__?.enabled) {
+    return;
+  }
+  if (!globalObj.__vizijMemoryDebugState) {
+    globalObj.__vizijMemoryDebugState = {};
+  }
+  if (!globalObj.__vizijMemoryDebugState.render) {
+    globalObj.__vizijMemoryDebugState.render = {};
+  }
+  updater(globalObj.__vizijMemoryDebugState.render);
+}
+function recordRenderCounter(key, delta = 1) {
+  updateRenderState((renderState) => {
+    const current = typeof renderState[key] === "number" ? Number(renderState[key]) : 0;
+    renderState[key] = current + delta;
+  });
+}
+
 // src/functions/create-animatable.ts
+var import_utils7 = require("@vizij/utils");
 function createAnimatable(value) {
   if (!value.type) {
     return null;
@@ -1325,7 +1399,7 @@ function createAnimatable(value) {
   }
   if (value.type === "euler") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: `${value.name} Rotation`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1342,7 +1416,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "vector3") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: `${value.name} Vector3`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1359,7 +1433,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "string") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? "Hello World",
@@ -1372,7 +1446,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "number") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? 0,
@@ -1385,7 +1459,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "boolean") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? false,
@@ -1398,7 +1472,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "rgb") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? { r: 0, g: 0, b: 0 },
@@ -1415,7 +1489,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "hsl") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? (0, import_utils7.createBrowserSafeId)(),
       name: value.name,
       type: value.type,
       default: value.default ?? { h: 0, s: 0, l: 0 },
@@ -1561,7 +1635,7 @@ var VizijSlice = (set, get) => ({
   setValue: (id, namespace, value) => {
     set(
       (0, import_immer.produce)((state) => {
-        const lookupId = (0, import_utils6.getLookup)(namespace, id);
+        const lookupId = (0, import_utils8.getLookup)(namespace, id);
         if (typeof value === "function") {
           const current = state.values.get(lookupId);
           if (current !== void 0) {
@@ -1590,7 +1664,7 @@ var VizijSlice = (set, get) => ({
     set(
       (0, import_immer.produce)((state) => {
         writes.forEach(({ id, namespace, value }) => {
-          const lookupId = (0, import_utils6.getLookup)(namespace, id);
+          const lookupId = (0, import_utils8.getLookup)(namespace, id);
           state.values.set(lookupId, value);
         });
       })
@@ -1721,8 +1795,8 @@ var VizijSlice = (set, get) => ({
   setSlot: (parentId, parentNamespace, childId, childNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
-        const childLookupId = (0, import_utils6.getLookup)(childNamespace, childId);
+        const parentLookupId = (0, import_utils8.getLookup)(parentNamespace, parentId);
+        const childLookupId = (0, import_utils8.getLookup)(childNamespace, childId);
         state.slotConfig[parentLookupId] = childLookupId;
       })
     );
@@ -1741,12 +1815,13 @@ var VizijSlice = (set, get) => ({
   clearSlot: (parentId, parentNamespace) => {
     set(
       (0, import_immer.produce)((state) => {
-        const parentLookupId = (0, import_utils6.getLookup)(parentNamespace, parentId);
+        const parentLookupId = (0, import_utils8.getLookup)(parentNamespace, parentId);
         delete state.slotConfig[parentLookupId];
       })
     );
   },
   setVizij: (scene, animatables) => {
+    recordRenderCounter("rootReplacementCount");
     set({
       world: scene,
       animatables
@@ -1754,6 +1829,7 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
+      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1798,7 +1874,7 @@ var import_three = require("three");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 function SelectionGlowEffect({
   enabled = false,
-  color = "#ff1010ff",
+  color = "#ff1010",
   opacity = 0.9,
   thresholdAngle = 2
 }) {
@@ -1904,6 +1980,13 @@ function Vizij({
   onPointerMissed
 }) {
   const ctx = (0, import_react11.useContext)(VizijContext);
+  (0, import_react11.useEffect)(() => {
+    recordRenderCounter("canvasMountCount");
+    recordRenderCounter("mountedCanvasCount");
+    return () => {
+      recordRenderCounter("mountedCanvasCount", -1);
+    };
+  }, []);
   if (ctx) {
     return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
       import_fiber2.Canvas,
@@ -1972,7 +2055,7 @@ function InnerVizij({
         makeDefault: true,
         position: [0, 0, 100],
         near: 0.1,
-        far: 101
+        far: 1e3
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react11.Suspense, { fallback: null, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
@@ -2150,6 +2233,7 @@ var import_three5 = require("three");
 
 // src/functions/gltf-loading/import-group.ts
 var import_three4 = require("three");
+var import_utils11 = require("@vizij/utils");
 
 // src/functions/util.ts
 var import_react15 = require("react");
@@ -2159,8 +2243,10 @@ function namespaceArrayToRefs(namespaces) {
 
 // src/functions/gltf-loading/import-mesh.ts
 var import_three3 = require("three");
+var import_utils10 = require("@vizij/utils");
 
 // src/functions/gltf-loading/import-geometry.ts
+var import_utils9 = require("@vizij/utils");
 function sanitizeMorphKey(name, fallbackIndex, used) {
   const baseName = name && name.trim().length > 0 ? name.trim() : `morph_${fallbackIndex + 1}`;
   const slug = baseName.toLowerCase().replace(/[^a-z0-9]+/gi, "_").replace(/^_+|_+$/g, "");
@@ -2184,7 +2270,7 @@ function importGeometry(geometry, mesh) {
     const usedKeys = /* @__PURE__ */ new Set();
     Object.entries(mesh.morphTargetDictionary ?? {}).forEach(
       ([name, index]) => {
-        const morphId = crypto.randomUUID();
+        const morphId = (0, import_utils9.createBrowserSafeId)();
         const featureKey = sanitizeMorphKey(name, index, usedKeys);
         morphIds.push(featureKey);
         features[featureKey] = {
@@ -2220,7 +2306,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   let animatables = {};
   let newColorLookup = {};
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils10.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} translation`,
     type: "vector3",
     default: { x: mesh.position.x, y: mesh.position.y, z: mesh.position.z },
@@ -2236,7 +2322,7 @@ function importMesh(mesh, namespaces, colorLookup) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils10.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} rotation`,
     type: "euler",
     default: { x: mesh.rotation.x, y: mesh.rotation.y, z: mesh.rotation.z },
@@ -2249,7 +2335,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils10.createBrowserSafeId)(),
     name: `${mesh.name ?? "Mesh"} scale`,
     type: "vector3",
     default: { x: mesh.scale.x, y: mesh.scale.y, z: mesh.scale.z },
@@ -2260,56 +2346,120 @@ function importMesh(mesh, namespaces, colorLookup) {
     }
   };
   animatables = { ...animatables, [scaleAnimatable.id]: scaleAnimatable };
-  const color = mesh.material.color;
-  let useEmissive = false;
-  if (color.r === 0 && color.g === 0 && color.b === 0 && mesh.material.emissive) {
-    color.copy(mesh.material.emissive);
-    useEmissive = true;
-  }
-  const colorName = mesh.material.name;
-  const colorAnimatable = {
-    id: crypto.randomUUID(),
-    name: mesh.material.name ?? `${mesh.name ?? "Mesh"} color`,
-    type: "rgb",
-    default: { r: color.r, g: color.g, b: color.b },
-    constraints: {
-      min: [0, 0, 0],
-      max: [1, 1, 1]
-    },
+  const material = mesh.material;
+  const color = material.color;
+  const colorName = material.name;
+  const label = (suffix) => colorName ? `${colorName} ${suffix}` : `${mesh.name ?? "Mesh"} ${suffix}`;
+  const makeNumberAnimatable = (suffix, value, constraints) => ({
+    id: (0, import_utils10.createBrowserSafeId)(),
+    name: label(suffix),
+    type: "number",
+    default: value,
+    constraints,
     pub: {
       public: true,
-      output: mesh.material.name ? `${mesh.material.name} color` : `${mesh.name ?? "Mesh"} color`
+      output: label(suffix)
     }
-  };
-  const opacityAnimatable = {
-    id: crypto.randomUUID(),
-    name: mesh.material.name ? `${mesh.material.name} opacity` : `${mesh.name ?? "Mesh"} opacity`,
-    type: "number",
-    default: mesh.material.opacity,
+  });
+  const makeColorAnimatable = (suffix, value) => ({
+    id: (0, import_utils10.createBrowserSafeId)(),
+    name: label(suffix),
+    type: "rgb",
+    default: { r: value.r, g: value.g, b: value.b },
     constraints: {
-      min: 0,
-      max: 1
+      min: [0, 0, 0],
+      max: [1, 1, 1]
     },
     pub: {
       public: true,
-      output: mesh.material.name ? `${mesh.material.name} opacity` : `${mesh.name ?? "Mesh"} opacity`
+      output: label(suffix)
     }
+  });
+  const colorAnimatable = {
+    ...makeColorAnimatable("color", color),
+    name: material.name ?? `${mesh.name ?? "Mesh"} color`
   };
-  let colorId = colorAnimatable.id;
-  let opacityId = opacityAnimatable.id;
+  const opacityAnimatable = makeNumberAnimatable("opacity", material.opacity, {
+    min: 0,
+    max: 1
+  });
+  const materialAnimatables = [
+    colorAnimatable,
+    opacityAnimatable
+  ];
+  let roughnessAnimatable;
+  let metalnessAnimatable;
+  let emissiveAnimatable;
+  let emissiveIntensityAnimatable;
+  let shininessAnimatable;
+  let specularAnimatable;
+  if (material.isMeshStandardMaterial) {
+    roughnessAnimatable = makeNumberAnimatable(
+      "roughness",
+      material.roughness,
+      {
+        min: 0,
+        max: 1
+      }
+    );
+    metalnessAnimatable = makeNumberAnimatable(
+      "metalness",
+      material.metalness,
+      {
+        min: 0,
+        max: 1
+      }
+    );
+    emissiveAnimatable = makeColorAnimatable("emissive", material.emissive);
+    emissiveIntensityAnimatable = makeNumberAnimatable(
+      "emissive intensity",
+      material.emissiveIntensity,
+      { min: 0 }
+    );
+    materialAnimatables.push(
+      roughnessAnimatable,
+      metalnessAnimatable,
+      emissiveAnimatable,
+      emissiveIntensityAnimatable
+    );
+  } else if (mesh.material.isMeshPhongMaterial) {
+    const phong = mesh.material;
+    shininessAnimatable = makeNumberAnimatable("shininess", phong.shininess, {
+      min: 0
+    });
+    emissiveAnimatable = makeColorAnimatable("emissive", phong.emissive);
+    emissiveIntensityAnimatable = makeNumberAnimatable(
+      "emissive intensity",
+      phong.emissiveIntensity,
+      { min: 0 }
+    );
+    specularAnimatable = makeColorAnimatable("specular", phong.specular);
+    materialAnimatables.push(
+      shininessAnimatable,
+      emissiveAnimatable,
+      emissiveIntensityAnimatable,
+      specularAnimatable
+    );
+  }
+  let materialIds;
   if (colorName && colorLookup[colorName]) {
-    colorId = colorLookup[colorName][0];
-    opacityId = colorLookup[colorName][1];
-    useEmissive = colorLookup[colorName][2];
+    materialIds = colorLookup[colorName];
   } else {
-    animatables = { ...animatables, [colorAnimatable.id]: colorAnimatable };
-    animatables = { ...animatables, [opacityAnimatable.id]: opacityAnimatable };
+    materialIds = {
+      color: colorAnimatable.id,
+      opacity: opacityAnimatable.id,
+      roughness: roughnessAnimatable?.id,
+      metalness: metalnessAnimatable?.id,
+      emissive: emissiveAnimatable?.id,
+      emissiveIntensity: emissiveIntensityAnimatable?.id,
+      shininess: shininessAnimatable?.id,
+      specular: specularAnimatable?.id
+    };
+    materialAnimatables.forEach((animatable) => {
+      animatables = { ...animatables, [animatable.id]: animatable };
+    });
     if (colorName) {
-      newColorLookup[colorName] = [
-        colorAnimatable.id,
-        opacityAnimatable.id,
-        useEmissive
-      ];
+      newColorLookup[colorName] = materialIds;
     }
   }
   const [geometryFeatures, geometryAnimatables, morphTargets] = importGeometry(
@@ -2343,7 +2493,7 @@ function importMesh(mesh, namespaces, colorLookup) {
     id: mesh.uuid,
     name: mesh.name,
     geometry: mesh.geometry,
-    material: getShapeMaterial(mesh, useEmissive),
+    material: getShapeMaterial(mesh),
     type: "shape",
     tags: [],
     morphTargets,
@@ -2351,8 +2501,19 @@ function importMesh(mesh, namespaces, colorLookup) {
       translation: { animated: true, value: translationAnimatable.id },
       rotation: { animated: true, value: rotationAnimatable.id },
       scale: { animated: true, value: scaleAnimatable.id },
-      color: { animated: true, value: colorId },
-      opacity: { animated: true, value: opacityId },
+      color: { animated: true, value: materialIds.color },
+      opacity: { animated: true, value: materialIds.opacity },
+      ...materialIds.roughness ? { roughness: { animated: true, value: materialIds.roughness } } : {},
+      ...materialIds.metalness ? { metalness: { animated: true, value: materialIds.metalness } } : {},
+      ...materialIds.emissive ? { emissive: { animated: true, value: materialIds.emissive } } : {},
+      ...materialIds.emissiveIntensity ? {
+        emissiveIntensity: {
+          animated: true,
+          value: materialIds.emissiveIntensity
+        }
+      } : {},
+      ...materialIds.shininess ? { shininess: { animated: true, value: materialIds.shininess } } : {},
+      ...materialIds.specular ? { specular: { animated: true, value: materialIds.specular } } : {},
       ...geometryFeatures
     },
     children: children.length > 0 ? children : void 0,
@@ -2361,11 +2522,8 @@ function importMesh(mesh, namespaces, colorLookup) {
   world = { ...world, [newShape.id]: newShape };
   return [world, animatables, newShape.id, newColorLookup];
 }
-function getShapeMaterial(mesh, useEmissive) {
+function getShapeMaterial(mesh) {
   const material = mesh.material;
-  if (useEmissive) {
-    return "basic" /* Basic */;
-  }
   if (material.isMeshStandardMaterial) {
     return "standard" /* Standard */;
   } else if (material.isMeshPhongMaterial) {
@@ -2407,7 +2565,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   let newColorLookup = {};
   const children = [];
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils11.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} translation`,
     type: "vector3",
     default: { x: group.position.x, y: group.position.y, z: group.position.z },
@@ -2423,7 +2581,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils11.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} rotation`,
     type: "euler",
     default: { x: group.rotation.x, y: group.rotation.y, z: group.rotation.z },
@@ -2436,7 +2594,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: (0, import_utils11.createBrowserSafeId)(),
     name: `${group.name ?? "Group"} scale`,
     type: "vector3",
     default: { x: group.scale.x, y: group.scale.y, z: group.scale.z },
@@ -2629,7 +2787,10 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES2 = [
   " color",
@@ -2638,7 +2799,10 @@ var MATERIAL_NAME_SUFFIXES2 = [
   " opacity",
   " roughness",
   " metalness",
-  " shininess"
+  " shininess",
+  " emissive intensity",
+  " emissive",
+  " specular"
 ];
 function applyStoredRenderableNames(object, data) {
   if (typeof data.name === "string" && data.name.length > 0) {
@@ -2777,10 +2941,10 @@ function deriveRootBounds(group) {
 }
 
 // src/functions/vizij-bundle.ts
-var import_utils7 = require("@vizij/utils");
+var import_utils12 = require("@vizij/utils");
 var BUNDLE_KEYS = ["VIZIJ_bundle"];
 function cloneBundle(value) {
-  return (0, import_utils7.cloneDeepSafe)(value);
+  return (0, import_utils12.cloneDeepSafe)(value);
 }
 function readExtensionValue(extensionContainer) {
   for (const key of BUNDLE_KEYS) {
@@ -2858,12 +3022,29 @@ function applyVizijBundle(object, bundle) {
   const userData = object.userData && typeof object.userData === "object" ? object.userData : {};
   const originalExtensions = userData.gltfExtensions;
   let applied = false;
+  const staleCarriers = [];
   if (bundle) {
     userData.gltfExtensions = {
       ...originalExtensions ?? {},
       VIZIJ_bundle: bundle
     };
     object.userData = userData;
+    object.traverse((node) => {
+      if (node === object) {
+        return;
+      }
+      const extensions = node.userData?.gltfExtensions;
+      if (!extensions || !(BUNDLE_KEYS[0] in extensions)) {
+        return;
+      }
+      staleCarriers.push({ node, extensions });
+      const { [BUNDLE_KEYS[0]]: _stale, ...rest } = extensions;
+      if (Object.keys(rest).length > 0) {
+        node.userData.gltfExtensions = rest;
+      } else {
+        delete node.userData.gltfExtensions;
+      }
+    });
     applied = true;
   }
   return () => {
@@ -2880,12 +3061,16 @@ function applyVizijBundle(object, bundle) {
         delete object.userData;
       }
     }
+    for (const { node, extensions } of staleCarriers) {
+      node.userData.gltfExtensions = extensions;
+    }
+    staleCarriers.length = 0;
     applied = false;
   };
 }
 
 // src/functions/gltf-loading/extract-animations.ts
-var import_utils8 = require("@vizij/utils");
+var import_utils13 = require("@vizij/utils");
 var CHANNEL_PATH_TO_TRACK_PROPERTY = {
   translation: "position",
   rotation: "quaternion",
@@ -2901,7 +3086,7 @@ function clonePlainObject(value) {
   if (!value) {
     return void 0;
   }
-  return (0, import_utils8.cloneDeepSafe)(value);
+  return (0, import_utils13.cloneDeepSafe)(value);
 }
 function inferValueSize(valueType) {
   switch (valueType) {
@@ -3331,20 +3516,12 @@ async function resolveParserJson(parserJson, fallback) {
   return parserJson;
 }
 async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
-  const modelLoader = new import_three_stdlib.GLTFLoader();
-  modelLoader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
-  const modelData = await modelLoader.loadAsync(url);
-  const parserJson = await resolveParserJson(modelData?.parser?.json, {
-    url
-  });
-  const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
-  const asset = parseScene(
-    modelData.scene,
-    actualizedNamespaces,
+  const asset = await loadGLTFWithBundleInternal(
+    url,
+    namespaces,
     aggressiveImport,
     rootBounds,
-    parserJson,
-    modelData.animations
+    "url"
   );
   return [asset.world, asset.animatables, asset.animations];
 }
@@ -3353,11 +3530,12 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
   if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
     const objectUrl = URL.createObjectURL(blob);
     try {
-      const asset = await loadGLTFWithBundle(
+      const asset = await loadGLTFWithBundleInternal(
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
         rootBounds,
+        "blob",
         { blob }
       );
       return [asset.world, asset.animatables, asset.animations];
@@ -3367,8 +3545,7 @@ async function loadGLTFFromBlob(blob, namespaces, aggressiveImport = false, root
   }
   const arrayBuffer = typeof blob.arrayBuffer === "function" ? await blob.arrayBuffer() : await new Response(blob).arrayBuffer();
   return new Promise((resolve, reject) => {
-    const loader = new import_three_stdlib.GLTFLoader();
-    loader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
+    const loader = createTrackedGLTFLoader();
     loader.parse(
       arrayBuffer,
       "",
@@ -3412,9 +3589,20 @@ function parseScene(scene, namespaces, aggressiveImport, rootBounds, parserJson,
   const animations = extractVizijAnimations(parserJson, clips);
   return { world, animatables, bundle, animations, scene };
 }
-async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds, parserJsonFallback) {
+function createTrackedGLTFLoader() {
+  recordRenderCounter("gltfLoadCount");
+  recordRenderCounter("dracoLoaderCreationCount");
   const modelLoader = new import_three_stdlib.GLTFLoader();
   modelLoader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
+  return modelLoader;
+}
+async function loadGLTFWithBundleInternal(url, namespaces, aggressiveImport = false, rootBounds, sourceKind = "url", parserJsonFallback) {
+  if (sourceKind === "url") {
+    recordRenderCounter("gltfUrlLoadCount");
+  } else {
+    recordRenderCounter("gltfBlobLoadCount");
+  }
+  const modelLoader = createTrackedGLTFLoader();
   const modelData = await modelLoader.loadAsync(url);
   const parserJson = await resolveParserJson(modelData?.parser?.json, {
     url,
@@ -3430,16 +3618,27 @@ async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, roo
     modelData.animations
   );
 }
+async function loadGLTFWithBundle(url, namespaces, aggressiveImport = false, rootBounds, parserJsonFallback) {
+  return loadGLTFWithBundleInternal(
+    url,
+    namespaces,
+    aggressiveImport,
+    rootBounds,
+    "url",
+    parserJsonFallback
+  );
+}
 async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = false, rootBounds) {
   const actualizedNamespaces = namespaces.length > 0 ? namespaces : ["default"];
   if (typeof URL !== "undefined" && typeof URL.createObjectURL === "function") {
     const objectUrl = URL.createObjectURL(blob);
     try {
-      return await loadGLTFWithBundle(
+      return await loadGLTFWithBundleInternal(
         objectUrl,
         actualizedNamespaces,
         aggressiveImport,
         rootBounds,
+        "blob",
         { blob }
       );
     } finally {
@@ -3448,8 +3647,7 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
   }
   const arrayBuffer = typeof blob.arrayBuffer === "function" ? await blob.arrayBuffer() : await new Response(blob).arrayBuffer();
   return new Promise((resolve, reject) => {
-    const loader = new import_three_stdlib.GLTFLoader();
-    loader.setDRACOLoader(new import_three_stdlib.DRACOLoader());
+    const loader = createTrackedGLTFLoader();
     loader.parse(
       arrayBuffer,
       "",
@@ -3486,6 +3684,9 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
 // src/functions/load-gltf-blob.ts
 var import_three_stdlib2 = require("three-stdlib");
 var loadGltfFromBlob = (blob, namespaces) => {
+  recordRenderCounter("gltfLoadCount");
+  recordRenderCounter("gltfBlobLoadCount");
+  recordRenderCounter("dracoLoaderCreationCount");
   return new Promise((resolve, reject) => {
     const loader = new import_three_stdlib2.GLTFLoader();
     loader.setDRACOLoader(new import_three_stdlib2.DRACOLoader());