@inweb/viewer-three 27.1.9 → 27.2.1

package/lib/Viewer/Viewer.d.ts

@@ -99,7 +99,7 @@ export declare class Viewer extends EventEmitter2<ViewerEventMap & CanvasEventMa
      *
      * @param file - File to load. Can be:
      *
-     *   - `File`, `Assembly` or `Model` instance from the Open Cloud Server
+     *   - `File`, `Assembly`, or `Model` instance from the Open Cloud Server
      *   - `URL` string
      *   - {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string
      *   - {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object

package/lib/Viewer/controls/WalkControls.d.ts

@@ -11,12 +11,14 @@ interface WalkControlsEventMap {
 export declare class WalkControls extends Controls<WalkControlsEventMap> {
     readonly EYE_HEIGHT = 1.7;
     readonly FAILING_DISTANCE = 2;
-    readonly GROUND_FOLLOWING_SPEED = 0.05;
+    readonly GROUND_FOLLOWING_SKIP_FRAMES = 3;
+    readonly GROUND_FOLLOWING_SPEED = 0.4;
     readonly LOOK_SPEED = 0.1;
     readonly WALK_SPEED_DELIMITER = 4;
     readonly WHEEL_SPEED_DELIMITER = 15000;
     movementSpeed: number;
     multiplier: number;
+    private groundFollowingSkippedFrames;
     private raycaster;
     private groundObjects;
     private moveKeys;
@@ -27,6 +29,9 @@ export declare class WalkControls extends Controls<WalkControlsEventMap> {
     private mouseDragOn;
     rotateDelta: Vector2;
     private camera;
+    private readonly _up;
+    private readonly _forward;
+    private readonly _sideways;
     constructor(camera: Camera, canvas: HTMLElement, groundObjects: Object3D[]);
     dispose(): void;
     onPointerDown: (event: PointerEvent) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.1.9",
+  "version": "27.2.1",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.1.9",
-    "@inweb/eventemitter2": "~27.1.9",
-    "@inweb/markup": "~27.1.9",
-    "@inweb/viewer-core": "~27.1.9"
+    "@inweb/client": "~27.2.1",
+    "@inweb/eventemitter2": "~27.2.1",
+    "@inweb/markup": "~27.2.1",
+    "@inweb/viewer-core": "~27.2.1"
   },
   "devDependencies": {
     "@streamparser/json": "^0.0.22",

package/src/Viewer/Viewer.ts

@@ -389,7 +389,7 @@ export class Viewer
    *
    * @param file - File to load. Can be:
    *
-   *   - `File`, `Assembly` or `Model` instance from the Open Cloud Server
+   *   - `File`, `Assembly`, or `Model` instance from the Open Cloud Server
    *   - `URL` string
    *   - {@link https://developer.mozilla.org/docs/Web/HTTP/Basics_of_HTTP/Data_URIs | Data URL} string
    *   - {@link https://developer.mozilla.org/docs/Web/API/File | Web API File} object

package/src/Viewer/components/CameraComponent.ts

@@ -134,7 +134,7 @@ export class CameraComponent implements IComponent {
     });
 
     if (camera) {
-      camera.isDefaultCamera = true;
+      camera.userData.isDefaultCamera = true;
       camera.scale.set(1, 1, 1); // <- Visualize fix
 
       this.switchCamera(camera);

package/src/Viewer/components/InfoComponent.ts

@@ -100,6 +100,7 @@ export class InfoComponent implements IComponent {
 
     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;
@@ -141,6 +142,7 @@ export class InfoComponent implements IComponent {
 
     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;
@@ -153,7 +155,9 @@ export class InfoComponent implements IComponent {
 
     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");
   };

package/src/Viewer/controls/WalkControls.ts

@@ -31,13 +31,15 @@ interface WalkControlsEventMap {
 export class WalkControls extends Controls<WalkControlsEventMap> {
   readonly EYE_HEIGHT = 1.7;
   readonly FAILING_DISTANCE = 2;
-  readonly GROUND_FOLLOWING_SPEED = 0.05;
+  readonly GROUND_FOLLOWING_SKIP_FRAMES = 3;
+  readonly GROUND_FOLLOWING_SPEED = 0.4;
   readonly LOOK_SPEED = 0.1;
   readonly WALK_SPEED_DELIMITER = 4;
   readonly WHEEL_SPEED_DELIMITER = 15000;
 
   public movementSpeed = 0.1;
   public multiplier = 3;
+  private groundFollowingSkippedFrames = 0;
 
   private raycaster: Raycaster;
   private groundObjects: Object3D[];
@@ -53,6 +55,10 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
 
   private camera: Camera;
 
+  private readonly _up = new Vector3();
+  private readonly _forward = new Vector3();
+  private readonly _sideways = new Vector3();
+
   constructor(camera: Camera, canvas: HTMLElement, groundObjects: Object3D[]) {
     super(camera, canvas);
     this.camera = camera;
@@ -61,6 +67,14 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
     this.raycaster = new Raycaster();
     this.raycaster.near = 0;
     this.raycaster.far = this.EYE_HEIGHT + this.FAILING_DISTANCE;
+    this.raycaster.params = {
+      Mesh: {},
+      Line: { threshold: 0 },
+      Line2: { threshold: 0 },
+      LOD: { threshold: 0 },
+      Points: { threshold: 0 },
+      Sprite: { threshold: 0 },
+    };
 
     this.moveKeys = new Set();
     this.moveClock = new Clock();
@@ -165,17 +179,8 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   };
 
   private updateGroundFollowing() {
-    const up = new Vector3().copy(this.camera.up);
-    this.raycaster.set(this.object.position, up.negate());
-
-    this.raycaster.params = this.raycaster.params = {
-      Mesh: {},
-      Line: { threshold: 0 },
-      Line2: { threshold: 0 },
-      LOD: { threshold: 0 },
-      Points: { threshold: 0 },
-      Sprite: { threshold: 0 },
-    };
+    this._up.copy(this.camera.up).negate();
+    this.raycaster.set(this.object.position, this._up);
 
     const intersects = this.raycaster.intersectObjects(this.groundObjects, false);
     if (intersects.length > 0) {
@@ -190,8 +195,8 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
   override update() {
     let moved = false;
     let upgradeGroundFollowing = false;
-    const forward = new Vector3();
-    const sideways = new Vector3();
+    const forward = this._forward;
+    const sideways = this._sideways;
 
     if (this.moveKeys.size > 0) {
       upgradeGroundFollowing = true;
@@ -252,7 +257,11 @@ export class WalkControls extends Controls<WalkControlsEventMap> {
       moved = true;
     }
 
-    if (upgradeGroundFollowing) this.updateGroundFollowing();
+    this.groundFollowingSkippedFrames++;
+    if (upgradeGroundFollowing && this.groundFollowingSkippedFrames >= this.GROUND_FOLLOWING_SKIP_FRAMES) {
+      this.groundFollowingSkippedFrames = 0;
+      this.updateGroundFollowing();
+    }
 
     if (moved) {
       this.dispatchEvent({ type: "change" });

package/src/Viewer/loaders/DynamicGltfLoader/DynamicGltfLoader.js

@@ -60,11 +60,18 @@ export class DynamicGltfLoader {
     this.structureRoots = new Map();
 
     this.memoryLimit = this.getAvailableMemory();
+    this.optimizationMemoryMultiplier = 5;
+    /**
+     * Real memory ~1.7x raw geometry (Three.js objects, Map/Set, buffers overhead). Used for limit
+     * checks and display.
+     */
+    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();
 
@@ -145,7 +152,7 @@ export class DynamicGltfLoader {
       console.warn("Error detecting available memory:", error);
     }
 
-    return memoryLimit / 3;
+    return memoryLimit;
   }
 
   getAbortController() {
@@ -156,9 +163,27 @@ export class DynamicGltfLoader {
     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,
     });
   }
@@ -224,11 +249,14 @@ export class DynamicGltfLoader {
       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");
@@ -325,7 +353,9 @@ export 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 {
@@ -366,7 +396,12 @@ export 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,
@@ -379,9 +414,12 @@ export 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];
@@ -471,6 +509,7 @@ export 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);
@@ -597,6 +636,7 @@ export 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;
@@ -605,6 +645,7 @@ export class DynamicGltfLoader {
       }
     } catch (error) {
       node.loading = false;
+      this.pendingMemoryUsage = Math.max(0, this.pendingMemoryUsage - reservedEstimatedSize);
 
       if (error.name === "AbortError") {
         return;
@@ -872,16 +913,19 @@ export 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");
@@ -894,23 +938,25 @@ export 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);
+        const estimated = Number(estimatedSize) || 0;
+        const effectiveLimit = this.memoryLimit / this.optimizationMemoryMultiplier / this.memoryEstimationFactor;
 
-        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;
+        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) {
@@ -921,7 +967,8 @@ export class DynamicGltfLoader {
 
       this.dispatchEvent("geometryend", {
         totalLoaded: loadedCount,
-        totalNodes,
+        totalNodes: progressTotal.value,
+        memoryLimitReached,
       });
 
       return loadedCount;
@@ -1004,8 +1051,6 @@ export class DynamicGltfLoader {
       const transformedBox = node.geometryExtents.clone();
       const structureRoot = node.structure ? this.structureRoots.get(node.structure.id) : null;
 
-      // Calculate relative transformation from node.group to structureRoot
-      // This matches the logic used in merge methods
       if (node.group) {
         const relativeMatrix = new Matrix4();
         let currentObject = node.group;
@@ -1278,6 +1323,7 @@ export class DynamicGltfLoader {
 
     this.totalLoadedObjects = 0;
     this.currentMemoryUsage = 0;
+    this.pendingMemoryUsage = 0;
     this.loadedGeometrySize = 0;
 
     this.abortController = new AbortController();
@@ -1527,6 +1573,7 @@ export class DynamicGltfLoader {
       message: `Optimization complete! ${this.maxObjectId} objects processed.`,
     });
 
+    this.updateMemoryIndicator();
     this.dispatchEvent("update");
   }
 

package/src/Viewer/loaders/DynamicGltfLoader/DynamicModelImpl.ts

@@ -49,6 +49,7 @@ export class DynamicModelImpl extends ModelImpl {
 
     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;

package/src/Viewer/models/ModelImpl.ts

@@ -259,6 +259,7 @@ export class ModelImpl implements IModelImpl {
 
     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;