@needle-tools/engine 4.11.4 → 4.11.5-next.53316bf

package/src/engine/extensions/extensions.ts

@@ -92,18 +92,24 @@ class PointerResolver {
     }
 }
 
-export async function registerExtensions(loader: GLTFLoader, context: Context, url: string) {
+export async function registerExtensions(loader: GLTFLoader, context: Context, url: string, sourceId: SourceIdentifier) {
 
     // Make sure to remove any url parameters from the sourceId (because the source id in the renderer does not have a ?v=xxx so it will not be able to register the resolved lightmap otherwise)
     const idEnd = url.indexOf("?");
     if (idEnd >= 0) url = url.substring(0, idEnd);
+    if (!sourceId) {
+        sourceId = url;
+    }
+    if (sourceId.startsWith("blob:") || sourceId.startsWith("data:")) {
+        console.debug("[GLTFLoader] Suspicious sourceId detected");
+    }
 
     loader.register(p => new NEEDLE_gameobject_data(p));
     loader.register(p => new NEEDLE_persistent_assets(p));
-    loader.register(p => new NEEDLE_lightmaps(p, context.lightmaps, url));
-    loader.register(p => new NEEDLE_lighting_settings(p, url, context));
-    loader.register(p => new NEEDLE_techniques_webgl(p, url));
-    loader.register(p => new NEEDLE_render_objects(p, url));
+    loader.register(p => new NEEDLE_lightmaps(p, context.lightmaps, sourceId));
+    loader.register(p => new NEEDLE_lighting_settings(p, sourceId, context));
+    loader.register(p => new NEEDLE_techniques_webgl(p, sourceId));
+    loader.register(p => new NEEDLE_render_objects(p, sourceId));
     loader.register(p => new NEEDLE_progressive(p));
     loader.register(p => new EXT_texture_exr(p));
     if (isResourceTrackingEnabled()) loader.register(p => new InternalUsageTrackerPlugin(p))

package/src/engine/webcomponents/buttons.ts

@@ -8,7 +8,9 @@ import { getIconElement } from "./icons.js";
  * Use the ButtonsFactory to create buttons with icons and functionality   
  * Get access to the default buttons by using `ButtonsFactory.instance`  
  * The factory will create the buttons if they don't exist yet, and return the existing ones if they do (this allows you to reparent or modify created buttons) 
- */
+ * 
+ * @category HTML
+*/
 export class ButtonsFactory {
 
     private static _instance?: ButtonsFactory;

package/src/engine/webcomponents/needle menu/needle-menu.ts

@@ -48,11 +48,13 @@ export declare type ButtonInfo = {
 }
 
 /**
- * The NeedleMenu is a menu that can be displayed in the needle engine webcomponent or in VR/AR sessions.
+ * The NeedleMenu is a menu that can be displayed in the needle engine webcomponent or in VR/AR sessions.  
+ * 
  * The menu can be used to add buttons to the needle engine that can be used to interact with the application.  
- * The menu can be positioned at the top or the bottom of the needle engine webcomponent  
  * 
- * @example Create a button using the NeedleMenu
+ * The menu can be positioned at the top or the bottom of the <needle-engine> webcomponent.
+ * 
+ * @example Add a new button using the NeedleMenu
  * ```typescript
  * onStart(ctx => {
  *   ctx.menu.appendChild({ 
@@ -76,6 +78,20 @@ export declare type ButtonInfo = {
  *    }
  * }, "*");
  * ```
+ * 
+ * @example Access the menu from a component
+ * ```typescript
+ * import { Behaviour, OnStart } from '@needle-tools/engine';
+ * 
+ * export class MyComponent extends Behaviour {
+ * 
+ *   start() {
+ *    this.context.menu.appendChild({ ... });
+ *   }
+ * }
+ * ```
+ * 
+ * @category HTML
  */
 export class NeedleMenu {
     private readonly _context: Context;
@@ -909,6 +925,27 @@ export class NeedleMenuElement extends HTMLElement {
             }
         }
     }
+    /**
+     * Appends a button or HTML element to the needle-menu options.
+     * @param node a Node or ButtonInfo to create a button from
+     * @returns the appended Node
+     * 
+     * @example Append a button
+     * ```javascript
+     * const button = document.createElement("button");
+     * button.textContent = "Click Me";
+     * needleMenu.appendChild(button);
+     * ```
+     * @example Append a button using ButtonInfo
+     * ```javascript
+     * needleMenu.appendChild({
+     *    label: "Click Me",
+     *    onClick: () => { alert("Button clicked!"); },
+     *    icon: "info",
+     *    title: "This is a button",
+     * });
+     * ```
+     */
     appendChild<T extends Node>(node: T | ButtonInfo): T {
 
         if (!(node instanceof Node)) {

package/src/engine/webcomponents/needle-engine.attributes.ts

@@ -47,7 +47,7 @@ type SkyboxAttributes = {
     /** @deprecated. Use background-image instead - URL to .exr, .hdr, .png, .jpg to be used as skybox */
     "skybox-image"?: string,
     /** URL to .exr, .hdr, .png, .jpg to be used as skybox */
-    "background-image"?: string, 
+    "background-image"?: string,
     /** Blurs the background image (if any) - value between 0 and 1  
      * 0: no blur
      * 1: full blur
@@ -69,6 +69,7 @@ type RenderingAttributes = {
     "transparent"?: boolean,
     "contactshadows"?: boolean,
     "tone-mapping"?: TonemappingAttributeOptions,
+    "tonemapping"?: TonemappingAttributeOptions,
     "tone-mapping-exposure"?: number,
 }
 

package/src/engine/webcomponents/needle-engine.ts

@@ -296,6 +296,10 @@ export class NeedleEngineWebComponent extends HTMLElement implements INeedleEngi
         }
     }
 
+    connectedMoveCallback() {
+        // we dont want needle-engine to cleanup JUST because the element is moved in the DOM. See https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements#custom_element_lifecycle_callbacks
+    }
+
     /**
      * @internal
      */

package/src/engine/xr/NeedleXRSession.ts

@@ -527,7 +527,9 @@ export class NeedleXRSession implements INeedleXRSession {
         else
             console.log("%c" + `Requesting ${mode} session`, "font-weight:bold;");
         for (const script of scripts) {
-            if (script.onBeforeXR) script.onBeforeXR(mode, init);
+            if (script.onBeforeXR && script.activeAndEnabled && !script.destroyed) {
+                script.onBeforeXR(mode, init);
+            }
         }
         for (const listener of this._sessionRequestStartListeners) {
             listener({ mode, init });

package/src/engine-components/Component.ts

@@ -11,6 +11,7 @@ import { syncDestroy, syncInstantiate, SyncInstantiateOptions } from "../engine/
 import { Context, FrameEvent } from "../engine/engine_setup.js";
 import * as threeutils from "../engine/engine_three_utils.js";
 import type { Collision, ComponentInit, Constructor, ConstructorConcrete, GuidsMap, ICollider, IComponent, IGameObject, SourceIdentifier } from "../engine/engine_types.js";
+import { TypeStore } from "../engine/engine_typestore.js";
 import type { INeedleXRSessionEventReceiver, NeedleXRControllerEventArgs, NeedleXREventArgs } from "../engine/engine_xr.js";
 import { type IPointerEventHandler, PointerEventData } from "./ui/PointerEvents.js";
 
@@ -540,7 +541,8 @@ export abstract class GameObject extends Object3D implements Object3D, IGameObje
     }
 }
 
-
+// DO NOT CHANGE THE SYMBOL NAME
+const $componentName = Symbol("component-name");
 
 /** 
  * Needle Engine component's are the main building blocks of the Needle Engine.    
@@ -581,6 +583,12 @@ export abstract class Component implements IComponent, EventTarget,
      */
     get isComponent(): boolean { return true; }
 
+    /**
+     * Get the original component type name before minification (available if the component is registered in the TypeStore)
+     */
+    get [$componentName]() { return TypeStore.getKey(this.constructor as any) || undefined; }
+
+    
     private __context: Context | undefined;
 
     /**

package/src/engine-components/ReflectionProbe.ts

@@ -1,4 +1,4 @@
-import { EquirectangularReflectionMapping, LinearSRGBColorSpace, Material, MeshBasicMaterial, Object3D, SRGBColorSpace, Texture, Vector3 } from "three";
+import { CubeReflectionMapping, CubeTexture, EquirectangularReflectionMapping, LinearSRGBColorSpace, Material, MeshBasicMaterial, Object3D, SRGBColorSpace, Texture, Vector3 } from "three";
 
 import { isDevEnvironment, showBalloonWarning } from "../engine/debug/index.js";
 import { serializable } from "../engine/engine_serialization.js";
@@ -63,13 +63,19 @@ export class ReflectionProbe extends Behaviour {
 
     // @serializable(Texture)
     set texture(tex: Texture) {
-        if (tex && !(tex instanceof Texture)) {
-            console.error("ReflectionProbe.texture must be a Texture", tex);
-            return;
-        }
+
+        if (this._texture === tex) return;
         this._texture = tex;
+
+        if (debug) console.debug("[ReflectionProbe] Set reflection probe texture " + (tex?.name || "(removed)"));
+
         if (tex) {
-            tex.mapping = EquirectangularReflectionMapping;
+            if (tex instanceof CubeTexture) {
+                // cube textures use CubeReflectionMapping by default
+            }
+            else if (tex.mapping !== EquirectangularReflectionMapping) {
+                tex.mapping = EquirectangularReflectionMapping;
+            }
             tex.colorSpace = LinearSRGBColorSpace;
             tex.needsUpdate = true;
         }
@@ -110,9 +116,8 @@ export class ReflectionProbe extends Behaviour {
         }
     }
     start(): void {
-        if (!this._texture && isDevEnvironment()) {
+        if (!this._texture) {
             console.warn(`[ReflectionProbe] Missing texture. Please assign a custom cubemap texture. To use reflection probes assign them to your renderer's "anchor" property.`);
-            showBalloonWarning("ReflectionProbe configuration hint: See browser console for details")
         }
     }
 
@@ -206,8 +211,11 @@ export class ReflectionProbe extends Behaviour {
             /** this is the material that we copied and that has the reflection probe */
             const copy = cached?.copy;
 
-            // make sure the reflection probe is assigned
-            copy["envMap"] = this.texture;
+            if ("envMap" in copy) {
+                // make sure the reflection probe is assigned
+                copy.envMap = this.texture;
+                copy.needsUpdate = true;
+            }
 
             _rend.sharedMaterials[i] = copy;
         }

package/src/engine-components/Renderer.ts

@@ -69,7 +69,7 @@ class SharedMaterialArray implements ISharedMaterials {
     set changed(value: boolean) {
         if (value === true) {
             if (debugRenderer)
-                console.warn("SharedMaterials have changed: " + this._renderer.name, this);
+                console.warn("SharedMaterials have changed: " + this._renderer.name);
         }
         this._changed = value;
     }
@@ -358,11 +358,15 @@ export class Renderer extends Behaviour implements IRenderer {
     //@ts-ignore
     get sharedMaterials(): SharedMaterialArray {
 
-        // @ts-ignore (original materials will be set during deserialization)
-        if (this._originalMaterials === undefined) return null;
-
-        // @ts-ignore during deserialization code might access this property *before* the setter and then create an empty array
-        if (this.__isDeserializing === true) return null;
+        if (this._originalMaterials === undefined) {
+            if (!this.__didAwake) {
+                // @ts-ignore (original materials will be set during deserialization)
+                return null;
+            }
+            else {
+                this._originalMaterials = [];
+            }
+        }
 
         if (!this._sharedMaterials || !this._sharedMaterials.is(this)) {
             if (!this._originalMaterials) this._originalMaterials = [];
@@ -454,6 +458,7 @@ export class Renderer extends Behaviour implements IRenderer {
             this.context.addBeforeRenderListener(this.gameObject, this.onBeforeRenderThree);
         }
 
+        this._lightmaps = undefined;
         this.applyLightmapping();
 
         if (showWireframe) {
@@ -468,8 +473,8 @@ export class Renderer extends Behaviour implements IRenderer {
     }
 
     private applyLightmapping() {
-        if (this.lightmapIndex >= 0) {
-            const type = this.gameObject.type;
+        if (this.lightmapIndex >= 0 && !this._lightmaps) {
+            // const type = this.gameObject.type;
 
             // use the override lightmap if its not undefined
             const tex = this._lightmapTextureOverride !== undefined
@@ -477,45 +482,12 @@ export class Renderer extends Behaviour implements IRenderer {
                 : this.context.lightmaps.tryGetLightmap(this.sourceId, this.lightmapIndex);
             if (tex) {
                 if (!this._lightmaps) this._lightmaps = [];
-
-
                 const rm = new RendererLightmap(this);
                 rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
                 this._lightmaps.push(rm);
-
-                // if (type === "Mesh") {
-                //     const mat = this.gameObject["material"];
-                //     if (!mat?.isMeshBasicMaterial) {
-                //         if (this._lightmaps.length <= 0) {
-                //         }
-                //         const rm = this._lightmaps[0];
-                //         rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                //     }
-                //     else {
-                //         if (mat)
-                //             console.warn("Lightmapping is not supported on MeshBasicMaterial", mat.name)
-                //     }
-                // }
-                // // for multi materials we need to loop through children 
-                // // and then we add a lightmap renderer component to each of them
-                // else if (this.isMultiMaterialObject(this.gameObject) && this.sharedMaterials.length > 0) {
-                //     for (let i = 0; i < this.gameObject.children.length; i++) {
-                //         const child = this.gameObject.children[i];
-                //         if (!child["material"]?.isMeshBasicMaterial) {
-                //             let rm: RendererLightmap | undefined = undefined;
-                //             if (i >= this._lightmaps.length) {
-                //                 rm = new RendererLightmap(child as Mesh, this.context);
-                //                 this._lightmaps.push(rm);
-                //             }
-                //             else
-                //                 rm = this._lightmaps[i];
-                //             rm.init(this.lightmapIndex, this.lightmapScaleOffset, tex);
-                //         }
-                //     }
-                // }
             }
             else {
-                if (debugRenderer) console.warn("Lightmap not found", this.sourceId, this.lightmapIndex);
+                if (debugRenderer) console.warn(`[Renderer] No lightmaps found ${this.name} (${this.sourceId}, ${this.lightmapIndex})`);
             }
         }
 
@@ -730,7 +702,6 @@ export class Renderer extends Behaviour implements IRenderer {
                 // If the material has a envMap and is NOT using a reflection probe we set the envMap to the scene environment
                 if (mat && "envMap" in mat && "envMapIntensity" in mat && !ReflectionProbe.isUsingReflectionProbe(mat)) {
                     mat.envMap = this.context.scene.environment;
-                    mat.envMapIntensity = this.context.scene.environmentIntensity;
                     mat.envMapRotation = this.context.scene.environmentRotation;
                 }
             }
@@ -741,8 +712,9 @@ export class Renderer extends Behaviour implements IRenderer {
     private onBeforeRenderThree = (_renderer, _scene, _camera, _geometry, material, _group) => {
         if (material.envMapIntensity !== undefined) {
             const factor = this.hasLightmap ? Math.PI : 1;
-            const environmentIntensity = this.context.mainCameraComponent?.environmentIntensity ?? 1;
+            const environmentIntensity = this.context.scene.environmentIntensity;
             material.envMapIntensity = Math.max(0, environmentIntensity * this.context.sceneLighting.environmentIntensity / factor);
+            // console.log(this.context.sceneLighting.environmentIntensity);
         }
         if (this._lightmaps) {
             for (const lm of this._lightmaps) {

package/src/engine-components/RendererInstancing.ts

@@ -29,8 +29,9 @@ export class InstancingHandler {
      * (The instancing mesh renderer will grow x2 if the max instance count is reached)
      * @default 4
      * @returns The initial instance count
-     * */
-    static getStartInstanceCount = (_obj: Object3D) => {
+     */
+    // @ts-ignore (ignore the unused parameter warning)
+    static getStartInstanceCount = (obj: Object3D) => {
         return 4;
     };
 
@@ -45,20 +46,24 @@ export class InstancingHandler {
         if (res) {
             if (handlesArray === null) handlesArray = [];
             handlesArray.push(res);
-            // load texture lods
-            NEEDLE_progressive.assignTextureLOD(res.renderer.material, 0);
-
-            // Load mesh lods
-            // TODO: technically for multi meshes we do this work multiple times (we search for meshes in children and then use the renderer sharedMeshes... that doesnt make sense)
-            for (let i = 0; i < renderer.sharedMeshes.length; i++) {
-                const mesh = renderer.sharedMeshes[i];
-                const geometry = mesh.geometry;
-                NEEDLE_progressive.assignMeshLOD(mesh, 0).then(lod => {
-                    if (lod && renderer.activeAndEnabled && geometry != lod) {
-                        res.setGeometry(lod);
-                    }
-                });
+
+            // Load LOD for textures
+            const mat = res.object.material;
+            if(Array.isArray(mat)) {
+                mat.forEach(m => NEEDLE_progressive.assignTextureLOD(m, 0));
+            }
+            else {
+                NEEDLE_progressive.assignTextureLOD(mat, 0);
             }
+
+            // Load LOD for geometry
+            const mesh = res.object;
+            const geometry = mesh.geometry;
+            NEEDLE_progressive.assignMeshLOD(mesh, 0).then(lod => {
+                if (lod && geometry != lod) {
+                    res.setGeometry(lod);
+                }
+            });
         }
 
         else if (level <= 0 && obj.type !== "Mesh") {
@@ -349,7 +354,7 @@ class InstancedMeshRenderer {
     private _context: Context;
     private _batchedMesh: BatchedMesh;
     private _handles: (InstanceHandle | null)[] = [];
-    private readonly _geometryIds: Map<BufferGeometry, number> = new Map();
+    private _geometryIds = new WeakMap<BufferGeometry, number>();
     private _maxInstanceCount: number;
 
     private _currentInstanceCount = 0;
@@ -439,6 +444,10 @@ class InstancedMeshRenderer {
     private _needUpdateBounds: boolean = false;
     private _debugMaterial: MeshStandardMaterial | null = null;
 
+    private getBatchedMeshName() {
+        return this.name ? `${this.name} (BatchedMesh)` : "BatchedMesh";
+    }
+
     constructor(name: string, geo: BufferGeometry, material: Material, initialMaxCount: number, context: Context) {
         this.name = name;
         this.geometry = geo;
@@ -452,6 +461,7 @@ class InstancedMeshRenderer {
         this._maxVertexCount = estimate.vertexCount;
         this._maxIndexCount = estimate.indexCount;
         this._batchedMesh = new BatchedMesh(this._maxInstanceCount, this._maxVertexCount, this._maxIndexCount, this._debugMaterial ?? this.material);
+        this._batchedMesh.name = this.getBatchedMeshName();
         // this.inst = new InstancedMesh(geo, material, count);
         this._batchedMesh[$instancingAutoUpdateBounds] = true;
         // this.inst.count = 0;
@@ -475,7 +485,7 @@ class InstancedMeshRenderer {
         context.post_render_callbacks.push(this.onAfterRender);
 
         if (debugInstancing) {
-            console.log(`Instanced renderer created with ${this._maxInstanceCount} instances, ${this._maxVertexCount} max vertices and ${this._maxIndexCount} max indices for \"${name}\"`)
+            console.log(`Instanced renderer (${this.name}) created with ${this._maxInstanceCount} instances, ${this._maxVertexCount} max vertices and ${this._maxIndexCount} max indices for \"${name}\"`)
         }
     }
 
@@ -522,7 +532,8 @@ class InstancedMeshRenderer {
             return false;
         }
 
-        if (this.mustGrow(geo)) {
+        const newInstanceCount = this._currentInstanceCount + 1;
+        if (newInstanceCount > this._maxInstanceCount || this.mustGrow(geo)) {
             if (this.allowResize) {
                 this.grow(geo);
             }
@@ -644,34 +655,42 @@ class InstancedMeshRenderer {
     private mustGrow(geo?: BufferGeometry): boolean {
         if (this.count >= this._maxInstanceCount) return true;
         if (!geo || !geo.attributes) return false;
+
+        const isKnownGeometry = this._geometryIds.has(geo);
+        if (isKnownGeometry) return false;
+
         const meshInfo = getMeshInformation(geo);
         const newVertexCount = meshInfo.vertexCount;
         const newIndexCount = meshInfo.indexCount;
         return this._currentVertexCount + newVertexCount > this._maxVertexCount || this._currentIndexCount + newIndexCount > this._maxIndexCount;
     }
 
+    private _growId = 0;
     private grow(geometry: BufferGeometry) {
+        const id = ++this._growId;
         const growFactor = 2;
         const newSize = Math.ceil(this._maxInstanceCount * growFactor);
 
         // create a new BatchedMesh instance
+        // TODO: we should keep track of how many instances for each geometry we have and consider that when estimating new space
         const estimatedSpace = this.tryEstimateVertexCountSize(newSize, [geometry]);// geometry.attributes.position.count;
         // const indices = geometry.index ? geometry.index.count : 0;
         const newMaxVertexCount = Math.max(this._maxVertexCount, estimatedSpace.vertexCount);
-        const newMaxIndexCount = Math.max(this._maxIndexCount, estimatedSpace.indexCount, Math.ceil(this._maxVertexCount * growFactor));
+        const newMaxIndexCount = Math.max(this._maxIndexCount, estimatedSpace.indexCount);//, Math.ceil(this._maxVertexCount * growFactor));
 
         if (debugInstancing) {
             const geometryInfo = getMeshInformation(geometry);
-            console.warn(`[Instancing] Growing Buffer\nMesh: \"${this.name}${geometry.name?.length ? "/" + geometry.name : ""}\"\n${geometryInfo.vertexCount} vertices, ${geometryInfo.indexCount} indices\nMax count ${this._maxInstanceCount} → ${newSize}\nMax vertex count ${this._maxVertexCount} -> ${newMaxVertexCount}\nMax index count ${this._maxIndexCount} -> ${newMaxIndexCount}`);
+            console.warn(`[Instancing] Growing Buffer\nMesh: \"${this.name}${geometry.name?.length ? "/" + geometry.name : ""}\" (${geometryInfo.vertexCount.toLocaleString()} vertices, ${geometryInfo.indexCount.toLocaleString()} indices)\nMax count ${this._maxInstanceCount.toLocaleString()} → ${newSize.toLocaleString()}\nMax vertex count ${this._maxVertexCount.toLocaleString()} -> ${newMaxVertexCount.toLocaleString()}\nMax index count ${this._maxIndexCount.toLocaleString()} -> ${newMaxIndexCount.toLocaleString()}`);
             this._debugMaterial = createDebugMaterial();
         }
         else if (isDevEnvironment()) {
-            console.debug(`[Instancing] Growing Buffer\nMesh: \"${this.name}${geometry.name?.length ? "/" + geometry.name : ""}\"\nMax count ${this._maxInstanceCount} → ${newSize}\nMax vertex count ${this._maxVertexCount} -> ${newMaxVertexCount}\nMax index count ${this._maxIndexCount} -> ${newMaxIndexCount}`);
+            console.debug(`[Instancing] Growing Buffer\nMesh: \"${this.name}${geometry.name?.length ? "/" + geometry.name : ""}\"\nMax count ${this._maxInstanceCount} → ${newSize}\nMax vertex count ${this._maxVertexCount.toLocaleString()} -> ${newMaxVertexCount.toLocaleString()}\nMax index count ${this._maxIndexCount.toLocaleString()} -> ${newMaxIndexCount.toLocaleString()}`);
         }
 
         this._maxVertexCount = newMaxVertexCount;
         this._maxIndexCount = newMaxIndexCount;
         const newInst = new BatchedMesh(newSize, this._maxVertexCount, this._maxIndexCount, this._debugMaterial ?? this.material);
+        newInst.name = this.getBatchedMeshName();
         newInst.layers = this._batchedMesh.layers;
         newInst.castShadow = this._batchedMesh.castShadow;
         newInst.receiveShadow = this._batchedMesh.receiveShadow;
@@ -686,7 +705,7 @@ class InstancedMeshRenderer {
         // dispose the old batched mesh
         this._batchedMesh.dispose();
         this._batchedMesh.removeFromParent();
-        this._geometryIds.clear();
+        this._geometryIds = new WeakMap<BufferGeometry, number>();
 
         this._batchedMesh = newInst;
         this._maxInstanceCount = newSize;
@@ -698,6 +717,11 @@ class InstancedMeshRenderer {
         const original = [...this._handles];
         this._handles = [];
         for (const handle of original) {
+            if (id !== this._growId) {
+                // another grow happened in the meantime
+                if (debugInstancing) console.warn("[Instancing] Aborting grow since another grow happened in the meantime");
+                return;
+            }
             if (handle && handle.__instanceIndex >= 0) {
                 this.addGeometry(handle);
                 this._handles[handle.__instanceIndex] = handle;
@@ -722,23 +746,31 @@ class InstancedMeshRenderer {
                     entry.count += 1;
                 }
 
+                if (_newGeometries && _newGeometries?.length > 0) {
+                    const index = _newGeometries.indexOf(handle.object.geometry as BufferGeometry);
+                    if (index !== -1) {
+                        _newGeometries.splice(index, 1);
+                    }
+                }
             }
         }
 
         // then calculate the total vertex count
         let totalVertices = 0;
         let totalIndices = 0;
+        let totalGeometries = 0;
         // let maxVertices = 0;
         for (const [_geo, data] of usedGeometries) {
-            totalVertices += data.vertexCount * data.count;
-            totalIndices += data.indexCount * data.count;
+            totalGeometries += 1;
+            totalVertices += data.vertexCount;
+            totalIndices += data.indexCount;
             // maxVertices = Math.max(maxVertices, geo.attributes.position.count * count);
         }
         // we calculate the average to make an educated guess of how many vertices will be needed with the new buffer count
-        const averageVerts = Math.ceil(totalVertices / Math.max(1, this._currentInstanceCount));
-        let maxVertexCount = averageVerts * newMaxInstances;
-        const averageIndices = Math.ceil(totalIndices / Math.max(1, this._currentInstanceCount));
-        let maxIndexCount = averageIndices * newMaxInstances * 2;
+        const averageVerts = Math.ceil(totalVertices / Math.max(1, totalGeometries));
+        let maxVertexCount = averageVerts * totalGeometries;
+        const averageIndices = Math.ceil(totalIndices / Math.max(1, totalGeometries));
+        let maxIndexCount = averageIndices * totalGeometries;
 
         // if new geometries are provided we *know* that they will be added
         // so we make sure to include them in the calculation
@@ -753,6 +785,10 @@ class InstancedMeshRenderer {
             }
         }
 
+        if (debugInstancing) {
+            console.log(`[Instancing] Estimated size for new buffer ${this.name}\nGeometries: ${totalGeometries} (New: ${_newGeometries?.length || 0})\nInstances: ${newMaxInstances}\nEstimated Vertices: ${maxVertexCount.toLocaleString()}\nEstimated Indices: ${maxIndexCount.toLocaleString()}`);
+        }
+
         return { vertexCount: maxVertexCount, indexCount: maxIndexCount };
     }
 
@@ -770,16 +806,16 @@ class InstancedMeshRenderer {
         let geometryId = this._geometryIds.get(geo);
         if (geometryId === undefined || geometryId === null) {
             if (debugInstancing)
-                console.debug(`[Instancing] > ADD NEW GEOMETRY \"${handle.name} (${geo.name}; ${geo.uuid})\"\n${this._currentInstanceCount} instances, ${handle.maxVertexCount} max vertices, ${handle.maxIndexCount} max indices`);
+                console.warn(`[Instancing] > ADD NEW GEOMETRY \"${handle.name} (${geo.name}; ${geo.uuid})\"\nCurrent Instances: ${this._currentInstanceCount}\nMax Vertices: ${handle.maxVertexCount.toLocaleString()}\nMax Indices: ${handle.maxIndexCount.toLocaleString()}\nMax Triangles: ${(handle.maxIndexCount / 3).toLocaleString()}`);
 
             geometryId = this._batchedMesh.addGeometry(geo, handle.maxVertexCount, handle.maxIndexCount);
             this._geometryIds.set(geo, geometryId);
+            this._currentVertexCount += handle.maxVertexCount;
+            this._currentIndexCount += handle.maxIndexCount;
         }
         else {
             if (debugInstancing === "verbose") console.log(`[Instancing] > ADD INSTANCE \"${handle.name}\"\nGEOMETRY_ID=${geometryId}\n${this._currentInstanceCount} instances`);
         }
-        this._currentVertexCount += handle.maxVertexCount;
-        this._currentIndexCount += handle.maxIndexCount;
         const i = this._batchedMesh.addInstance(geometryId);
         handle.__geometryIndex = geometryId;
         handle.__instanceIndex = i;
@@ -787,7 +823,7 @@ class InstancedMeshRenderer {
         handle.__reservedIndexRange = handle.maxIndexCount;
         this._batchedMesh.setMatrixAt(i, handle.object.matrixWorld);
         if (debugInstancing)
-            console.debug(`[Instancing] > ADDED INSTANCE \"${handle.name}\"\nGEOMETRY_ID=${geometryId}\n${this._currentInstanceCount} instances\nIndex: ${handle.__instanceIndex}`);
+            console.debug(`[Instancing] > ADDED INSTANCE \"${handle.name}\"\nGEOMETRY_ID=${geometryId}\n${this._currentInstanceCount} instances\nIndex: ${handle.__instanceIndex}\nVertices: ${this._currentVertexCount.toLocaleString()}/${this._maxVertexCount.toLocaleString()},\nIndices: ${this._currentIndexCount.toLocaleString()}/${this._maxIndexCount.toLocaleString()}`);
 
     }
 
@@ -803,7 +839,7 @@ class InstancedMeshRenderer {
         //     this.inst.deleteGeometry(handle.__instanceIndex);
         // else 
         // this._batchedMesh.setVisibleAt(handle.__instanceIndex, false);
-        if(debugInstancing) {
+        if (debugInstancing) {
             console.debug(`[Instancing] < REMOVE INSTANCE \"${handle.name}\" at [${handle.__instanceIndex}]\nGEOMETRY_ID=${handle.__geometryIndex}\n${this._currentInstanceCount} instances\nIndex: ${handle.__instanceIndex}`);
         }
         this._batchedMesh.deleteInstance(handle.__instanceIndex);