@inweb/viewer-three 27.2.0 → 27.2.2

package/dist/viewer-three.module.js

@@ -23,7 +23,7 @@
 
 import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Info, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
 export * from '@inweb/viewer-core';
-import { Line, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Raycaster, MathUtils, EdgesGeometry, Matrix4, Vector4, Controls, Clock, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, REVISION, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
+import { Line, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, Vector3, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Raycaster, MathUtils, EdgesGeometry, Matrix4, Vector4, Controls, Box3, Clock, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, REVISION, MeshPhongMaterial, WebGLRenderTarget, UnsignedByteType, RGBAFormat, CylinderGeometry, Sprite, CanvasTexture, SRGBColorSpace, SpriteMaterial, TextureLoader, BufferAttribute, PointsMaterial, Points, TriangleStripDrawMode, TriangleFanDrawMode, LineSegments, LineLoop, Group, NormalBlending, LoadingManager, LoaderUtils, FileLoader, UniformsUtils, ShaderMaterial, AdditiveBlending, HalfFloatType, Scene, WebGLRenderer, LinearSRGBColorSpace } from 'three';
 import { TransformControls } from 'three/examples/jsm/controls/TransformControls.js';
 import { LineSegmentsGeometry } from 'three/examples/jsm/lines/LineSegmentsGeometry.js';
 import { Wireframe } from 'three/examples/jsm/lines/Wireframe.js';
@@ -41,17 +41,15 @@ import { EventEmitter2 } from '@inweb/eventemitter2';
 import { Markup } from '@inweb/markup';
 export * from '@inweb/markup';
 
-class PlaneHelper extends Line {
-    constructor(plane, size = 1, color = 0xffff00, offset = new Vector3()) {
+class PlaneHelper2 extends Line {
+    constructor(size = 1, color = 0xc0c0c0) {
         const positions = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, -1, 0, 1, 1, 0];
         const geometry = new BufferGeometry();
         geometry.setAttribute("position", new Float32BufferAttribute(positions, 3));
         geometry.computeBoundingSphere();
         super(geometry, new LineBasicMaterial({ color, toneMapped: false }));
-        this.type = "PlaneHelper";
-        this.plane = plane;
+        this.type = "PlaneHelper2";
         this.size = size;
-        this.offset = offset;
         const positions2 = [1, 1, 0, -1, 1, 0, -1, -1, 0, 1, 1, 0, -1, -1, 0, 1, -1, 0];
         const geometry2 = new BufferGeometry();
         geometry2.setAttribute("position", new Float32BufferAttribute(positions2, 3));
@@ -69,14 +67,10 @@ class PlaneHelper extends Line {
     dispose() {
         this.geometry.dispose();
         this.material.dispose();
-        this.children[0].geometry.dispose();
-        this.children[0].material.dispose();
+        this.helper.geometry.dispose();
+        this.helper.material.dispose();
     }
     updateMatrixWorld(force) {
-        this.position.set(0, 0, 0);
-        this.lookAt(this.plane.normal);
-        this.position.copy(this.offset);
-        this.translateZ(-(this.offset.dot(this.plane.normal) + this.plane.constant));
         this.scale.set(0.5 * this.size, 0.5 * this.size, 1);
         super.updateMatrixWorld(force);
     }
@@ -832,26 +826,41 @@ class OrbitDragger {
 }
 
 class CuttingPlaneDragger extends OrbitDragger {
-    constructor(viewer, normal, color) {
+    constructor(viewer, normal) {
         super(viewer);
         this.transformChange = () => {
+            this.plane.normal.copy(new Vector3(0, 0, -1)).applyQuaternion(this.planeCenter.quaternion);
             this.plane.constant = -this.planeCenter.position.dot(this.plane.normal);
             this.viewer.update();
         };
-        this.transformDrag = (event) => {
+        this.translateDrag = (event) => {
             this.orbit.enabled = !event.value;
+            this.rotate.enabled = !event.value;
+        };
+        this.rotateDrag = (event) => {
+            this.orbit.enabled = !event.value;
+            this.translate.enabled = !event.value;
         };
         this.updatePlaneSize = () => {
             this.planeHelper.size = this.viewer.extents.getSize(new Vector3()).length() || 1;
             this.viewer.update();
         };
         this.updateTransformCamera = () => {
-            this.transform.camera = this.viewer.camera;
+            this.translate.camera = this.viewer.camera;
+            this.rotate.camera = this.viewer.camera;
+        };
+        this.onKeyDown = (event) => {
+            if (event.key === "Shift")
+                this.rotate.setRotationSnap(Math.PI / 4);
+        };
+        this.onKeyUp = (event) => {
+            if (event.key === "Shift")
+                this.rotate.setRotationSnap(null);
         };
         this.onDoubleClick = (event) => {
             event.stopPropagation();
-            this.plane.negate();
-            this.viewer.update();
+            this.planeCenter.rotateOnAxis(new Vector3(0, 1, 0), Math.PI);
+            this.transformChange();
         };
         const extentsSize = viewer.extents.getSize(new Vector3()).length() || 1;
         const extentsCenter = viewer.extents.getCenter(new Vector3());
@@ -860,24 +869,38 @@ class CuttingPlaneDragger extends OrbitDragger {
         if (!viewer.renderer.clippingPlanes)
             viewer.renderer.clippingPlanes = [];
         viewer.renderer.clippingPlanes.push(this.plane);
-        this.planeHelper = new PlaneHelper(this.plane, extentsSize, color, extentsCenter);
-        this.viewer.helpers.add(this.planeHelper);
         this.planeCenter = new Object3D();
         this.planeCenter.position.copy(extentsCenter);
+        this.planeCenter.quaternion.setFromUnitVectors(new Vector3(0, 0, -1), normal);
         this.viewer.helpers.add(this.planeCenter);
-        this.transform = new TransformControls(viewer.camera, viewer.canvas);
-        this.transform.showX = !!normal.x;
-        this.transform.showY = !!normal.y;
-        this.transform.showZ = !!normal.z;
-        this.transform.attach(this.planeCenter);
-        this.transform.addEventListener("change", this.transformChange);
-        this.transform.addEventListener("dragging-changed", this.transformDrag);
-        this.viewer.helpers.add(this.transform.getHelper());
+        this.planeHelper = new PlaneHelper2(extentsSize);
+        this.planeCenter.add(this.planeHelper);
+        this.translate = new TransformControls(viewer.camera, viewer.canvas);
+        this.translate.setSpace("local");
+        this.translate.showX = false;
+        this.translate.showY = false;
+        this.translate.showZ = true;
+        this.translate.attach(this.planeCenter);
+        this.translate.addEventListener("change", this.transformChange);
+        this.translate.addEventListener("dragging-changed", this.translateDrag);
+        this.viewer.helpers.add(this.translate.getHelper());
+        this.rotate = new TransformControls(viewer.camera, viewer.canvas);
+        this.rotate.setMode("rotate");
+        this.rotate.setSpace("local");
+        this.rotate.showX = true;
+        this.rotate.showY = true;
+        this.rotate.showZ = false;
+        this.rotate.attach(this.planeCenter);
+        this.rotate.addEventListener("change", this.transformChange);
+        this.rotate.addEventListener("dragging-changed", this.rotateDrag);
+        this.viewer.helpers.add(this.rotate.getHelper());
         this.viewer.addEventListener("explode", this.updatePlaneSize);
         this.viewer.addEventListener("show", this.updatePlaneSize);
         this.viewer.addEventListener("showall", this.updatePlaneSize);
         this.viewer.addEventListener("changecameramode", this.updateTransformCamera);
         this.viewer.canvas.addEventListener("dblclick", this.onDoubleClick, true);
+        window.addEventListener("keydown", this.onKeyDown);
+        window.addEventListener("keyup", this.onKeyUp);
         this.viewer.update();
     }
     dispose() {
@@ -886,11 +909,18 @@ class CuttingPlaneDragger extends OrbitDragger {
         this.viewer.removeEventListener("showall", this.updatePlaneSize);
         this.viewer.removeEventListener("changecameramode", this.updateTransformCamera);
         this.viewer.canvas.removeEventListener("dblclick", this.onDoubleClick, true);
-        this.transform.removeEventListener("change", this.transformChange);
-        this.transform.removeEventListener("dragging-changed", this.transformDrag);
-        this.transform.getHelper().removeFromParent();
-        this.transform.detach();
-        this.transform.dispose();
+        window.removeEventListener("keydown", this.onKeyDown);
+        window.removeEventListener("keyup", this.onKeyUp);
+        this.translate.removeEventListener("change", this.transformChange);
+        this.translate.removeEventListener("dragging-changed", this.translateDrag);
+        this.translate.getHelper().removeFromParent();
+        this.translate.detach();
+        this.translate.dispose();
+        this.rotate.removeEventListener("change", this.transformChange);
+        this.rotate.removeEventListener("dragging-changed", this.rotateDrag);
+        this.rotate.getHelper().removeFromParent();
+        this.rotate.detach();
+        this.rotate.dispose();
         this.planeHelper.removeFromParent();
         this.planeHelper.dispose();
         this.planeCenter.removeFromParent();
@@ -900,19 +930,19 @@ class CuttingPlaneDragger extends OrbitDragger {
 
 class CuttingPlaneXAxisDragger extends CuttingPlaneDragger {
     constructor(viewer) {
-        super(viewer, new Vector3(1, 0, 0), 0xff0000);
+        super(viewer, new Vector3(-1, 0, 0));
     }
 }
 
 class CuttingPlaneYAxisDragger extends CuttingPlaneDragger {
     constructor(viewer) {
-        super(viewer, new Vector3(0, 1, 0), 0x00ff00);
+        super(viewer, new Vector3(0, -1, 0));
     }
 }
 
 class CuttingPlaneZAxisDragger extends CuttingPlaneDragger {
     constructor(viewer) {
-        super(viewer, new Vector3(0, 0, 1), 0x0000ff);
+        super(viewer, new Vector3(0, 0, -1));
     }
 }
 
@@ -1514,6 +1544,12 @@ class WalkControls extends Controls {
         this.movementSpeed = 0.1;
         this.multiplier = 3;
         this.groundFollowingSkippedFrames = 0;
+        this.GROUND_BOX_HALF_SIZE = 20;
+        this.GROUND_BOX_REFRESH_THRESHOLD = 0.3;
+        this._groundObjectBoxes = new Map();
+        this._activeGroundObjects = [];
+        this._groundBox = new Box3();
+        this._groundBoxCenter = new Vector3();
         this.moveWheel = 0;
         this.mouseDragOn = false;
         this._up = new Vector3();
@@ -1585,6 +1621,9 @@ class WalkControls extends Controls {
         };
         this.camera = camera;
         this.groundObjects = groundObjects;
+        for (const obj of groundObjects) {
+            this._groundObjectBoxes.set(obj, new Box3().setFromObject(obj));
+        }
         this.raycaster = new Raycaster();
         this.raycaster.near = 0;
         this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
@@ -1619,10 +1658,29 @@ class WalkControls extends Controls {
         window.removeEventListener("keyup", this.onKeyUp);
         super.dispose();
     }
+    _rebuildGroundBox(center) {
+        const h = this.GROUND_BOX_HALF_SIZE;
+        this._groundBoxCenter.copy(center);
+        this._groundBox.set(new Vector3(center.x - h, center.y - h * 4, center.z - h), new Vector3(center.x + h, center.y + h * 4, center.z + h));
+        this._activeGroundObjects = this.groundObjects.filter((obj) => {
+            const objectBox = this._groundObjectBoxes.get(obj);
+            return objectBox !== undefined && this._groundBox.intersectsBox(objectBox);
+        });
+    }
+    _needsGroundBoxRebuild(pos) {
+        if (this._activeGroundObjects.length === 0 && this.groundObjects.length > 0)
+            return true;
+        const threshold = this.GROUND_BOX_HALF_SIZE * this.GROUND_BOX_REFRESH_THRESHOLD;
+        return (Math.abs(pos.x - this._groundBoxCenter.x) > threshold || Math.abs(pos.z - this._groundBoxCenter.z) > threshold);
+    }
     updateGroundFollowing() {
+        const pos = this.object.position;
+        if (this._needsGroundBoxRebuild(pos)) {
+            this._rebuildGroundBox(pos);
+        }
         this._up.copy(this.camera.up).negate();
-        this.raycaster.set(this.object.position, this._up);
-        const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
+        this.raycaster.set(pos, this._up);
+        const intersects = this.raycaster.intersectObjects(this._activeGroundObjects, false);
         if (intersects.length > 0) {
             const groundY = intersects[0].point.y;
             const targetY = groundY + this.EYE_HEIGHT;
@@ -2499,7 +2557,7 @@ class CameraComponent {
                         camera = object;
             });
             if (camera) {
-                camera.isDefaultCamera = true;
+                camera.userData.isDefaultCamera = true;
                 camera.scale.set(1, 1, 1);
                 this.switchCamera(camera);
                 const mode = this.getCameraMode(camera);
@@ -2703,6 +2761,7 @@ class InfoComponent {
             this.viewer.info.optimizedScene.edges = 0;
             this.viewer.info.memory.geometries = 0;
             this.viewer.info.memory.geometryBytes = 0;
+            this.viewer.info.memory.optimizedGeometryBytes = 0;
             this.viewer.info.memory.textures = 0;
             this.viewer.info.memory.textureBytes = 0;
             this.viewer.info.memory.materials = 0;
@@ -2739,6 +2798,7 @@ class InfoComponent {
             this.viewer.info.optimizedScene.edges += info.optimizedScene.edges;
             this.viewer.info.memory.geometries += info.memory.geometries;
             this.viewer.info.memory.geometryBytes += info.memory.geometryBytes;
+            this.viewer.info.memory.optimizedGeometryBytes += info.memory.optimizedGeometryBytes;
             this.viewer.info.memory.textures += info.memory.textures;
             this.viewer.info.memory.textureBytes += info.memory.textureBytes;
             this.viewer.info.memory.materials += info.memory.materials;
@@ -2749,7 +2809,9 @@ class InfoComponent {
             this.viewer.info.performance.loadTime += performance.now() - this.startTime;
             console.log("Number of objects:", info.scene.objects);
             console.log("Number of objects after optimization:", info.optimizedScene.objects);
-            console.log("Total geometry size:", info.memory.totalEstimatedGpuBytes / (1024 * 1024), "MB");
+            console.log("Geometry size:", info.memory.geometryBytes / (1024 * 1024), "MB");
+            console.log("Optimized geometry size:", info.memory.optimizedGeometryBytes / (1024 * 1024), "MB");
+            console.log("Estimated GPU used:", info.memory.totalEstimatedGpuBytes / (1024 * 1024), "MB");
             console.log("File load time:", this.viewer.info.performance.loadTime, "ms");
         };
         this.resize = () => {
@@ -3492,6 +3554,7 @@ class ModelImpl {
         info.scene.edges = Math.floor(totalEdges);
         info.memory.geometries = geometries.size;
         info.memory.geometryBytes = geometryBytes;
+        info.memory.optimizedGeometryBytes = 0;
         info.memory.textures = textures.size;
         info.memory.textureBytes = Math.floor(textureBytes);
         info.memory.materials = materials.size;
@@ -3664,6 +3727,7 @@ class DynamicModelImpl extends ModelImpl {
         info.optimizedScene.edges = stats.scene.afterOptimization.edges;
         info.memory.geometries = stats.memory.geometries.count;
         info.memory.geometryBytes = stats.memory.geometries.bytes;
+        info.memory.optimizedGeometryBytes = stats.memory.geometries.optimizedBytes;
         info.memory.textures = stats.memory.textures.count;
         info.memory.materials = stats.memory.materials.count;
         info.memory.totalEstimatedGpuBytes = stats.memory.totalEstimatedGpuBytes;
@@ -4335,11 +4399,14 @@ class DynamicGltfLoader {
     this.structures = [];
     this.structureRoots = new Map();
     this.memoryLimit = this.getAvailableMemory();
+    this.optimizationMemoryMultiplier = 5;
+    this.memoryEstimationFactor = 1.7;
     this.loadedGeometrySize = 0;
     this.geometryCache = new Map();
     this.materialCache = new Map();
     this.textureCache = new Map();
     this.currentMemoryUsage = 0;
+    this.pendingMemoryUsage = 0;
     this.updateMemoryIndicator();
     this.loadedMaterials = new Map();
     this.abortController = new AbortController();
@@ -4395,7 +4462,7 @@ class DynamicGltfLoader {
     } catch (error) {
       console.warn("Error detecting available memory:", error);
     }
-    return memoryLimit / 3;
+    return memoryLimit;
   }
   getAbortController() {
     return this.abortController;
@@ -4403,9 +4470,26 @@ class DynamicGltfLoader {
   abortLoading() {
     this.abortController.abort();
   }
+  getOptimizedGeometrySize() {
+    let total = 0;
+    const addSize = (obj) => {
+      if (obj && obj.geometry) total += this.estimateGeometrySize(obj);
+    };
+    this.mergedMesh?.forEach(addSize);
+    this.mergedLines?.forEach(addSize);
+    this.mergedLineSegments?.forEach(addSize);
+    this.mergedPoints?.forEach(addSize);
+    return total;
+  }
   updateMemoryIndicator() {
+    const optimizedUsage = this.getOptimizedGeometrySize();
+    const totalUsage = this.currentMemoryUsage + optimizedUsage;
+    const totalUsageEstimate = Math.round(totalUsage * this.memoryEstimationFactor);
     this.dispatchEvent("geometrymemory", {
       currentUsage: this.currentMemoryUsage,
+      optimizedUsage,
+      totalUsage,
+      totalUsageEstimate,
       limit: this.memoryLimit,
     });
   }
@@ -4457,10 +4541,13 @@ class DynamicGltfLoader {
     for (const geo of geometries) {
       currentMemoryUsage += geo.size;
     }
-    if (currentMemoryUsage > this.memoryLimit) {
-      console.log(`Memory usage (${Math.round(currentMemoryUsage / (1024 * 1024))}MB) exceeds limit`);
+    const effectiveLimitForEviction = this.memoryLimit / this.memoryEstimationFactor;
+    if (currentMemoryUsage > effectiveLimitForEviction) {
+      console.log(
+        `Memory usage (${Math.round((currentMemoryUsage * this.memoryEstimationFactor) / (1024 * 1024))}MB est.) exceeds limit`
+      );
       for (const geo of geometries) {
-        if (currentMemoryUsage <= this.memoryLimit) break;
+        if (currentMemoryUsage <= effectiveLimitForEviction) break;
         if (this.abortController.signal.aborted) {
           throw new DOMException("Loading aborted", "AbortError");
         }
@@ -4544,7 +4631,9 @@ class DynamicGltfLoader {
     }
     const materialCount = uniqueMaterialIds.size;
     const textureCount = uniqueTextureIds.size;
-    const estimatedGpuMemoryBytes = geometryMemoryBytes;
+    const optimizedUsageBytes = this.getOptimizedGeometrySize();
+    const totalUsageBytes = geometryMemoryBytes + optimizedUsageBytes;
+    const estimatedGpuMemoryBytes = Math.round(totalUsageBytes * this.memoryEstimationFactor);
     if (!this._webglInfoCache) {
       try {
         const gl = this.renderer.getContext();
@@ -4581,7 +4670,12 @@ class DynamicGltfLoader {
         },
       },
       memory: {
-        geometries: { count: geometryCount, bytes: geometryMemoryBytes },
+        geometries: {
+          count: geometryCount,
+          bytes: geometryMemoryBytes,
+          optimizedBytes: optimizedUsageBytes,
+          totalRawBytes: totalUsageBytes,
+        },
         textures: { count: textureCount },
         materials: { count: materialCount },
         totalEstimatedGpuBytes: estimatedGpuMemoryBytes,
@@ -4593,9 +4687,12 @@ class DynamicGltfLoader {
       },
     };
   }
-  async loadNode(nodeId, onLoadFinishCb) {
+  async loadNode(nodeId, onLoadFinishCb, reservedEstimatedSize = 0) {
     const node = this.nodes.get(nodeId);
-    if (!node || node.loaded || node.loading) return;
+    if (!node || node.loaded || node.loading) {
+      this.pendingMemoryUsage = Math.max(0, this.pendingMemoryUsage - reservedEstimatedSize);
+      return;
+    }
     node.loading = true;
     const meshDef = node.structure.getJson().meshes[node.meshIndex];
     try {
@@ -4678,6 +4775,7 @@ class DynamicGltfLoader {
       if (bufferRequests.length === 0) {
         node.loaded = true;
         node.loading = false;
+        this.pendingMemoryUsage = Math.max(0, this.pendingMemoryUsage - reservedEstimatedSize);
         return;
       }
       bufferRequests.sort((a, b) => a.offset - b.offset);
@@ -4789,6 +4887,7 @@ class DynamicGltfLoader {
       }
       node.loaded = true;
       node.loading = false;
+      this.pendingMemoryUsage = Math.max(0, this.pendingMemoryUsage - reservedEstimatedSize);
       const geometrySize = this.estimateGeometrySize(node.object);
       this.geometryCache.set(node.object.uuid, geometrySize);
       this.currentMemoryUsage += geometrySize;
@@ -4797,6 +4896,7 @@ class DynamicGltfLoader {
       }
     } catch (error) {
       node.loading = false;
+      this.pendingMemoryUsage = Math.max(0, this.pendingMemoryUsage - reservedEstimatedSize);
       if (error.name === "AbortError") {
         return;
       }
@@ -5012,15 +5112,18 @@ class DynamicGltfLoader {
     let loadedCount = 0;
     let lastLoadedCount = 0;
     const totalNodes = nodesToLoad.length;
+    const progressTotal = { value: totalNodes };
     const loadProgress = async () => {
       loadedCount++;
+      const total = progressTotal.value;
+      const percentage = total > 0 ? Math.min(100, Math.round((loadedCount / total) * 100)) : 0;
       if (loadedCount - lastLoadedCount > 1000) {
         lastLoadedCount = loadedCount;
         this.updateMemoryIndicator();
         this.dispatchEvent("geometryprogress", {
-          percentage: Math.round((loadedCount / totalNodes) * 100),
+          percentage,
           loaded: loadedCount,
-          total: totalNodes,
+          total,
         });
         this.dispatchEvent("update");
         await new Promise((resolve) => {
@@ -5030,20 +5133,22 @@ class DynamicGltfLoader {
     };
     try {
       const loadOperations = [];
+      let memoryLimitReached = false;
       for (const nodeId of nodesToLoad) {
         if (this.abortController.signal.aborted) {
           throw new DOMException("Loading aborted", "AbortError");
         }
         const estimatedSize = await this.estimateNodeSize(nodeId);
-        if (this.currentMemoryUsage + estimatedSize > this.memoryLimit) {
-          console.log(`Memory limit reached after loading ${loadedCount} nodes`);
-          this.dispatchEvent("geometryerror", {
-            message: "Memory limit reached",
-          });
-          this.dispatchEvent("update");
-          return loadedCount;
+        const estimated = Number(estimatedSize) || 0;
+        const effectiveLimit = this.memoryLimit / this.optimizationMemoryMultiplier / this.memoryEstimationFactor;
+        if (this.currentMemoryUsage + this.pendingMemoryUsage + estimated > effectiveLimit) {
+          memoryLimitReached = true;
+          progressTotal.value = loadOperations.length;
+          console.log(`Memory limit reached after scheduling ${loadOperations.length} nodes`);
+          break;
         }
-        loadOperations.push(this.loadNode(nodeId, loadProgress));
+        this.pendingMemoryUsage += estimated;
+        loadOperations.push(this.loadNode(nodeId, loadProgress, estimated));
       }
       for (const structure of this.structures) {
         loadOperations.push(structure.flushBufferRequests());
@@ -5051,7 +5156,8 @@ class DynamicGltfLoader {
       await Promise.all(loadOperations);
       this.dispatchEvent("geometryend", {
         totalLoaded: loadedCount,
-        totalNodes,
+        totalNodes: progressTotal.value,
+        memoryLimitReached,
       });
       return loadedCount;
     } catch (error) {
@@ -5361,6 +5467,7 @@ class DynamicGltfLoader {
     this.transformedGeometries.clear();
     this.totalLoadedObjects = 0;
     this.currentMemoryUsage = 0;
+    this.pendingMemoryUsage = 0;
     this.loadedGeometrySize = 0;
     this.abortController = new AbortController();
     this.updateMemoryIndicator();
@@ -5567,6 +5674,7 @@ class DynamicGltfLoader {
       progress: 100,
       message: `Optimization complete! ${this.maxObjectId} objects processed.`,
     });
+    this.updateMemoryIndicator();
     this.dispatchEvent("update");
   }
   async mergeMeshGroups(materialGroups, rootGroup) {
@@ -7136,12 +7244,14 @@ class Viewer extends EventEmitter2 {
         if (!this.renderer)
             return;
         this._markup.clearOverlay();
+        this.emitEvent({ type: "clearoverlay" });
         this.update();
     }
     clearSlices() {
         if (!this.renderer)
             return;
         this.renderer.clippingPlanes = [];
+        this.emitEvent({ type: "clearslices" });
         this.update();
     }
     getSelected() {