@inweb/viewer-three 26.11.0 → 26.12.0

package/dist/viewer-three.module.js

@@ -21,9 +21,9 @@
 // acknowledge and accept the above terms.
 ///////////////////////////////////////////////////////////////////////////////
 
-import { draggersRegistry, commandsRegistry, Options, componentsRegistry, Loader, loadersRegistry, CANVAS_EVENTS } from '@inweb/viewer-core';
+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, Sphere, Box3, Color, PerspectiveCamera, OrthographicCamera, AmbientLight, DirectionalLight, HemisphereLight, 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, Vector3, BufferGeometry, Float32BufferAttribute, LineBasicMaterial, Mesh, MeshBasicMaterial, DoubleSide, EventDispatcher, MOUSE, TOUCH, Spherical, Quaternion, Vector2, Plane, Object3D, Line3, Raycaster, MathUtils, EdgesGeometry, Matrix4, Vector4, Controls, Clock, Sphere, 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 { 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';
@@ -2633,6 +2633,140 @@ class LightComponent {
     }
 }
 
+class InfoComponent {
+    constructor(viewer) {
+        this.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 });
+        };
+        this.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;
+        };
+        this.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;
+        };
+        this.geometryStart = () => {
+            this.startTime = performance.now();
+        };
+        this.databaseChunk = () => {
+            this.viewer.info.performance.timeToFirstRender += performance.now() - this.startTime;
+            console.log("Time to first render:", this.viewer.info.performance.timeToFirstRender, "ms");
+        };
+        this.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");
+        };
+        this.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;
+        };
+        this.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;
+        };
+        this.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;
+            }
+        };
+        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);
+    }
+}
+
 class RenderLoopComponent {
     constructor(viewer) {
         this.animate = (time = 0) => {
@@ -3119,6 +3253,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));
@@ -3159,6 +3294,132 @@ class ModelImpl {
     getPrecision() {
         return 2;
     }
+    getInfo() {
+        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) => {
+            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) => {
+                    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) {
+            if (!texture.image)
+                return 0;
+            const width = texture.image.width || 0;
+            const height = texture.image.height || 0;
+            const bytesPerPixel = 4;
+            const mipmapMultiplier = texture.generateMipmaps ? 1.33 : 1;
+            return width * height * bytesPerPixel * mipmapMultiplier;
+        }
+        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) {
         this.scene.traverseVisible((object) => !object.children.length && target.expandByObject(object));
         return target;
@@ -3291,6 +3552,24 @@ class ModelImpl {
 }
 
 class DynamicModelImpl extends ModelImpl {
+    getInfo() {
+        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;
+    }
     getExtents(target) {
         return target.union(this.gltfLoader.getTotalGeometryExtent());
     }
@@ -3407,6 +3686,8 @@ class GltfStructure {
     this.materialCache = new Map();
     this.uri = "";
     this._nextObjectId = 0;
+    this.loadingAborted = false;
+    this.criticalError = null;
   }
   async initialize(loader) {
     this.json = await this.loadController.loadJson();
@@ -3428,12 +3709,18 @@ class GltfStructure {
     this.materials.clear();
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
+    this.loadingAborted = false;
+    this.criticalError = null;
   }
   getJson() {
     return this.json;
   }
   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,
@@ -3441,6 +3728,41 @@ 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];
@@ -3503,6 +3825,12 @@ 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 {
         const length = range.end - range.start;
@@ -3519,7 +3847,11 @@ 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();
       }
@@ -4310,10 +4642,14 @@ 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);
     }
   }
   unloadNode(nodeId) {
@@ -5119,6 +5455,7 @@ 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);
           this.optimizedOriginalMap.set(mergedMesh, optimizedObjects);
@@ -5225,6 +5562,7 @@ class DynamicGltfLoader {
       const visibilityMaterial = this.createVisibilityMaterial(group.material);
       const mergedLine = new LineSegments(geometry, visibilityMaterial);
       mergedLine.userData.isEdge = isEdge;
+      mergedLine.userData.isOptimized = true;
       const mergedObjects = [mergedLine];
       if (this.useVAO) {
         this.createVAO(mergedLine);
@@ -5303,6 +5641,7 @@ class DynamicGltfLoader {
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
           const mergedLine = new LineSegments(mergedGeometry, visibilityMaterial);
           mergedLine.userData.isEdge = isEdge;
+          mergedLine.userData.isOptimized = true;
           if (this.useVAO) {
             this.createVAO(mergedLine);
           }
@@ -5362,6 +5701,7 @@ 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);
           }
@@ -5437,6 +5777,7 @@ class DynamicGltfLoader {
       }
       const mergedLine = new LineSegments(finalGeometry, material);
       mergedLine.userData.structureId = structureId;
+      mergedLine.userData.isOptimized = true;
       rootGroup.add(mergedLine);
       this.mergedLineSegments.add(mergedLine);
       lineSegmentsArray.forEach((obj) => {
@@ -5706,6 +6047,13 @@ class GLTFBinaryExtension {
     }
 }
 
+class FetchError extends Error {
+    constructor(status, message) {
+        super(message);
+        this.name = "FetchError";
+        this.status = status;
+    }
+}
 class RangesLoader {
     constructor() {
         this.requestHeader = {};
@@ -5732,7 +6080,7 @@ 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) {
             const arrayBuffer = await response.arrayBuffer();
@@ -6118,6 +6466,7 @@ class Viewer extends EventEmitter2 {
         this.options = new Options(this);
         this.loaders = [];
         this.models = [];
+        this.info = new Info();
         this.canvasEvents = CANVAS_EVENTS.slice();
         this.canvaseventlistener = (event) => this.emit(event);
         this.selected = [];
@@ -6278,6 +6627,8 @@ class Viewer extends EventEmitter2 {
         const deltaTime = (time - this._renderTime) / 1000;
         this._renderTime = time;
         this._renderNeeded = false;
+        this.renderer.info.autoReset = false;
+        this.renderer.info.reset();
         if (this.options.antialiasing === true || this.options.antialiasing === "msaa") {
             this.renderer.render(this.scene, this.camera);
             this.renderer.render(this.helpers, this.camera);