@inweb/viewer-three 26.10.6 → 26.11.0

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

@@ -10,6 +10,7 @@ import {
   LineLoop,
   Group,
   Vector3,
+  Vector2,
   Quaternion,
   Matrix4,
   Box3,
@@ -26,6 +27,8 @@ import {
 import { GL_CONSTANTS } from "./GltfStructure.js";
 import { mergeGeometries } from "three/examples/jsm/utils/BufferGeometryUtils.js";
 
+const STRUCTURE_ID_SEPARATOR = ":";
+
 //#AI-GENERATED using Gemini 2.5 Pro, Claude-4-sonnet
 //#Reviewed and adapted by dborysov@opendesign.com
 
@@ -42,6 +45,7 @@ export class DynamicGltfLoader {
       geometryerror: [],
       update: [],
       geometrymemory: [],
+      optimizationprogress: [],
     };
 
     this.loadDistance = 100;
@@ -98,7 +102,6 @@ export class DynamicGltfLoader {
     this.newOptimizedObjects = new Set();
     this.oldOptimizeObjects = new Set();
 
-    this.maxConcurrentChunks = 8;
     this.activeChunkLoads = 0;
     this.chunkQueue = [];
 
@@ -113,6 +116,8 @@ export class DynamicGltfLoader {
     // Merged geometry tracking
     this.mergedObjectMap = new Map(); // objectId -> {mergedObject, startIndex, endIndex, vertexCount}
     this.mergedGeometryVisibility = new Map(); // mergedObject -> visibility array
+
+    this._webglInfoCache = null; // { renderer, vendor }
   }
 
   setVisibleEdges(visible) {
@@ -244,6 +249,136 @@ export class DynamicGltfLoader {
     console.log(`Final memory usage: ${Math.round(currentMemoryUsage / (1024 * 1024))}MB`);
   }
 
+  getStats() {
+    let totalObjects = 0;
+    let renderedObjects = 0;
+    let totalTriangles = 0;
+    let renderedTriangles = 0;
+    let totalLines = 0;
+    let renderedLines = 0;
+    let totalEdges = 0;
+    let renderedEdges = 0;
+
+    this.scene.traverse((object) => {
+      totalObjects++;
+
+      const geometry = object.geometry;
+      if (!geometry) return;
+
+      let triCount = 0;
+      if (geometry.index) {
+        triCount = Math.floor(geometry.index.count / 3);
+      } else if (geometry.attributes && geometry.attributes.position) {
+        triCount = Math.floor(geometry.attributes.position.count / 3);
+      }
+      totalTriangles += triCount;
+
+      let lineCount = 0;
+      if (geometry.index) {
+        lineCount = Math.floor(geometry.index.count / 2);
+      } else if (geometry.attributes && geometry.attributes.position) {
+        lineCount = Math.floor(geometry.attributes.position.count / 2);
+      }
+
+      if (object.type === "Line" || object.type === "LineSegments" || object.type === "LineLoop") {
+        if (object.userData.isEdge) {
+          totalEdges += lineCount;
+        } else {
+          totalLines += lineCount;
+        }
+      }
+
+      if (object.visible !== false) {
+        if (object.isMesh || object.isLine || object.isPoints) {
+          renderedObjects++;
+          if (object.isMesh) {
+            renderedTriangles += triCount;
+          } else if (object.type === "Line" || object.type === "LineSegments" || object.type === "LineLoop") {
+            if (object.userData.isEdge) {
+              renderedEdges += lineCount;
+            } else {
+              renderedLines += lineCount;
+            }
+          }
+        }
+      }
+    });
+
+    const geometryCount = this.geometryCache ? this.geometryCache.size : 0;
+    const geometryMemoryBytes = Array.from(this.geometryCache?.values?.() || []).reduce((a, b) => a + b, 0);
+
+    const uniqueMaterialIds = new Set();
+    const uniqueTextureIds = new Set();
+    if (Array.isArray(this.structures)) {
+      for (const structure of this.structures) {
+        console.log(structure.materialCache.values());
+        try {
+          for (const entry of structure.materialCache.values()) {
+            if (entry?.mesh?.uuid) uniqueMaterialIds.add(entry.mesh.uuid);
+            if (entry?.points?.uuid) uniqueMaterialIds.add(entry.points.uuid);
+            if (entry?.lines?.uuid) uniqueMaterialIds.add(entry.lines.uuid);
+          }
+        } catch (exp) {
+          console.error("Error adding material to uniqueMaterialIds", exp);
+        }
+      }
+    }
+    const materialCount = uniqueMaterialIds.size;
+    const textureCount = uniqueTextureIds.size;
+    const estimatedGpuMemoryBytes = geometryMemoryBytes;
+
+    if (!this._webglInfoCache) {
+      try {
+        const gl = this.renderer.getContext();
+        const dbgInfo = gl.getExtension("WEBGL_debug_renderer_info");
+        if (dbgInfo) {
+          const rendererStr = gl.getParameter(dbgInfo.UNMASKED_RENDERER_WEBGL);
+          const vendorStr = gl.getParameter(dbgInfo.UNMASKED_VENDOR_WEBGL);
+          this._webglInfoCache = { renderer: rendererStr, vendor: vendorStr };
+        } else {
+          this._webglInfoCache = { renderer: null, vendor: null };
+        }
+      } catch (e) {
+        console.error("Error getting webgl info", e);
+        this._webglInfoCache = { renderer: null, vendor: null };
+      }
+    }
+
+    const size = new Vector2();
+    if (this.renderer && this.renderer.getSize) {
+      this.renderer.getSize(size);
+    }
+
+    return {
+      scene: {
+        beforeOptimization: {
+          objects: totalObjects - renderedObjects,
+          triangles: totalTriangles - renderedTriangles,
+          lines: totalLines - renderedLines,
+          edges: totalEdges - renderedEdges,
+        },
+
+        afterOptimization: {
+          objects: renderedObjects,
+          triangles: renderedTriangles,
+          lines: renderedLines,
+          edges: renderedEdges,
+        },
+      },
+      memory: {
+        geometries: { count: geometryCount, bytes: geometryMemoryBytes },
+        textures: { count: textureCount },
+        materials: { count: materialCount },
+        totalEstimatedGpuBytes: estimatedGpuMemoryBytes,
+      },
+      system: {
+        webglRenderer: this._webglInfoCache?.renderer || "",
+        webglVendor: this._webglInfoCache?.vendor || "",
+        viewport: { width: size.x || 0, height: size.y || 0 },
+      },
+    };
+  }
+
   async loadNode(nodeId, onLoadFinishCb) {
     const node = this.nodes.get(nodeId);
     if (!node || node.loaded || node.loading) return;
@@ -419,6 +554,7 @@ export class DynamicGltfLoader {
         } else if (primitive.mode === GL_CONSTANTS.LINE_LOOP) {
           mesh = new LineLoop(geometry, material);
         }
+
         if (node.extras) {
           mesh.userData = { ...mesh.userData, ...node.extras };
         }
@@ -428,17 +564,21 @@ export class DynamicGltfLoader {
         if (primitive.extras) {
           mesh.userData = { ...mesh.userData, ...primitive.extras };
         }
+
         if (node.handle) {
           mesh.userData.handle = node.handle;
         } else {
-          mesh.userData.handle = `${node.structure.id}_${mesh.userData.handle}`;
+          mesh.userData.handle = this.getFullHandle(node.structure.id, mesh.userData.handle);
         }
+
         if (mesh.material.name === "edges") {
           mesh.userData.isEdge = true;
         } else {
           mesh.userData.isEdge = false;
         }
+
         this.registerObjectWithHandle(mesh, mesh.userData.handle);
+
         mesh.position.copy(node.position);
         if (!geometry.attributes.normal) {
           geometry.computeVertexNormals();
@@ -601,13 +741,17 @@ export class DynamicGltfLoader {
     });
   }
 
+  getFullHandle(structureId, originalHandle) {
+    return `${structureId}${STRUCTURE_ID_SEPARATOR}${originalHandle}`;
+  }
+
   async processNodeHierarchy(structure, nodeId, parentGroup) {
     const nodeDef = structure.json.nodes[nodeId];
     let nodeGroup = null;
 
     let handle = null;
     if (nodeDef.extras?.handle) {
-      handle = `${structure.id}_${nodeDef.extras.handle}`;
+      handle = this.getFullHandle(structure.id, nodeDef.extras.handle);
     }
 
     if (nodeDef.camera !== undefined) {
@@ -628,7 +772,7 @@ export class DynamicGltfLoader {
       if (nodeDef.extras) {
         nodeGroup.userData = { ...nodeDef.extras };
         if (nodeGroup.userData.handle) {
-          nodeGroup.userData.handle = `${structure.id}_${nodeGroup.userData.handle}`;
+          nodeGroup.userData.handle = this.getFullHandle(structure.id, nodeGroup.userData.handle);
         }
       }
 
@@ -680,7 +824,7 @@ export class DynamicGltfLoader {
       }
 
       if (meshDef.extras && meshDef.extras.handle) {
-        handle = `${structure.id}_${meshDef.extras.handle}`;
+        handle = this.getFullHandle(structure.id, meshDef.extras.handle);
       }
 
       this.nodes.set(uniqueNodeId, {
@@ -694,7 +838,7 @@ export class DynamicGltfLoader {
         structure,
         extras: nodeDef.extras,
         geometryExtents,
-        handle,
+        handle: handle || this.getFullHandle(structure.id, structure._nextObjectId++),
       });
     }
 
@@ -785,13 +929,13 @@ export class DynamicGltfLoader {
   }
 
   async loadNodes() {
-    console.time("process nodes");
+    console.time("Process nodes");
     await this.processNodes();
-    console.timeEnd("process nodes");
+    console.timeEnd("Process nodes");
 
-    console.time("optimize scene");
+    console.time("Optimize scene");
     await this.optimizeScene();
-    console.timeEnd("optimize scene");
+    console.timeEnd("Optimize scene");
   }
 
   cleanupPartialLoad() {
@@ -955,7 +1099,7 @@ export class DynamicGltfLoader {
   }
 
   createVisibilityMaterial(material) {
-    // Применяем шейдер напрямую к оригинальному материалу
+    // Apply shader directly to the original material
     material.onBeforeCompile = (shader) => {
       shader.vertexShader = shader.vertexShader.replace(
         "#include <common>",
@@ -991,7 +1135,7 @@ export class DynamicGltfLoader {
       );
     };
 
-    // Принудительная перекомпиляция материала
+    // Force recompilation of material
     material.needsUpdate = true;
 
     return material;
@@ -1162,7 +1306,7 @@ export class DynamicGltfLoader {
     }
     this.handleToObjects.get(fullHandle).add(object);
 
-    object.userData.structureId = object.userData.handle.split("_")[0];
+    object.userData.structureId = object.userData.handle.split(STRUCTURE_ID_SEPARATOR)[0];
   }
 
   getObjectsByHandle(handle) {
@@ -1237,11 +1381,32 @@ export class DynamicGltfLoader {
     this.originalObjects.add(object);
   }
 
-  optimizeScene() {
+  yieldToUI() {
+    return new Promise((resolve) => {
+      requestAnimationFrame(() => {
+        setTimeout(resolve, 0);
+      });
+    });
+  }
+
+  async optimizeScene() {
+    console.log("Starting scene optimization...");
+    this.dispatchEvent("optimizationprogress", {
+      phase: "start",
+      progress: 0,
+      message: "Starting optimization...",
+    });
+
     this.originalObjects.clear();
     this.originalObjectsToSelection.clear();
     const structureGroups = new Map();
 
+    this.dispatchEvent("optimizationprogress", {
+      phase: "collecting",
+      progress: 5,
+      message: "Collecting scene objects...",
+    });
+
     this.scene.traverse((object) => {
       if (object.userData.structureId) {
         const structureId = object.userData.structureId;
@@ -1274,32 +1439,78 @@ export class DynamicGltfLoader {
       }
     });
 
+    let processedGroups = 0;
+    const totalGroups = structureGroups.size;
+
+    this.dispatchEvent("optimizationprogress", {
+      phase: "merging",
+      progress: 10,
+      message: `Merging ${totalGroups} structure groups...`,
+      current: 0,
+      total: totalGroups,
+    });
+
     for (const group of structureGroups.values()) {
       group.mapMeshes.clear();
       group.mapLines.clear();
       group.mapLineSegments.clear();
       group.mapPoints.clear();
 
-      this.mergeMeshGroups(group.meshes, group.rootGroup);
-      this.mergeLineGroups(group.lines, group.rootGroup);
-      this.mergeLineSegmentGroups(group.lineSegments, group.rootGroup);
-      this.mergePointsGroups(group.points, group.rootGroup);
+      await this.mergeMeshGroups(group.meshes, group.rootGroup);
+      await this.yieldToUI();
+
+      await this.mergeLineGroups(group.lines, group.rootGroup);
+      await this.yieldToUI();
+
+      await this.mergeLineSegmentGroups(group.lineSegments, group.rootGroup);
+      await this.yieldToUI();
+
+      await this.mergePointsGroups(group.points, group.rootGroup);
+
+      processedGroups++;
+      const progress = 10 + Math.round((processedGroups / totalGroups) * 80);
+
+      this.dispatchEvent("optimizationprogress", {
+        phase: "merging",
+        progress,
+        message: `Processing structure ${processedGroups}/${totalGroups}...`,
+        current: processedGroups,
+        total: totalGroups,
+      });
+
+      console.log(`Optimization progress: ${processedGroups}/${totalGroups} structure groups processed (${progress}%)`);
+
+      await this.yieldToUI();
     }
 
+    this.dispatchEvent("optimizationprogress", {
+      phase: "finalizing",
+      progress: 95,
+      message: "Finalizing optimization...",
+    });
+
     this.originalObjects.forEach((obj) => {
       obj.visible = false;
       if (!(obj instanceof Points) && !obj.userData.isEdge) {
         this.originalObjectsToSelection.add(obj);
       }
     });
+
     this.initializeObjectVisibility();
 
     console.log(`Optimization complete. Total objects: ${this.maxObjectId}`);
 
+    this.dispatchEvent("optimizationprogress", {
+      phase: "complete",
+      progress: 100,
+      message: `Optimization complete! ${this.maxObjectId} objects processed.`,
+    });
+
     this.dispatchEvent("update");
   }
 
-  mergeMeshGroups(materialGroups, rootGroup) {
+  async mergeMeshGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping mesh group with null material");
@@ -1315,8 +1526,6 @@ export class DynamicGltfLoader {
 
         for (const mesh of group.objects) {
           const geometry = mesh.geometry.clone();
-          mesh.updateWorldMatrix(true, false);
-          geometry.applyMatrix4(mesh.matrixWorld);
 
           const handle = mesh.userData.handle;
           if (!this.objectIdToIndex.has(handle)) {
@@ -1399,6 +1608,11 @@ export class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.error("Failed to merge meshes for material:", error);
         group.objects.forEach((mesh) => {
@@ -1408,7 +1622,8 @@ export class DynamicGltfLoader {
     }
   }
 
-  mergeLineGroups(materialGroups, rootGroup) {
+  async mergeLineGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (group.objects.length === 0) continue;
 
@@ -1433,7 +1648,9 @@ export class DynamicGltfLoader {
       const indices = [];
       let vertexOffset = 0;
 
+      let isEdge = false;
       group.objects.forEach((line) => {
+        isEdge = line.userData.isEdge;
         const geometry = line.geometry;
         const positionAttr = geometry.attributes.position;
         const vertexCount = positionAttr.count;
@@ -1442,21 +1659,16 @@ export class DynamicGltfLoader {
         if (!this.objectIdToIndex.has(handle)) {
           this.objectIdToIndex.set(handle, this.maxObjectId++);
         }
-        // const objectId = this.objectIdToIndex.get(handle);
 
         objectMapping.set(line, {
           startVertexIndex: currentVertexOffset,
           vertexCount,
         });
         currentVertexOffset += vertexCount;
-
-        line.updateWorldMatrix(true, false);
-        const matrix = line.matrixWorld;
         const vector = new Vector3();
 
         for (let i = 0; i < vertexCount; i++) {
           vector.fromBufferAttribute(positionAttr, i);
-          vector.applyMatrix4(matrix);
           positions[posOffset++] = vector.x;
           positions[posOffset++] = vector.y;
           positions[posOffset++] = vector.z;
@@ -1497,6 +1709,8 @@ export class DynamicGltfLoader {
       const visibilityMaterial = this.createVisibilityMaterial(group.material);
 
       const mergedLine = new LineSegments(geometry, visibilityMaterial);
+      mergedLine.userData.isEdge = isEdge;
+
       const mergedObjects = [mergedLine];
       if (this.useVAO) {
         this.createVAO(mergedLine);
@@ -1522,10 +1736,16 @@ export class DynamicGltfLoader {
           this.handleToOptimizedObjects.set(handle, mergedObjects);
         }
       });
+
+      processedGroups++;
+      if (processedGroups % 5 === 0) {
+        await this.yieldToUI();
+      }
     }
   }
 
-  mergeLineSegmentGroups(materialGroups, rootGroup) {
+  async mergeLineSegmentGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping line segment group with null material");
@@ -1538,11 +1758,11 @@ export class DynamicGltfLoader {
         const handles = new Set();
         const objectMapping = new Map();
         let currentVertexOffset = 0;
+        let isEdge = false;
 
         for (const line of group.objects) {
+          isEdge = line.userData.isEdge;
           const geometry = line.geometry.clone();
-          line.updateWorldMatrix(true, false);
-          geometry.applyMatrix4(line.matrixWorld);
 
           const handle = line.userData.handle;
           if (!this.objectIdToIndex.has(handle)) {
@@ -1585,6 +1805,7 @@ export class DynamicGltfLoader {
           const visibilityMaterial = this.createVisibilityMaterial(group.material);
 
           const mergedLine = new LineSegments(mergedGeometry, visibilityMaterial);
+          mergedLine.userData.isEdge = isEdge;
 
           if (this.useVAO) {
             this.createVAO(mergedLine);
@@ -1618,6 +1839,11 @@ export class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.warn("Failed to merge line segments for material:", error);
         group.objects.forEach((line) => {
@@ -1627,7 +1853,8 @@ export class DynamicGltfLoader {
     }
   }
 
-  mergePointsGroups(materialGroups, rootGroup) {
+  async mergePointsGroups(materialGroups, rootGroup) {
+    let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
         console.warn("Skipping points group with null material");
@@ -1641,8 +1868,6 @@ export class DynamicGltfLoader {
 
         for (const points of group.objects) {
           const geometry = points.geometry.clone();
-          points.updateWorldMatrix(true, false);
-          geometry.applyMatrix4(points.matrixWorld);
           geometries.push(geometry);
           optimizedObjects.push(points);
           handles.add(points.userData.handle);
@@ -1678,6 +1903,11 @@ export class DynamicGltfLoader {
             this.handleToOptimizedObjects.set(handle, mergedObjects);
           }
         });
+
+        processedGroups++;
+        if (processedGroups % 5 === 0) {
+          await this.yieldToUI();
+        }
       } catch (error) {
         console.warn("Failed to merge points for material:", error);
         group.objects.forEach((points) => {
@@ -1700,7 +1930,6 @@ export class DynamicGltfLoader {
 
       lineSegmentsArray.forEach((segment) => {
         const clonedGeometry = segment.geometry.clone();
-        segment.updateWorldMatrix(true, false);
         clonedGeometry.applyMatrix4(segment.matrixWorld);
 
         if (hasNormals && !clonedGeometry.attributes.normal) {

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

@@ -30,7 +30,6 @@ import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
 
 export class DynamicModelImpl extends ModelImpl {
   public gltfLoader: DynamicGltfLoader;
-  public modelId: number;
 
   override getExtents(target: Box3): Box3 {
     return target.union(this.gltfLoader.getTotalGeometryExtent());
@@ -53,35 +52,46 @@ export class DynamicModelImpl extends ModelImpl {
   }
 
   override getObjectsByHandles(handles: string | string[]): Object3D[] {
-    const handlesSet = new Set(handles);
+    const ownHandles = this.getOwnHandles(handles);
+    if (ownHandles.length === 0) return [];
+
+    const handlesSet = new Set(ownHandles);
+
     const objects = [];
     handlesSet.forEach((handle) => {
-      const handle2 = `${this.modelId}_${handle}`; // <- props fix: Dynamic Loader uses handle with structure ID prefix
-      const handles = this.gltfLoader.handleToObjects.get(handle2) || [];
-      objects.push(...Array.from(handles));
+      objects.push(...this.gltfLoader.getObjectsByHandle(handle));
     });
+
     return objects;
   }
 
   override getHandlesByObjects(objects: Object3D | Object3D[]): string[] {
-    const handles = super.getHandlesByObjects(objects);
-    return handles.map((x) => x.split("_").pop()); // <- props fix: remove structure ID prefix by the Dynamic Loader
+    const ownObjects = this.getOwnObjects(objects);
+    if (ownObjects.length === 0) return [];
+
+    const handleSet = new Set<string>();
+    ownObjects.forEach((object) => {
+      const handle = object.userData.handle;
+      if (handle) handleSet.add(handle);
+    });
+
+    return Array.from(handleSet);
   }
 
   override hideObjects(objects: Object3D | Object3D[]): this {
-    const handles = super.getHandlesByObjects(objects);
+    const handles = this.getHandlesByObjects(objects);
     this.gltfLoader.hideObjects(handles);
     return this;
   }
 
   override isolateObjects(objects: Object3D | Object3D[]): this {
-    const handles = super.getHandlesByObjects(objects);
+    const handles = this.getHandlesByObjects(objects);
     this.gltfLoader.isolateObjects(new Set(handles));
     return this;
   }
 
   override showObjects(objects: Object3D | Object3D[]): this {
-    const handles = super.getHandlesByObjects(objects);
+    const handles = this.getHandlesByObjects(objects);
     this.gltfLoader.showObjects(handles);
     return this;
   }

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

@@ -58,12 +58,15 @@ export class GltfStructure {
     this.materials = new Map();
     this.textureCache = new Map();
     this.materialCache = new Map();
+    this.uri = "";
+    this._nextObjectId = 0;
   }
 
   async initialize(loader) {
     this.json = await this.loadController.loadJson();
     this.baseUrl = await this.loadController.baseUrl();
     this.loader = loader;
+    this.uri = this.json.buffers[0].uri || "";
   }
 
   clear() {
@@ -166,7 +169,7 @@ export class GltfStructure {
 
       try {
         const length = range.end - range.start;
-        const buffer = await this.loadController.loadBinaryData([{ offset: range.start, length }]);
+        const buffer = await this.loadController.loadBinaryData([{ offset: range.start, length }], this.uri);
 
         for (const req of range.requests) {
           const relOffset = req.offset - range.start;