@inweb/viewer-three 26.7.2 → 26.8.0

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

@@ -86,7 +86,9 @@ export class DynamicGltfLoader {
     this.mergedPoints = new Set();
 
     this.isolatedObjects = [];
-    this.useVAO = !!window.WebGL2RenderingContext && this.renderer.getContext() instanceof WebGL2RenderingContext;
+    //!!window.WebGL2RenderingContext && this.renderer.getContext() instanceof WebGL2RenderingContext
+    this.useVAO = false;
+    this.visibleEdges = true;
 
     this.handleToOptimizedObjects = new Map();
 
@@ -95,6 +97,10 @@ export class DynamicGltfLoader {
     this.oldOptimizeObjects = new Set();
   }
 
+  setVisibleEdges(visible) {
+    this.visibleEdges = visible;
+  }
+
   getAvailableMemory() {
     let memoryLimit = 6 * 1024 * 1024 * 1024;
     try {
@@ -115,7 +121,7 @@ export class DynamicGltfLoader {
       console.warn("Error detecting available memory:", error);
     }
 
-    return memoryLimit;
+    return memoryLimit / 3;
   }
 
   getAbortController() {
@@ -220,7 +226,7 @@ export class DynamicGltfLoader {
     console.log(`Final memory usage: ${Math.round(currentMemoryUsage / (1024 * 1024))}MB`);
   }
 
-  async loadNode(nodeId) {
+  async loadNode(nodeId, onLoadFinishCb) {
     const node = this.nodes.get(nodeId);
     if (!node || node.loaded || node.loading) return;
 
@@ -228,38 +234,138 @@ export class DynamicGltfLoader {
     const meshDef = node.structure.getJson().meshes[node.meshIndex];
 
     try {
-      for (const primitive of meshDef.primitives) {
-        const positionAccessor = primitive.attributes.POSITION;
-        const geometry = new BufferGeometry();
-        const attributes = new Map();
-
-        attributes.set("position", node.structure.createBufferAttribute(positionAccessor));
+      const bufferRequests = [];
+      const primitiveReqMap = new Map();
+      for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
+        const primitive = meshDef.primitives[primIdx];
+        const reqs = [];
+
+        if (primitive.attributes.POSITION !== undefined) {
+          const accessorIndex = primitive.attributes.POSITION;
+          const accessor = node.structure.json.accessors[accessorIndex];
+          const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+          const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+          const components = node.structure.getNumComponents(accessor.type);
+          const count = accessor.count;
+          const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+          reqs.push({
+            offset: byteOffset,
+            length: byteLength,
+            componentType: accessor.componentType,
+            accessorIndex,
+            type: "position",
+            primIdx,
+          });
+        }
 
         if (primitive.attributes.NORMAL !== undefined) {
-          attributes.set("normal", node.structure.createBufferAttribute(primitive.attributes.NORMAL));
+          const accessorIndex = primitive.attributes.NORMAL;
+          const accessor = node.structure.json.accessors[accessorIndex];
+          const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+          const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+          const components = node.structure.getNumComponents(accessor.type);
+          const count = accessor.count;
+          const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+          reqs.push({
+            offset: byteOffset,
+            length: byteLength,
+            componentType: accessor.componentType,
+            accessorIndex,
+            type: "normal",
+            primIdx,
+          });
         }
 
         if (primitive.attributes.TEXCOORD_0 !== undefined) {
-          attributes.set("uv", node.structure.createBufferAttribute(primitive.attributes.TEXCOORD_0));
+          const accessorIndex = primitive.attributes.TEXCOORD_0;
+          const accessor = node.structure.json.accessors[accessorIndex];
+          const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+          const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+          const components = node.structure.getNumComponents(accessor.type);
+          const count = accessor.count;
+          const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+          reqs.push({
+            offset: byteOffset,
+            length: byteLength,
+            componentType: accessor.componentType,
+            accessorIndex,
+            type: "uv",
+            primIdx,
+          });
         }
 
-        const loadedAttributes = await Promise.all(
-          [...attributes.entries()].map(async ([name, promise]) => {
-            const attribute = await promise;
-            return [name, attribute];
-          })
-        );
+        if (primitive.indices !== undefined) {
+          const accessorIndex = primitive.indices;
+          const accessor = node.structure.json.accessors[accessorIndex];
+          const bufferView = node.structure.json.bufferViews[accessor.bufferView];
+          const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+          const components = node.structure.getNumComponents(accessor.type);
+          const count = accessor.count;
+          const byteLength = count * components * node.structure.getComponentSize(accessor.componentType);
+          reqs.push({
+            offset: byteOffset,
+            length: byteLength,
+            componentType: accessor.componentType,
+            accessorIndex,
+            type: "index",
+            primIdx,
+          });
+        }
+        primitiveReqMap.set(primIdx, reqs);
+        bufferRequests.push(...reqs);
+      }
 
-        loadedAttributes.forEach(([name, attribute]) => {
-          geometry.setAttribute(name, attribute);
-        });
+      if (bufferRequests.length === 0) {
+        node.loaded = true;
+        node.loading = false;
+        return;
+      }
+      bufferRequests.sort((a, b) => a.offset - b.offset);
+      const minOffset = bufferRequests[0].offset;
+      const maxOffset = Math.max(...bufferRequests.map((r) => r.offset + r.length));
+      const totalLength = maxOffset - minOffset;
+
+      const { buffer, relOffset: baseRelOffset } = await node.structure.scheduleRequest({
+        offset: minOffset,
+        length: totalLength,
+        componentType: null,
+      });
 
-        if (primitive.indices !== undefined) {
-          const indexAttribute = await node.structure.createBufferAttribute(primitive.indices);
-          geometry.setIndex(indexAttribute);
+      for (const req of bufferRequests) {
+        const relOffset = req.offset - minOffset;
+        req.data = node.structure.createTypedArray(buffer, baseRelOffset + relOffset, req.length, req.componentType);
+      }
+
+      for (let primIdx = 0; primIdx < meshDef.primitives.length; primIdx++) {
+        const primitive = meshDef.primitives[primIdx];
+        const geometry = new BufferGeometry();
+        const reqs = primitiveReqMap.get(primIdx);
+
+        if (primitive.attributes.POSITION !== undefined) {
+          const req = reqs.find((r) => r.type === "position" && r.accessorIndex === primitive.attributes.POSITION);
+          const accessor = node.structure.json.accessors[primitive.attributes.POSITION];
+          const components = node.structure.getNumComponents(accessor.type);
+          geometry.setAttribute("position", new BufferAttribute(req.data, components));
         }
 
-        this.currentPrimitiveMode = primitive.mode;
+        if (primitive.attributes.NORMAL !== undefined) {
+          const req = reqs.find((r) => r.type === "normal" && r.accessorIndex === primitive.attributes.NORMAL);
+          const accessor = node.structure.json.accessors[primitive.attributes.NORMAL];
+          const components = node.structure.getNumComponents(accessor.type);
+          geometry.setAttribute("normal", new BufferAttribute(req.data, components));
+        }
+
+        if (primitive.attributes.TEXCOORD_0 !== undefined) {
+          const req = reqs.find((r) => r.type === "uv" && r.accessorIndex === primitive.attributes.TEXCOORD_0);
+          const accessor = node.structure.json.accessors[primitive.attributes.TEXCOORD_0];
+          const components = node.structure.getNumComponents(accessor.type);
+          geometry.setAttribute("uv", new BufferAttribute(req.data, components));
+        }
+
+        if (primitive.indices !== undefined) {
+          const req = reqs.find((r) => r.type === "index" && r.accessorIndex === primitive.indices);
+          geometry.setIndex(new BufferAttribute(req.data, 1));
+        }
 
         let material;
         if (primitive.material !== undefined) {
@@ -274,8 +380,7 @@ export class DynamicGltfLoader {
           Material.prototype.copy.call(pointsMaterial, material);
           pointsMaterial.color.copy(material.color);
           pointsMaterial.map = material.map;
-          pointsMaterial.sizeAttenuation = false; // glTF spec says points should be 1px
-
+          pointsMaterial.sizeAttenuation = false;
           mesh = new Points(geometry, pointsMaterial);
         } else if (
           primitive.mode === GL_CONSTANTS.TRIANGLES ||
@@ -284,7 +389,6 @@ export class DynamicGltfLoader {
           primitive.mode === undefined
         ) {
           mesh = new Mesh(geometry, material);
-
           if (primitive.mode === GL_CONSTANTS.TRIANGLE_STRIP) {
             mesh.drawMode = TriangleStripDrawMode;
           } else if (primitive.mode === GL_CONSTANTS.TRIANGLE_FAN) {
@@ -297,39 +401,30 @@ 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 };
         }
-
         if (meshDef.extras) {
           mesh.userData = { ...mesh.userData, ...meshDef.extras };
         }
-
         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}`;
         }
-
         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();
         }
-
         if (material.aoMap && geometry.attributes.uv) {
           geometry.setAttribute("uv2", geometry.attributes.uv);
         }
@@ -339,17 +434,17 @@ export class DynamicGltfLoader {
           this.scene.add(mesh);
         }
         node.object = mesh;
-
         this.totalLoadedObjects++;
         mesh.visible = this.totalLoadedObjects < this.graphicsObjectLimit;
       }
-
       node.loaded = true;
       node.loading = false;
-
       const geometrySize = this.estimateGeometrySize(node.object);
       this.geometryCache.set(node.object.uuid, geometrySize);
       this.currentMemoryUsage += geometrySize;
+      if (onLoadFinishCb) {
+        onLoadFinishCb();
+      }
     } catch (error) {
       if (error.name !== "AbortError") {
         console.error(`Error loading node ${nodeId}:`, error);
@@ -474,7 +569,7 @@ export class DynamicGltfLoader {
       return volumeB - volumeA;
     });
 
-    if (!ignoreEdges) {
+    if (!ignoreEdges && this.visibleEdges) {
       this.nodesToLoad.push(...this.edgeNodes);
     }
 
@@ -601,33 +696,13 @@ export class DynamicGltfLoader {
   async processNodes() {
     const nodesToLoad = this.nodesToLoad;
     let loadedCount = 0;
+    let lastLoadedCount = 0;
     const totalNodes = nodesToLoad.length;
 
-    try {
-      while (loadedCount < totalNodes) {
-        const batch = nodesToLoad.slice(loadedCount, loadedCount + this.batchSize);
-        const batchPromises = [];
-
-        for (const nodeId of batch) {
-          if (this.abortController.signal.aborted) {
-            throw new DOMException("Loading aborted", "AbortError");
-          }
-
-          const estimatedSize = await this.estimateNodeSize(nodeId);
-
-          if (this.currentMemoryUsage + estimatedSize > this.memoryLimit) {
-            console.log(`Memory limit reached after loading ${loadedCount} nodes`);
-            this.dispatchEvent("geometryerror", { message: "Memory limit reached" });
-            this.dispatchEvent("update");
-            return loadedCount;
-          }
-
-          batchPromises.push(this.loadNode(nodeId));
-        }
-
-        await Promise.all(batchPromises);
-        loadedCount += batch.length;
-
+    const loadProgress = async () => {
+      loadedCount++;
+      if (loadedCount - lastLoadedCount > 1000) {
+        lastLoadedCount = loadedCount;
         this.updateMemoryIndicator();
         this.dispatchEvent("geometryprogress", {
           percentage: Math.round((loadedCount / totalNodes) * 100),
@@ -645,6 +720,34 @@ export class DynamicGltfLoader {
           setTimeout(resolve, 0);
         });
       }
+    };
+
+    try {
+      const loadOperations = [];
+      for (const nodeId of nodesToLoad) {
+        if (this.abortController.signal.aborted) {
+          throw new DOMException("Loading aborted", "AbortError");
+        }
+
+        const estimatedSize = await this.estimateNodeSize(nodeId);
+
+        if (this.currentMemoryUsage + estimatedSize > this.memoryLimit) {
+          console.log(`Memory limit reached after loading ${loadedCount} nodes`);
+          this.dispatchEvent("geometryerror", {
+            message: "Memory limit reached",
+          });
+          this.dispatchEvent("update");
+          return loadedCount;
+        }
+
+        loadOperations.push(this.loadNode(nodeId, loadProgress));
+      }
+
+      for (const structure of this.structures) {
+        loadOperations.push(structure.flushBufferRequests());
+      }
+
+      await Promise.all(loadOperations);
 
       this.dispatchEvent("geometryend", {
         totalLoaded: loadedCount,
@@ -1625,4 +1728,23 @@ export class DynamicGltfLoader {
       }
     });
   }
+
+  // Возвращает bounding box для конкретной структуры
+  getStructureGeometryExtent(structureId) {
+    const extent = new Box3();
+    for (const [nodeId, node] of this.nodes.entries()) {
+      if (!node.geometryExtents) continue;
+      if (!nodeId.startsWith(structureId + "_")) continue;
+      if (node.object && this.hiddenHandles && this.hiddenHandles.has(node.object.userData.handle)) continue;
+      const transformedBox = node.geometryExtents.clone();
+      if (node.group && node.group.matrix) {
+        transformedBox.applyMatrix4(node.group.matrix);
+        if (node.group.parent && node.group.parent.matrix) {
+          transformedBox.applyMatrix4(node.group.parent.matrix);
+        }
+      }
+      extent.union(transformedBox);
+    }
+    return extent;
+  }
 }

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

@@ -62,10 +62,8 @@ export class DynamicModelImpl extends ModelImpl {
   }
 
   override hideObjects(objects: Object3D | Object3D[]): this {
-    this.getOwnObjects(objects)
-      .map((object) => object.userData.handle)
-      .forEach((handle) => this.gltfLoader.hiddenHandles.add(handle));
-    this.gltfLoader.syncHiddenObjects();
+    const handles = this.getHandlesByObjects(objects);
+    this.gltfLoader.hideObjects(handles);
     return this;
   }
 
@@ -76,26 +74,23 @@ export class DynamicModelImpl extends ModelImpl {
   }
 
   override showObjects(objects: Object3D | Object3D[]): this {
-    this.getOwnObjects(objects)
-      .map((object) => object.userData.handle)
-      .forEach((handle) => this.gltfLoader.hiddenHandles.delete(handle));
-    this.gltfLoader.syncHiddenObjects();
+    const handles = this.getHandlesByObjects(objects);
+    this.gltfLoader.showObjects(handles);
     return this;
   }
 
   override showAllObjects(): this {
-    this.gltfLoader.hiddenHandles.clear();
-    this.gltfLoader.syncHiddenObjects();
+    this.gltfLoader.showAllHiddenObjects();
     return this;
   }
 
   override showOriginalObjects(objects: Object3D | Object3D[]): this {
-    this.getOwnObjects(objects).forEach((object) => (object.visible = true));
+    this.gltfLoader.showOriginalObjects(objects);
     return this;
   }
 
   override hideOriginalObjects(objects: Object3D | Object3D[]): this {
-    this.getOwnObjects(objects).forEach((object) => (object.visible = false));
+    this.gltfLoader.hideOriginalObjects(objects);
     return this;
   }
 }