@vizij/render 0.1.1 → 0.1.2

package/dist/index.mjs

@@ -974,6 +974,48 @@ function InnerRenderedShape({
           );
         }
       },
+      roughness: (value) => {
+        const standard = material.current;
+        if (standard?.roughness !== void 0 && instanceOfRawNumber4(value)) {
+          standard.roughness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      metalness: (value) => {
+        const standard = material.current;
+        if (standard?.metalness !== void 0 && instanceOfRawNumber4(value)) {
+          standard.metalness = value;
+          standard.needsUpdate = true;
+        }
+      },
+      shininess: (value) => {
+        const phong = material.current;
+        if (phong?.shininess !== void 0 && instanceOfRawNumber4(value)) {
+          phong.shininess = value;
+          phong.needsUpdate = true;
+        }
+      },
+      emissive: (value) => {
+        const standard = material.current;
+        if (standard?.emissive && instanceOfRawRGB3(value)) {
+          standard.emissive.setRGB(value.r, value.g, value.b);
+          standard.needsUpdate = true;
+        }
+      },
+      emissiveIntensity: (value) => {
+        const standard = material.current;
+        if (standard?.emissiveIntensity !== void 0 && instanceOfRawNumber4(value)) {
+          standard.emissiveIntensity = value;
+          standard.needsUpdate = true;
+        }
+      },
+      specular: (value) => {
+        const phong = material.current;
+        if (phong?.specular && instanceOfRawRGB3(value)) {
+          phong.specular.setRGB(value.r, value.g, value.b);
+          phong.needsUpdate = true;
+        }
+      },
       ...morphTargetSettings[2]
     },
     shape
@@ -1094,7 +1136,10 @@ var MATERIAL_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES = [
   " color",
@@ -1103,7 +1148,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) {
@@ -1217,12 +1265,13 @@ import { createRef } from "react";
 import { mapValues as mapValues2 } from "lodash";
 
 // src/functions/create-world-element.ts
+import { createBrowserSafeId } from "@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 || createBrowserSafeId(),
     name: partialBody.name || "new-body",
     type: partialBody.type || "group",
     tags: partialBody.tags || [],
@@ -1283,7 +1332,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
+import { createBrowserSafeId as createBrowserSafeId2 } from "@vizij/utils";
 function createAnimatable(value) {
   if (!value.type) {
     return null;
@@ -1293,7 +1367,7 @@ function createAnimatable(value) {
   }
   if (value.type === "euler") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: `${value.name} Rotation`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1310,7 +1384,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "vector3") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: `${value.name} Vector3`,
       type: value.type,
       default: value.default ?? { x: 0, y: 0, z: 0 },
@@ -1327,7 +1401,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "string") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? "Hello World",
@@ -1340,7 +1414,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "number") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? 0,
@@ -1353,7 +1427,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "boolean") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? false,
@@ -1366,7 +1440,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "rgb") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? { r: 0, g: 0, b: 0 },
@@ -1383,7 +1457,7 @@ function createAnimatable(value) {
     return newAnimatable;
   } else if (value.type === "hsl") {
     const newAnimatable = {
-      id: value.id ?? crypto.randomUUID(),
+      id: value.id ?? createBrowserSafeId2(),
       name: value.name,
       type: value.type,
       default: value.default ?? { h: 0, s: 0, l: 0 },
@@ -1715,6 +1789,7 @@ var VizijSlice = (set, get) => ({
     );
   },
   setVizij: (scene, animatables) => {
+    recordRenderCounter("rootReplacementCount");
     set({
       world: scene,
       animatables
@@ -1722,6 +1797,7 @@ var VizijSlice = (set, get) => ({
   },
   addWorldElements(world, animatables, replace) {
     if (replace) {
+      recordRenderCounter("rootReplacementCount");
       set({ world, animatables });
     } else {
       set((state) => ({
@@ -1774,7 +1850,7 @@ import {
 import { jsx as jsx6 } from "react/jsx-runtime";
 function SelectionGlowEffect({
   enabled = false,
-  color = "#ff1010ff",
+  color = "#ff1010",
   opacity = 0.9,
   thresholdAngle = 2
 }) {
@@ -1880,6 +1956,13 @@ function Vizij({
   onPointerMissed
 }) {
   const ctx = useContext3(VizijContext);
+  useEffect7(() => {
+    recordRenderCounter("canvasMountCount");
+    recordRenderCounter("mountedCanvasCount");
+    return () => {
+      recordRenderCounter("mountedCanvasCount", -1);
+    };
+  }, []);
   if (ctx) {
     return /* @__PURE__ */ jsx7(
       Canvas,
@@ -1948,7 +2031,7 @@ function InnerVizij({
         makeDefault: true,
         position: [0, 0, 100],
         near: 0.1,
-        far: 101
+        far: 1e3
       }
     ),
     /* @__PURE__ */ jsx7(Suspense, { fallback: null, children: /* @__PURE__ */ jsx7(
@@ -2126,6 +2209,7 @@ import { Object3D as Object3D7 } from "three";
 
 // src/functions/gltf-loading/import-group.ts
 import { Object3D as Object3D6 } from "three";
+import { createBrowserSafeId as createBrowserSafeId5 } from "@vizij/utils";
 
 // src/functions/util.ts
 import { createRef as createRef2 } from "react";
@@ -2135,8 +2219,12 @@ function namespaceArrayToRefs(namespaces) {
 
 // src/functions/gltf-loading/import-mesh.ts
 import { Object3D as Object3D5 } from "three";
+import { createBrowserSafeId as createBrowserSafeId4 } from "@vizij/utils";
 
 // src/functions/gltf-loading/import-geometry.ts
+import {
+  createBrowserSafeId as createBrowserSafeId3
+} from "@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, "");
@@ -2160,7 +2248,7 @@ function importGeometry(geometry, mesh) {
     const usedKeys = /* @__PURE__ */ new Set();
     Object.entries(mesh.morphTargetDictionary ?? {}).forEach(
       ([name, index]) => {
-        const morphId = crypto.randomUUID();
+        const morphId = createBrowserSafeId3();
         const featureKey = sanitizeMorphKey(name, index, usedKeys);
         morphIds.push(featureKey);
         features[featureKey] = {
@@ -2196,7 +2284,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   let animatables = {};
   let newColorLookup = {};
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId4(),
     name: `${mesh.name ?? "Mesh"} translation`,
     type: "vector3",
     default: { x: mesh.position.x, y: mesh.position.y, z: mesh.position.z },
@@ -2212,7 +2300,7 @@ function importMesh(mesh, namespaces, colorLookup) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId4(),
     name: `${mesh.name ?? "Mesh"} rotation`,
     type: "euler",
     default: { x: mesh.rotation.x, y: mesh.rotation.y, z: mesh.rotation.z },
@@ -2225,7 +2313,7 @@ function importMesh(mesh, namespaces, colorLookup) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId4(),
     name: `${mesh.name ?? "Mesh"} scale`,
     type: "vector3",
     default: { x: mesh.scale.x, y: mesh.scale.y, z: mesh.scale.z },
@@ -2236,56 +2324,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: createBrowserSafeId4(),
+    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: createBrowserSafeId4(),
+    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(
@@ -2319,7 +2471,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,
@@ -2327,8 +2479,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,
@@ -2337,11 +2500,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) {
@@ -2383,7 +2543,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   let newColorLookup = {};
   const children = [];
   const translationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId5(),
     name: `${group.name ?? "Group"} translation`,
     type: "vector3",
     default: { x: group.position.x, y: group.position.y, z: group.position.z },
@@ -2399,7 +2559,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
     [translationAnimatable.id]: translationAnimatable
   };
   const rotationAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId5(),
     name: `${group.name ?? "Group"} rotation`,
     type: "euler",
     default: { x: group.rotation.x, y: group.rotation.y, z: group.rotation.z },
@@ -2412,7 +2572,7 @@ function importGroup(group, namespaces, colorLookup, rootBounds) {
   };
   animatables = { ...animatables, [rotationAnimatable.id]: rotationAnimatable };
   const scaleAnimatable = {
-    id: crypto.randomUUID(),
+    id: createBrowserSafeId5(),
     name: `${group.name ?? "Group"} scale`,
     type: "vector3",
     default: { x: group.scale.x, y: group.scale.y, z: group.scale.z },
@@ -2605,7 +2765,10 @@ var MATERIAL_NAME_FEATURE_KEYS = [
   "opacity",
   "roughness",
   "metalness",
-  "shininess"
+  "shininess",
+  "emissive",
+  "emissiveIntensity",
+  "specular"
 ];
 var MATERIAL_NAME_SUFFIXES2 = [
   " color",
@@ -2614,7 +2777,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) {
@@ -2834,12 +3000,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 () => {
@@ -2856,6 +3039,10 @@ function applyVizijBundle(object, bundle) {
         delete object.userData;
       }
     }
+    for (const { node, extensions } of staleCarriers) {
+      node.userData.gltfExtensions = extensions;
+    }
+    staleCarriers.length = 0;
     applied = false;
   };
 }
@@ -3307,20 +3494,12 @@ async function resolveParserJson(parserJson, fallback) {
   return parserJson;
 }
 async function loadGLTF(url, namespaces, aggressiveImport = false, rootBounds) {
-  const modelLoader = new GLTFLoader();
-  modelLoader.setDRACOLoader(new 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];
 }
@@ -3329,11 +3508,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];
@@ -3343,8 +3523,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 GLTFLoader();
-    loader.setDRACOLoader(new DRACOLoader());
+    const loader = createTrackedGLTFLoader();
     loader.parse(
       arrayBuffer,
       "",
@@ -3388,9 +3567,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 GLTFLoader();
   modelLoader.setDRACOLoader(new 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,
@@ -3406,16 +3596,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 {
@@ -3424,8 +3625,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 GLTFLoader();
-    loader.setDRACOLoader(new DRACOLoader());
+    const loader = createTrackedGLTFLoader();
     loader.parse(
       arrayBuffer,
       "",
@@ -3462,6 +3662,9 @@ async function loadGLTFFromBlobWithBundle(blob, namespaces, aggressiveImport = f
 // src/functions/load-gltf-blob.ts
 import { DRACOLoader as DRACOLoader2, GLTFLoader as GLTFLoader2 } from "three-stdlib";
 var loadGltfFromBlob = (blob, namespaces) => {
+  recordRenderCounter("gltfLoadCount");
+  recordRenderCounter("gltfBlobLoadCount");
+  recordRenderCounter("dracoLoaderCreationCount");
   return new Promise((resolve, reject) => {
     const loader = new GLTFLoader2();
     loader.setDRACOLoader(new DRACOLoader2());