@inweb/viewer-three 26.11.0 → 26.12.0

package/dist/viewer-three.js

@@ -536,6 +536,51 @@
         "wheel",
     ];
     const CANVAS_EVENTS = CanvasEvents;
+    class Info {
+        constructor() {
+            this.performance = {
+                fps: 0,
+                frameTime: 0,
+                timeToFirstRender: 0,
+                loadTime: 0,
+            };
+            this.render = {
+                viewport: { width: 0, height: 0 },
+                antialiasing: "",
+                drawCalls: 0,
+                triangles: 0,
+                points: 0,
+                lines: 0,
+            };
+            this.scene = {
+                objects: 0,
+                triangles: 0,
+                points: 0,
+                lines: 0,
+                edges: 0,
+            };
+            this.optimizedScene = {
+                objects: 0,
+                triangles: 0,
+                points: 0,
+                lines: 0,
+                edges: 0,
+            };
+            this.memory = {
+                geometries: 0,
+                geometryBytes: 0,
+                textures: 0,
+                textureBytes: 0,
+                materials: 0,
+                totalEstimatedGpuBytes: 0,
+                usedJSHeapSize: 0,
+            };
+            this.system = {
+                webglRenderer: "",
+                webglVendor: "",
+            };
+        }
+    }
 
     /**
      * @license
@@ -35612,6 +35657,140 @@ void main() {
         }
     }
 
+    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) => {
@@ -36737,6 +36916,7 @@ void main() {
     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));
@@ -36777,6 +36957,132 @@ void main() {
         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;
@@ -36909,6 +37215,24 @@ void main() {
     }
 
     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());
         }
@@ -37025,6 +37349,8 @@ void main() {
         this.materialCache = new Map();
         this.uri = "";
         this._nextObjectId = 0;
+        this.loadingAborted = false;
+        this.criticalError = null;
       }
       async initialize(loader) {
         this.json = await this.loadController.loadJson();
@@ -37046,12 +37372,18 @@ void main() {
         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,
@@ -37059,6 +37391,41 @@ void main() {
           });
         });
       }
+      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];
@@ -37121,6 +37488,12 @@ void main() {
           }
         }
         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;
@@ -37137,7 +37510,11 @@ void main() {
             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();
           }
@@ -38077,10 +38454,14 @@ void main() {
             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) {
@@ -38886,6 +39267,7 @@ void main() {
               }
               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);
@@ -38992,6 +39374,7 @@ void main() {
           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);
@@ -39070,6 +39453,7 @@ void main() {
               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);
               }
@@ -39129,6 +39513,7 @@ void main() {
             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);
               }
@@ -39204,6 +39589,7 @@ void main() {
           }
           const mergedLine = new LineSegments(finalGeometry, material);
           mergedLine.userData.structureId = structureId;
+          mergedLine.userData.isOptimized = true;
           rootGroup.add(mergedLine);
           this.mergedLineSegments.add(mergedLine);
           lineSegmentsArray.forEach((obj) => {
@@ -39473,6 +39859,13 @@ void main() {
         }
     }
 
+    class FetchError extends Error {
+        constructor(status, message) {
+            super(message);
+            this.name = "FetchError";
+            this.status = status;
+        }
+    }
     class RangesLoader {
         constructor() {
             this.requestHeader = {};
@@ -39499,7 +39892,7 @@ void main() {
             };
             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();
@@ -54639,6 +55032,7 @@ js: import "konva/skia-backend";
             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 = [];
@@ -54799,6 +55193,8 @@ js: import "konva/skia-backend";
             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);
@@ -55165,6 +55561,7 @@ js: import "konva/skia-backend";
     exports.Component = Component;
     exports.Dragger = Dragger;
     exports.GLTFLoadingManager = GLTFLoadingManager;
+    exports.Info = Info;
     exports.Loader = Loader$1;
     exports.Markup = KonvaMarkup;
     exports.ModelImpl = ModelImpl;