@inweb/viewer-three 26.11.0 → 26.12.1

package/src/Viewer/components/InfoComponent.ts

@@ -0,0 +1,187 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { REVISION, Vector2 } from "three";
+import { IComponent } from "@inweb/viewer-core";
+import type { Viewer } from "../Viewer";
+
+export class InfoComponent implements IComponent {
+  protected viewer: Viewer;
+  private startTime: number;
+  private beginTime: number;
+  private prevTime: number;
+  private frames: number;
+
+  constructor(viewer: Viewer) {
+    this.viewer = viewer;
+    this.startTime = 0;
+    this.beginTime = performance.now();
+    this.prevTime = performance.now();
+    this.frames = 0;
+    this.viewer.addEventListener("initialize", this.initialize);
+    this.viewer.addEventListener("clear", this.clear);
+    this.viewer.addEventListener("optionschange", this.optionsChange);
+    this.viewer.addEventListener("geometrystart", this.geometryStart);
+    this.viewer.addEventListener("databasechunk", this.databaseChunk);
+    this.viewer.addEventListener("geometryend", this.geometryEnd);
+    this.viewer.addEventListener("resize", this.resize);
+    this.viewer.addEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  dispose() {
+    this.viewer.removeEventListener("initialize", this.initialize);
+    this.viewer.removeEventListener("clear", this.clear);
+    this.viewer.removeEventListener("optionschange", this.optionsChange);
+    this.viewer.removeEventListener("geometrystart", this.geometryStart);
+    this.viewer.removeEventListener("databasechunk", this.databaseChunk);
+    this.viewer.removeEventListener("geometryend", this.geometryEnd);
+    this.viewer.removeEventListener("resize", this.resize);
+    this.viewer.removeEventListener("render", this.render);
+    this.viewer.addEventListener("animate", this.animate);
+  }
+
+  initialize = () => {
+    try {
+      const gl = this.viewer.renderer.getContext();
+      const dbgInfo = gl.getExtension("WEBGL_debug_renderer_info");
+      if (dbgInfo) {
+        this.viewer.info.system.webglRenderer = gl.getParameter(dbgInfo.UNMASKED_RENDERER_WEBGL);
+        this.viewer.info.system.webglVendor = gl.getParameter(dbgInfo.UNMASKED_VENDOR_WEBGL);
+      }
+    } catch (error) {
+      console.error("Error reading WebGL info.", error);
+    }
+
+    console.log("THREE.WebGLRenderer:", REVISION);
+    console.log("WebGL Renderer:", this.viewer.info.system.webglRenderer);
+    console.log("WebGL Vendor:", this.viewer.info.system.webglVendor);
+
+    this.resize();
+
+    this.optionsChange({ data: this.viewer.options });
+  };
+
+  clear = () => {
+    this.viewer.info.performance.timeToFirstRender = 0;
+    this.viewer.info.performance.loadTime = 0;
+
+    this.viewer.info.scene.objects = 0;
+    this.viewer.info.scene.triangles = 0;
+    this.viewer.info.scene.points = 0;
+    this.viewer.info.scene.lines = 0;
+    this.viewer.info.scene.edges = 0;
+
+    this.viewer.info.optimizedScene.objects = 0;
+    this.viewer.info.optimizedScene.triangles = 0;
+    this.viewer.info.optimizedScene.points = 0;
+    this.viewer.info.optimizedScene.lines = 0;
+    this.viewer.info.optimizedScene.edges = 0;
+
+    this.viewer.info.memory.geometries = 0;
+    this.viewer.info.memory.geometryBytes = 0;
+    this.viewer.info.memory.textures = 0;
+    this.viewer.info.memory.textureBytes = 0;
+    this.viewer.info.memory.materials = 0;
+    this.viewer.info.memory.totalEstimatedGpuBytes = 0;
+    this.viewer.info.memory.usedJSHeapSize = 0;
+  };
+
+  optionsChange = ({ data: options }) => {
+    if (options.antialiasing === false) this.viewer.info.render.antialiasing = "";
+    else if (options.antialiasing === true) this.viewer.info.render.antialiasing = "mxaa";
+    else this.viewer.info.render.antialiasing = options.antialiasing;
+  };
+
+  geometryStart = () => {
+    this.startTime = performance.now();
+  };
+
+  databaseChunk = () => {
+    this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
+
+    console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
+  };
+
+  geometryEnd = () => {
+    const model = this.viewer.models[this.viewer.models.length - 1];
+    const info = model.getInfo();
+
+    this.viewer.info.scene.objects += info.scene.objects;
+    this.viewer.info.scene.triangles += info.scene.triangles;
+    this.viewer.info.scene.points += info.scene.points;
+    this.viewer.info.scene.lines += info.scene.lines;
+    this.viewer.info.scene.edges += info.scene.edges;
+
+    this.viewer.info.optimizedScene.objects += info.optimizedScene.objects;
+    this.viewer.info.optimizedScene.triangles += info.optimizedScene.triangles;
+    this.viewer.info.optimizedScene.points += info.optimizedScene.points;
+    this.viewer.info.optimizedScene.lines += info.optimizedScene.lines;
+    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.textures += info.memory.textures;
+    this.viewer.info.memory.textureBytes += info.memory.textureBytes;
+    this.viewer.info.memory.materials += info.memory.materials;
+    this.viewer.info.memory.totalEstimatedGpuBytes += info.memory.totalEstimatedGpuBytes;
+
+    const memory = performance["memory"];
+    if (memory) this.viewer.info.memory.usedJSHeapSize = memory.usedJSHeapSize;
+
+    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("File load time:", this.viewer.info.performance.loadTime, "ms");
+  };
+
+  resize = () => {
+    const rendererSize = this.viewer.renderer.getSize(new Vector2());
+    this.viewer.info.render.viewport.width = rendererSize.x;
+    this.viewer.info.render.viewport.height = rendererSize.y;
+  };
+
+  render = () => {
+    this.viewer.info.render.drawCalls = this.viewer.renderer.info.render.calls;
+    this.viewer.info.render.triangles = this.viewer.renderer.info.render.triangles;
+    this.viewer.info.render.points = this.viewer.renderer.info.render.points;
+    this.viewer.info.render.lines = this.viewer.renderer.info.render.lines;
+  };
+
+  animate = () => {
+    const time = performance.now();
+
+    this.viewer.info.performance.frameTime = Math.round(time - this.beginTime);
+    this.beginTime = time;
+
+    this.frames++;
+    if (time - this.prevTime >= 1000) {
+      this.viewer.info.performance.fps = Math.round((this.frames * 1000) / (time - this.prevTime));
+      this.prevTime = time;
+      this.frames = 0;
+    }
+  };
+}

package/src/Viewer/components/index.ts

@@ -27,6 +27,7 @@ import { BackgroundComponent } from "./BackgroundComponent";
 import { CameraComponent } from "./CameraComponent";
 import { ExtentsComponent } from "./ExtentsComponent";
 import { LightComponent } from "./LightComponent";
+import { InfoComponent } from "./InfoComponent";
 import { RenderLoopComponent } from "./RenderLoopComponent";
 import { ResizeCanvasComponent } from "./ResizeCanvasComponent";
 import { HighlighterComponent } from "./HighlighterComponent";
@@ -80,6 +81,7 @@ components.registerComponent("ExtentsComponent", (viewer) => new ExtentsComponen
 components.registerComponent("CameraComponent", (viewer) => new CameraComponent(viewer));
 components.registerComponent("BackgroundComponent", (viewer) => new BackgroundComponent(viewer));
 components.registerComponent("LightComponent", (viewer) => new LightComponent(viewer));
+components.registerComponent("InfoComponent", (viewer) => new InfoComponent(viewer));
 components.registerComponent("ResizeCanvasComponent", (viewer) => new ResizeCanvasComponent(viewer));
 components.registerComponent("RenderLoopComponent", (viewer) => new RenderLoopComponent(viewer));
 components.registerComponent("HighlighterComponent", (viewer) => new HighlighterComponent(viewer));

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

@@ -117,7 +117,7 @@ export class DynamicGltfLoader {
     this.mergedObjectMap = new Map(); // objectId -> {mergedObject, startIndex, endIndex, vertexCount}
     this.mergedGeometryVisibility = new Map(); // mergedObject -> visibility array
 
-    this._webglInfoCache = null; // { renderer, vendor }
+    this._webglInfoCache = null;
   }
 
   setVisibleEdges(visible) {
@@ -604,10 +604,17 @@ export class DynamicGltfLoader {
         onLoadFinishCb();
       }
     } catch (error) {
-      if (error.name !== "AbortError") {
-        console.error(`Error loading node ${nodeId}:`, error);
-      }
       node.loading = false;
+
+      if (error.name === "AbortError") {
+        return;
+      }
+
+      if (node.structure && node.structure.loadingAborted) {
+        return;
+      }
+
+      console.error(`Error loading node ${nodeId}:`, error);
     }
   }
 
@@ -1099,7 +1106,6 @@ export class DynamicGltfLoader {
   }
 
   createVisibilityMaterial(material) {
-    // Apply shader directly to the original material
     material.onBeforeCompile = (shader) => {
       shader.vertexShader = shader.vertexShader.replace(
         "#include <common>",
@@ -1134,8 +1140,6 @@ export class DynamicGltfLoader {
         `
       );
     };
-
-    // Force recompilation of material
     material.needsUpdate = true;
 
     return material;
@@ -1170,7 +1174,6 @@ export class DynamicGltfLoader {
     });
     this.nodes.clear();
 
-    // Clear all loaded meshes
     this.loadedMeshes.forEach((mesh) => {
       if (mesh.geometry) mesh.geometry.dispose();
       if (mesh.material) {
@@ -1578,6 +1581,7 @@ export class DynamicGltfLoader {
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
 
           const mergedMesh = new Mesh(mergedGeometry, visibilityMaterial);
+          mergedMesh.userData.isOptimized = true;
           rootGroup.add(mergedMesh);
 
           this.mergedMesh.add(mergedMesh);
@@ -1710,6 +1714,7 @@ export class DynamicGltfLoader {
 
       const mergedLine = new LineSegments(geometry, visibilityMaterial);
       mergedLine.userData.isEdge = isEdge;
+      mergedLine.userData.isOptimized = true;
 
       const mergedObjects = [mergedLine];
       if (this.useVAO) {
@@ -1806,6 +1811,7 @@ export class DynamicGltfLoader {
 
           const mergedLine = new LineSegments(mergedGeometry, visibilityMaterial);
           mergedLine.userData.isEdge = isEdge;
+          mergedLine.userData.isOptimized = true;
 
           if (this.useVAO) {
             this.createVAO(mergedLine);
@@ -1878,6 +1884,7 @@ export class DynamicGltfLoader {
         if (geometries.length > 0) {
           const mergedGeometry = mergeGeometries(geometries, false);
           const mergedPoints = new Points(mergedGeometry, group.material);
+          mergedPoints.userData.isOptimized = true;
 
           if (this.useVAO) {
             this.createVAO(mergedPoints);
@@ -1970,6 +1977,7 @@ export class DynamicGltfLoader {
 
       const mergedLine = new LineSegments(finalGeometry, material);
       mergedLine.userData.structureId = structureId;
+      mergedLine.userData.isOptimized = true;
       rootGroup.add(mergedLine);
       this.mergedLineSegments.add(mergedLine);
 

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

@@ -22,6 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Box3, Object3D } from "three";
+import { IInfo, Info } from "@inweb/viewer-core";
 
 import { ModelImpl } from "../../models/ModelImpl";
 import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
@@ -31,6 +32,30 @@ import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
 export class DynamicModelImpl extends ModelImpl {
   public gltfLoader: DynamicGltfLoader;
 
+  override getInfo(): IInfo {
+    const stats = this.gltfLoader.getStats();
+
+    const info = new Info();
+
+    info.scene.objects = stats.scene.beforeOptimization.objects;
+    info.scene.triangles = stats.scene.beforeOptimization.triangles;
+    info.scene.lines = stats.scene.beforeOptimization.lines;
+    info.scene.edges = stats.scene.beforeOptimization.edges;
+
+    info.optimizedScene.objects = stats.scene.afterOptimization.objects;
+    info.optimizedScene.triangles = stats.scene.afterOptimization.triangles;
+    info.optimizedScene.lines = stats.scene.afterOptimization.lines;
+    info.optimizedScene.edges = stats.scene.afterOptimization.edges;
+
+    info.memory.geometries = stats.memory.geometries.count;
+    info.memory.geometryBytes = stats.memory.geometries.bytes;
+    info.memory.textures = stats.memory.textures.count;
+    info.memory.materials = stats.memory.materials.count;
+    info.memory.totalEstimatedGpuBytes = stats.memory.totalEstimatedGpuBytes;
+
+    return info;
+  }
+
   override getExtents(target: Box3): Box3 {
     return target.union(this.gltfLoader.getTotalGeometryExtent());
   }

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

@@ -60,6 +60,8 @@ export class GltfStructure {
     this.materialCache = new Map();
     this.uri = "";
     this._nextObjectId = 0;
+    this.loadingAborted = false;
+    this.criticalError = null;
   }
 
   async initialize(loader) {
@@ -85,6 +87,8 @@ export class GltfStructure {
 
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
+    this.loadingAborted = false;
+    this.criticalError = null;
   }
 
   getJson() {
@@ -93,6 +97,10 @@ export class GltfStructure {
 
   scheduleRequest(request) {
     return new Promise((resolve, reject) => {
+      if (this.loadingAborted) {
+        reject(this.criticalError || new Error("Structure loading has been aborted due to critical error"));
+        return;
+      }
       this.pendingRequests.push({
         ...request,
         _resolve: resolve,
@@ -101,6 +109,52 @@ export class GltfStructure {
     });
   }
 
+  isCriticalHttpError(error) {
+    if (!error) return false;
+
+    const status = error.status || error.statusCode || error.code;
+
+    if (typeof status === "number") {
+      return status >= 400 && status < 600;
+    }
+
+    if (error.message) {
+      const match = error.message.match(/HTTP\s+(\d{3})/i);
+      if (match) {
+        const code = parseInt(match[1], 10);
+        return code >= 400 && code < 600;
+      }
+    }
+
+    return false;
+  }
+
+  abortLoading(error) {
+    if (this.loadingAborted) {
+      return;
+    }
+
+    this.loadingAborted = true;
+    this.criticalError = error;
+
+    const requests = [...this.pendingRequests];
+    this.pendingRequests = [];
+
+    for (const req of requests) {
+      if (req._reject) {
+        req._reject(error);
+      }
+    }
+
+    console.error(
+      `❌ Critical error for structure "${this.id}". All further loading aborted.`,
+      `\n   Error: ${error.message || error}`,
+      `\n   Rejected ${requests.length} pending chunk requests.`
+    );
+
+    throw error;
+  }
+
   async flushBufferRequests() {
     if (!this.pendingRequests || this.pendingRequests.length === 0) return;
     const requests = [...this.pendingRequests];
@@ -165,6 +219,13 @@ export class GltfStructure {
     }
 
     const promises = finalRanges.map(async (range, index) => {
+      if (this.loadingAborted) {
+        for (const req of range.requests) {
+          req._reject(this.criticalError || new Error("Structure loading aborted"));
+        }
+        return;
+      }
+
       await this.loader.waitForChunkSlot();
 
       try {
@@ -183,7 +244,12 @@ export class GltfStructure {
         for (const req of range.requests) {
           req._reject(error);
         }
-        console.warn(`Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`, error);
+
+        if (this.isCriticalHttpError(error)) {
+          this.abortLoading(error);
+        } else {
+          console.warn(`Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`, error);
+        }
       } finally {
         this.loader.releaseChunkSlot();
       }

package/src/Viewer/loaders/RangesLoader.ts

@@ -21,6 +21,16 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
+class FetchError extends Error {
+  public status: number;
+
+  constructor(status: number, message: string) {
+    super(message);
+    this.name = "FetchError";
+    this.status = status;
+  }
+}
+
 export interface Range {
   offset: number;
   length: number;
@@ -61,7 +71,7 @@ export class RangesLoader {
 
     const response = await fetch(url, init);
     if (!response.ok) {
-      throw new Error(`Failed to fetch "${url}", status ${response.status}`);
+      throw new FetchError(response.status, `Failed to fetch "${url}", status ${response.status}`);
     }
 
     if (response.status !== 206) {

package/src/Viewer/models/IModelImpl.ts

@@ -22,7 +22,7 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Box3, Object3D } from "three";
-import { IModel } from "@inweb/viewer-core";
+import { IInfo, IModel } from "@inweb/viewer-core";
 
 /**
  * Basic model implementation.
@@ -38,6 +38,8 @@ export interface IModelImpl extends IModel {
 
   getPrecision(): number;
 
+  getInfo(): IInfo;
+
   getExtents(target: Box3): Box3;
 
   getObjects(): Object3D[];

package/src/Viewer/models/ModelImpl.ts

@@ -22,6 +22,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 
 import { Box3, Object3D, Vector3 } from "three";
+import { IInfo, Info } from "@inweb/viewer-core";
+
 import { IModelImpl } from "./IModelImpl";
 import { convertUnits } from "../measurement/UnitConverter";
 import { getDisplayUnit } from "../measurement/UnitFormatter";
@@ -91,6 +93,162 @@ export class ModelImpl implements IModelImpl {
     return 2;
   }
 
+  getInfo(): IInfo {
+    // ===================== AI-CODE-START ======================
+    // Source: Claude Sonnet 4.5
+    // Date: 2025-10-02
+    // Reviewer: roman.mochalov@opendesign.com
+    // Issue: CLOUD-5738
+
+    const geometries = new Set();
+    const materials = new Set();
+    const textures = new Set();
+
+    let totalObjects = 0;
+    let totalTriangles = 0;
+    let totalPoints = 0;
+    let totalLines = 0;
+    let totalEdges = 0;
+    let geometryBytes = 0;
+    let textureBytes = 0;
+
+    this.scene.traverse((object: any) => {
+      totalObjects++;
+
+      if (object.geometry) {
+        const geometry = object.geometry;
+
+        if (!geometries.has(geometry)) {
+          geometries.add(geometry);
+
+          if (geometry.attributes) {
+            for (const name in geometry.attributes) {
+              const attribute = geometry.attributes[name];
+              if (attribute && attribute.array) {
+                geometryBytes += attribute.array.byteLength;
+              }
+            }
+          }
+
+          if (geometry.index && geometry.index.array) {
+            geometryBytes += geometry.index.array.byteLength;
+          }
+        }
+
+        if (geometry.index) {
+          const indexCount = geometry.index.count;
+
+          if (object.isLine || object.isLineSegments) {
+            totalLines += indexCount / 2;
+          } else if (object.isPoints) {
+            totalPoints += indexCount;
+          } else {
+            totalTriangles += indexCount / 3;
+          }
+        } else if (geometry.attributes && geometry.attributes.position) {
+          const positionCount = geometry.attributes.position.count;
+
+          if (object.isLine || object.isLineSegments) {
+            totalLines += positionCount / 2;
+          } else if (object.isPoints) {
+            totalPoints += positionCount;
+          } else {
+            totalTriangles += positionCount / 3;
+          }
+        }
+
+        if (object.isLineSegments && geometry.attributes.position) {
+          totalEdges += geometry.attributes.position.count / 2;
+        }
+      }
+
+      if (object.material) {
+        const materialsArray = Array.isArray(object.material) ? object.material : [object.material];
+
+        materialsArray.forEach((material: any) => {
+          materials.add(material);
+
+          if (material.map && !textures.has(material.map)) {
+            textures.add(material.map);
+            textureBytes += estimateTextureSize(material.map);
+          }
+
+          const textureProps = [
+            "alphaMap",
+            "aoMap",
+            "bumpMap",
+            "displacementMap",
+            "emissiveMap",
+            "envMap",
+            "lightMap",
+            "metalnessMap",
+            "normalMap",
+            "roughnessMap",
+            "specularMap",
+            "clearcoatMap",
+            "clearcoatNormalMap",
+            "clearcoatRoughnessMap",
+            "iridescenceMap",
+            "sheenColorMap",
+            "sheenRoughnessMap",
+            "thicknessMap",
+            "transmissionMap",
+            "anisotropyMap",
+            "gradientMap",
+          ];
+
+          textureProps.forEach((prop) => {
+            const texture = material[prop];
+            if (texture && !textures.has(texture)) {
+              textures.add(texture);
+              textureBytes += estimateTextureSize(texture);
+            }
+          });
+        });
+      }
+    });
+
+    function estimateTextureSize(texture: any): number {
+      if (!texture.image) return 0;
+
+      const width = texture.image.width || 0;
+      const height = texture.image.height || 0;
+
+      // Estimate bytes per pixel (RGBA = 4 bytes)
+      const bytesPerPixel = 4;
+
+      // Account for mipmaps (adds ~33% more memory)
+      const mipmapMultiplier = texture.generateMipmaps ? 1.33 : 1;
+
+      return width * height * bytesPerPixel * mipmapMultiplier;
+    }
+
+    // ===================== AI-CODE-END ======================
+
+    const info = new Info();
+
+    info.scene.objects = totalObjects;
+    info.scene.triangles = Math.floor(totalTriangles);
+    info.scene.points = Math.floor(totalPoints);
+    info.scene.lines = Math.floor(totalLines);
+    info.scene.edges = Math.floor(totalEdges);
+
+    info.memory.geometries = geometries.size;
+    info.memory.geometryBytes = geometryBytes;
+    info.memory.textures = textures.size;
+    info.memory.textureBytes = Math.floor(textureBytes);
+    info.memory.materials = materials.size;
+    info.memory.totalEstimatedGpuBytes = geometryBytes + Math.floor(textureBytes);
+
+    info.optimizedScene.objects = info.scene.objects;
+    info.optimizedScene.triangles = info.scene.triangles;
+    info.optimizedScene.points = info.scene.points;
+    info.optimizedScene.lines = info.scene.lines;
+    info.optimizedScene.edges = info.scene.edges;
+
+    return info;
+  }
+
   getExtents(target: Box3): Box3 {
     this.scene.traverseVisible((object) => !object.children.length && target.expandByObject(object));
     return target;