@inweb/viewer-three 26.7.6 → 26.8.0

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;
   }
 }

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

@@ -1,4 +1,4 @@
-import { TextureLoader, BufferAttribute, MeshStandardMaterial, DoubleSide, FrontSide } from "three";
+import { TextureLoader, BufferAttribute, Color, DoubleSide, MeshPhongMaterial } from "three";
 
 export const GL_COMPONENT_TYPES = {
   5120: Int8Array,
@@ -31,24 +31,20 @@ export const GL_CONSTANTS = {
   UNSIGNED_SHORT: 5123,
 };
 
+const MAX_GAP = 128 * 1024; // 128 KB
+const MAX_CHUNK = 30 * 1024 * 1024; // 100 MB
+
 export class GltfStructure {
   constructor(id) {
     this.id = `${id}`;
     this.json = null;
     this.baseUrl = "";
-
-    // Binary manager properties
     this.loadController = null;
-    // Request batching parameters
     this.batchDelay = 10;
     this.maxBatchSize = 5 * 1024 * 1024;
     this.maxRangesPerRequest = 512;
-
-    // Request queue
     this.pendingRequests = [];
     this.batchTimeout = null;
-
-    // Material and texture properties
     this.textureLoader = new TextureLoader();
     this.materials = new Map();
     this.textureCache = new Map();
@@ -80,57 +76,110 @@ export class GltfStructure {
     return this.json;
   }
 
-  // Schedule a request for processing
   scheduleRequest(request) {
-    this.pendingRequests.push(request);
-
-    // Clear existing timeout
-    if (this.batchTimeout) {
-      clearTimeout(this.batchTimeout);
-    }
-
-    // Set new timeout for batch processing
-    this.batchTimeout = setTimeout(() => this.processBatch(), this.batchDelay);
-
-    // Return a promise that will resolve when the data is available
     return new Promise((resolve, reject) => {
-      request.resolve = resolve;
-      request.reject = reject;
+      this.pendingRequests.push({
+        ...request,
+        _resolve: resolve,
+        _reject: reject,
+      });
     });
   }
 
-  async processBatch() {
-    if (this.pendingRequests.length === 0) return;
-
-    // Take current batch of requests and clear timeout
-    const currentBatch = [...this.pendingRequests];
+  async flushBufferRequests() {
+    if (!this.pendingRequests || this.pendingRequests.length === 0) return;
+    const requests = [...this.pendingRequests];
     this.pendingRequests = [];
 
-    if (this.batchTimeout) {
-      clearTimeout(this.batchTimeout);
-      this.batchTimeout = null;
+    requests.sort((a, b) => a.offset - b.offset);
+    const mergedRanges = [];
+    let current = {
+      start: requests[0].offset,
+      end: requests[0].offset + requests[0].length,
+      requests: [requests[0]],
+    };
+    for (let i = 1; i < requests.length; i++) {
+      const req = requests[i];
+      const gap = req.offset - current.end;
+      const newEnd = Math.max(current.end, req.offset + req.length);
+      const projectedSize = newEnd - current.start;
+      if (gap <= MAX_GAP && projectedSize <= MAX_CHUNK) {
+        current.end = newEnd;
+        current.requests.push(req);
+      } else {
+        mergedRanges.push(current);
+        current = {
+          start: req.offset,
+          end: req.offset + req.length,
+          requests: [req],
+        };
+      }
     }
-    try {
-      // Split requests into smaller groups
-      for (let i = 0; i < currentBatch.length; i += this.maxRangesPerRequest) {
-        const batchRequests = currentBatch.slice(i, i + this.maxRangesPerRequest);
-        const buffer = await this.loadController.loadBinaryData(batchRequests);
-
-        let currentOffset = 0;
-        batchRequests.forEach((request) => {
-          const view = this.createTypedArray(buffer, currentOffset, request.length, request.componentType);
-          request.resolve(view);
-          currentOffset += request.length;
+    mergedRanges.push(current);
+    const finalRanges = [];
+    for (const range of mergedRanges) {
+      let { start, end, requests } = range;
+      while (end - start > MAX_CHUNK) {
+        let splitIdx = 0;
+        for (let i = 0; i < requests.length; i++) {
+          if (requests[i].offset + requests[i].length - start > MAX_CHUNK) {
+            break;
+          }
+          splitIdx = i;
+        }
+        const chunkRequests = requests.slice(0, splitIdx + 1);
+        const chunkEnd =
+          chunkRequests[chunkRequests.length - 1].offset + chunkRequests[chunkRequests.length - 1].length;
+        finalRanges.push({
+          start,
+          end: chunkEnd,
+          requests: chunkRequests,
         });
+        requests = requests.slice(splitIdx + 1);
+        if (requests.length > 0) {
+          start = requests[0].offset;
+          end = requests[0].offset + requests[0].length;
+          for (let i = 1; i < requests.length; i++) {
+            end = Math.max(end, requests[i].offset + requests[i].length);
+          }
+        }
+      }
+      if (requests.length > 0) {
+        finalRanges.push({ start, end, requests });
       }
-    } catch (error) {
-      console.error("Error processing batch:", error);
-      currentBatch.forEach((request) => request.reject(error));
     }
-
-    if (this.pendingRequests.length > 0) {
-      this.batchTimeout = setTimeout(() => this.processBatch(), this.batchDelay);
+    /*
+    for (const range of finalRanges) {
+      const length = range.end - range.start;
+      const buffer = await this.loadController.loadBinaryData([
+        { offset: range.start, length: length }
+      ]);
+      for (const req of range.requests) {
+        const relOffset = req.offset - range.start;
+        try {
+          req._resolve({ buffer, relOffset, length: req.length });
+        } catch (e) {
+          req._reject(e);
+        }
+      }
     }
+    */
+
+    const promises = finalRanges.map(async (range) => {
+      const length = range.end - range.start;
+      const buffer = await this.loadController.loadBinaryData([{ offset: range.start, length }]);
+      for (const req of range.requests) {
+        const relOffset = req.offset - range.start;
+        try {
+          req._resolve({ buffer, relOffset, length: req.length });
+        } catch (e) {
+          req._reject(e);
+        }
+      }
+    });
+    await Promise.all(promises);
+
+    this.pendingRequests = [];
   }
 
   getBufferView(byteOffset, byteLength, componentType) {
@@ -143,12 +192,10 @@ export class GltfStructure {
 
   createTypedArray(buffer, offset, length, componentType) {
     try {
-      // Validate parameters
       if (!buffer || !(buffer instanceof ArrayBuffer)) {
         throw new Error("Invalid buffer");
       }
 
-      // Calculate element size for given type
       let elementSize;
       switch (componentType) {
         case 5120:
@@ -167,18 +214,15 @@ export class GltfStructure {
           throw new Error(`Unsupported component type: ${componentType}`);
       }
 
-      // Check if requested length is correct
       const numElements = length / elementSize;
       if (!Number.isInteger(numElements)) {
         throw new Error(`Invalid length ${length} for component type ${componentType}`);
       }
 
-      // Check if buffer is large enough
       if (length > buffer.byteLength) {
         throw new Error(`Buffer too small: need ${length} bytes, but buffer is ${buffer.byteLength} bytes`);
       }
 
-      // Create appropriate typed array
       const ArrayType = GL_COMPONENT_TYPES[componentType];
       return new ArrayType(buffer, offset, numElements);
     } catch (error) {
@@ -275,7 +319,6 @@ export class GltfStructure {
       const image = this.json.images[imageIndex];
 
       if (image.uri) {
-        // Handle base64 or URL
         if (image.uri.startsWith("data:")) {
           return await this.textureLoader.loadAsync(image.uri);
         } else {
@@ -283,23 +326,17 @@ export class GltfStructure {
           return await this.textureLoader.loadAsync(fullUrl);
         }
       } else if (image.bufferView !== undefined) {
-        // Handle embedded binary data
         const bufferView = this.json.bufferViews[image.bufferView];
-        const array = await this.getBufferView(
-          bufferView.byteOffset || 0,
-          bufferView.byteLength,
-          5121 // UNSIGNED_BYTE
-        );
+        const array = await this.getBufferView(bufferView.byteOffset || 0, bufferView.byteLength, 5121);
         const blob = new Blob([array], { type: image.mimeType });
         const url = URL.createObjectURL(blob);
         const texture = await this.textureLoader.loadAsync(url);
         URL.revokeObjectURL(url);
-        texture.flipY = false; // GLTF standard
+        texture.flipY = false;
         return texture;
       }
     };
 
-    // Load all textures
     const texturePromises = [];
     for (let i = 0; i < this.json.textures.length; i++) {
       texturePromises.push(
@@ -309,82 +346,56 @@ export class GltfStructure {
     await Promise.all(texturePromises);
   }
 
-  loadMaterials() {
+  async loadMaterials() {
     if (!this.json.materials) return this.materials;
 
     for (let i = 0; i < this.json.materials.length; i++) {
       const materialDef = this.json.materials[i];
-      const material = this.createMaterial(materialDef);
+      const material = await this.createMaterial(materialDef);
+      material.name = materialDef.name;
       this.materials.set(i, material);
     }
     return this.materials;
   }
 
   createMaterial(materialDef) {
-    const material = new MeshStandardMaterial();
+    const params = {};
 
-    // Base color
     if (materialDef.pbrMetallicRoughness) {
       const pbr = materialDef.pbrMetallicRoughness;
-
       if (pbr.baseColorFactor) {
-        material.color.fromArray(pbr.baseColorFactor);
-        material.opacity = pbr.baseColorFactor[3];
+        params.color = new Color().fromArray(pbr.baseColorFactor);
+        params.opacity = pbr.baseColorFactor[3];
+        if (params.opacity < 1.0) params.transparent = true;
       }
-
       if (pbr.baseColorTexture) {
-        material.map = this.textureCache.get(pbr.baseColorTexture.index);
-      }
-
-      // Metallic and roughness
-      if (pbr.metallicFactor !== undefined) {
-        material.metalness = pbr.metallicFactor;
-      }
-      if (pbr.roughnessFactor !== undefined) {
-        material.roughness = pbr.roughnessFactor;
-      }
-      if (pbr.metallicRoughnessTexture) {
-        material.metalnessMap = this.textureCache.get(pbr.metallicRoughnessTexture.index);
-        material.roughnessMap = material.metalnessMap;
+        params.map = this.textureCache.get(pbr.baseColorTexture.index);
       }
     }
 
-    // Normal map
-    if (materialDef.normalTexture) {
-      material.normalMap = this.textureCache.get(materialDef.normalTexture.index);
-      if (materialDef.normalTexture.scale !== undefined) {
-        material.normalScale.set(materialDef.normalTexture.scale, materialDef.normalTexture.scale);
-      }
-    }
+    params.specular = 0x222222;
+    params.shininess = 10;
+    params.reflectivity = 0.05;
+    params.polygonOffset = true;
+    params.polygonOffsetFactor = 1;
+    params.polygonOffsetUnits = 1;
 
-    // Emissive
     if (materialDef.emissiveFactor) {
-      material.emissive.fromArray(materialDef.emissiveFactor);
-    }
-    if (materialDef.emissiveTexture) {
-      material.emissiveMap = this.textureCache.get(materialDef.emissiveTexture.index);
+      params.emissive = new Color().fromArray(materialDef.emissiveFactor);
     }
 
-    // Occlusion
-    if (materialDef.occlusionTexture) {
-      material.aoMap = this.textureCache.get(materialDef.occlusionTexture.index);
-      if (materialDef.occlusionTexture.strength !== undefined) {
-        material.aoMapIntensity = materialDef.occlusionTexture.strength;
-      }
+    if (materialDef.normalTexture) {
+      params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
     }
 
-    // Alpha mode
     if (materialDef.alphaMode === "BLEND") {
-      material.transparent = true;
-    } else if (materialDef.alphaMode === "MASK") {
-      material.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : 0.5;
+      params.transparent = true;
     }
 
-    // Double sided
-    material.side = materialDef.doubleSided ? DoubleSide : FrontSide;
-
-    material.name = materialDef.name;
-
+    if (materialDef.doubleSided) {
+      params.side = DoubleSide;
+    }
+    const material = new MeshPhongMaterial(params);
     return material;
   }
 
@@ -417,12 +428,8 @@ export class GltfStructure {
     if (!meshDef || !meshDef.primitives) return 0;
 
     let totalSize = 0;
-
-    // Estimate size for each primitive
     for (const primitive of meshDef.primitives) {
-      // Check for attributes
       if (primitive.attributes) {
-        // Calculate attributes size
         for (const [, accessorIndex] of Object.entries(primitive.attributes)) {
           if (accessorIndex === undefined) continue;
 
@@ -435,7 +442,6 @@ export class GltfStructure {
         }
       }
 
-      // Calculate indices size if present
       if (primitive.indices !== undefined) {
         const accessor = this.json.accessors[primitive.indices];
         if (accessor) {

package/src/Viewer/loaders/GLTFCloudDynamicLoader.ts

@@ -31,13 +31,11 @@ import { GltfStructure } from "./DynamicGltfLoader/GltfStructure.js";
 
 export class GLTFCloudDynamicLoader implements ILoader {
   public viewer: Viewer;
-  public scene: Group;
   public gltfLoader: DynamicGltfLoader;
   public requestId = 0;
 
   constructor(viewer: Viewer) {
     this.viewer = viewer;
-    this.scene = new Group();
   }
 
   dispose() {
@@ -55,23 +53,25 @@ export class GLTFCloudDynamicLoader implements ILoader {
   }
 
   async load(model: any, format?: string, params?: LoadParams): Promise<this> {
-    this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, this.viewer.scene, this.viewer.renderer);
+    const scene = new Group();
+
+    this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, scene, this.viewer.renderer);
     this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
 
     this.gltfLoader.addEventListener("databasechunk", (data) => {
-      const modelImpl = new DynamicModelImpl(this.scene);
+      const modelImpl = new DynamicModelImpl(scene);
       modelImpl.loader = this;
       modelImpl.gltfLoader = this.gltfLoader;
       modelImpl.viewer = this.viewer;
 
-      this.viewer.scene.add(this.scene);
+      this.viewer.scene.add(scene);
       this.viewer.models.push(modelImpl);
 
       this.viewer.syncOptions();
       this.viewer.syncOverlay();
       this.viewer.update();
 
-      this.viewer.emitEvent({ type: "databasechunk", data, file: model.file, model });
+      this.viewer.emitEvent({ type: "databasechunk", data: scene, file: model.file, model });
     });
 
     this.gltfLoader.addEventListener("geometryprogress", (data) => {
@@ -79,10 +79,6 @@ export class GLTFCloudDynamicLoader implements ILoader {
       this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model.file, model });
     });
 
-    this.gltfLoader.addEventListener("geometrymemory", (data) => {
-      this.viewer.emit({ type: "geometryprogress", data });
-    });
-
     this.gltfLoader.addEventListener("geometryerror", (data) => {
       this.viewer.emitEvent({ type: "geometryerror", data, file: model.file, model });
     });
@@ -138,8 +134,6 @@ export class GLTFCloudDynamicLoader implements ILoader {
   }
 
   cancel() {
-    if (this.gltfLoader) {
-      this.gltfLoader.abortLoading();
-    }
+    if (this.gltfLoader) this.gltfLoader.abortLoading();
   }
 }

package/src/Viewer/loaders/index.ts

@@ -38,7 +38,7 @@ import { GLTFCloudDynamicLoader } from "./GLTFCloudDynamicLoader";
  *
  *    The loader should do:
  *
- *    - Load scene from file. The scene must be a Three.js object of type `Object3D` or a descendant of it.
+ *    - Load raw data from file and convert it to the `Three.js` scene.
  *    - Add scene to the viewer `scene`.
  *    - Create `ModelImpl` for the scene and to the viewer `models` list.
  *    - Synchronize viewer options and overlay.