@inweb/viewer-three 26.6.5 → 26.6.7

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

@@ -0,0 +1,102 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Box3, Object3D } from "three";
+
+import { ModelImpl } from "../../model";
+import { DynamicGltfLoader } from "./DynamicGltfLoader.js";
+
+/**
+ * Dynamic model implementation.
+ */
+export class DynamicModelImpl extends ModelImpl {
+  public gltfLoader: DynamicGltfLoader;
+
+  override getExtents(target: Box3): Box3 {
+    return target.union(this.gltfLoader.getTotalGeometryExtent());
+  }
+
+  override getObjects(): Object3D[] {
+    const objects = [];
+    this.gltfLoader.originalObjects.forEach((object: Object3D) => {
+      objects.push(object);
+    });
+    return objects;
+  }
+
+  override getVisibleObjects(): Object3D[] {
+    return this.gltfLoader.getOriginalObjectForSelect();
+  }
+
+  override hasObject(object: any): boolean {
+    return this.gltfLoader.originalObjects.has(object);
+  }
+
+  override getObjectsByHandles(handles: string | string[]): Object3D[] {
+    const handlesSet = new Set(handles);
+    const objects = [];
+    handlesSet.forEach((handle) => {
+      const handles = this.gltfLoader.handleToObjects.get(handle) || [];
+      objects.push(...Array.from(handles));
+    });
+    return objects;
+  }
+
+  override hideObjects(objects: Object3D | Object3D[]): this {
+    this.getOwnObjects(objects)
+      .map((object) => object.userData.handle)
+      .forEach((handle) => this.gltfLoader.hiddenHandles.add(handle));
+    this.gltfLoader.syncHiddenObjects();
+    return this;
+  }
+
+  override isolateObjects(objects: Object3D | Object3D[]): this {
+    const handles = this.getHandlesByObjects(objects);
+    this.gltfLoader.isolateObjects(new Set(handles));
+    return this;
+  }
+
+  override showObjects(objects: Object3D | Object3D[]): this {
+    this.getOwnObjects(objects)
+      .map((object) => object.userData.handle)
+      .forEach((handle) => this.gltfLoader.hiddenHandles.delete(handle));
+    this.gltfLoader.syncHiddenObjects();
+    return this;
+  }
+
+  override showAllObjects(): this {
+    this.gltfLoader.hiddenHandles.clear();
+    this.gltfLoader.syncHiddenObjects();
+    return this;
+  }
+
+  override showOriginalObjects(objects: Object3D | Object3D[]): this {
+    this.getOwnObjects(objects).forEach((object) => (object.visible = true));
+    return this;
+  }
+
+  override hideOriginalObjects(objects: Object3D | Object3D[]): this {
+    this.getOwnObjects(objects).forEach((object) => (object.visible = false));
+    return this;
+  }
+}

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

@@ -0,0 +1,450 @@
+import { TextureLoader, BufferAttribute, MeshStandardMaterial, DoubleSide, FrontSide } from "three";
+
+export const GL_COMPONENT_TYPES = {
+  5120: Int8Array,
+  5121: Uint8Array,
+  5122: Int16Array,
+  5123: Uint16Array,
+  5125: Uint32Array,
+  5126: Float32Array,
+};
+
+export const GL_CONSTANTS = {
+  FLOAT: 5126,
+  //FLOAT_MAT2: 35674,
+  FLOAT_MAT3: 35675,
+  FLOAT_MAT4: 35676,
+  FLOAT_VEC2: 35664,
+  FLOAT_VEC3: 35665,
+  FLOAT_VEC4: 35666,
+  LINEAR: 9729,
+  REPEAT: 10497,
+  SAMPLER_2D: 35678,
+  POINTS: 0,
+  LINES: 1,
+  LINE_LOOP: 2,
+  LINE_STRIP: 3,
+  TRIANGLES: 4,
+  TRIANGLE_STRIP: 5,
+  TRIANGLE_FAN: 6,
+  UNSIGNED_BYTE: 5121,
+  UNSIGNED_SHORT: 5123,
+};
+
+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();
+  }
+
+  async initialize(loadController) {
+    this.json = await loadController.loadJson();
+    this.baseUrl = await loadController.baseUrl();
+    this.loadController = loadController;
+  }
+
+  clear() {
+    this.json = null;
+    this.baseUrl = "";
+    this.loadController = null;
+    this.pendingRequests = [];
+    if (this.batchTimeout) {
+      clearTimeout(this.batchTimeout);
+      this.batchTimeout = null;
+    }
+
+    // Clear materials and textures
+    this.disposeMaterials();
+    this.textureCache.clear();
+    this.materials.clear();
+  }
+
+  getJson() {
+    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;
+    });
+  }
+
+  async processBatch() {
+    if (this.pendingRequests.length === 0) return;
+
+    // Take current batch of requests and clear timeout
+    const currentBatch = [...this.pendingRequests];
+    this.pendingRequests = [];
+
+    if (this.batchTimeout) {
+      clearTimeout(this.batchTimeout);
+      this.batchTimeout = null;
+    }
+    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;
+        });
+      }
+    } 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);
+    }
+  }
+
+  getBufferView(byteOffset, byteLength, componentType) {
+    return this.scheduleRequest({
+      offset: byteOffset,
+      length: byteLength,
+      componentType,
+    });
+  }
+
+  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:
+        case 5121:
+          elementSize = 1;
+          break; // BYTE, UNSIGNED_BYTE
+        case 5122:
+        case 5123:
+          elementSize = 2;
+          break; // SHORT, UNSIGNED_SHORT
+        case 5125:
+        case 5126:
+          elementSize = 4;
+          break; // UNSIGNED_INT, FLOAT
+        default:
+          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) {
+      if (error.name !== "AbortError") {
+        console.error("Error creating typed array:", {
+          bufferSize: buffer?.byteLength,
+          offset,
+          length,
+          componentType,
+          error,
+        });
+      }
+      throw error;
+    }
+  }
+
+  async createBufferAttribute(accessorIndex) {
+    if (!this.json) {
+      throw new Error("No GLTF structure loaded");
+    }
+
+    const gltf = this.json;
+    const accessor = gltf.accessors[accessorIndex];
+    const bufferView = gltf.bufferViews[accessor.bufferView];
+
+    try {
+      const byteOffset = (bufferView.byteOffset || 0) + (accessor.byteOffset || 0);
+      const components = this.getNumComponents(accessor.type);
+      const count = accessor.count;
+      const byteLength = count * components * this.getComponentSize(accessor.componentType);
+
+      const array = await this.getBufferView(byteOffset, byteLength, accessor.componentType);
+
+      const attribute = new BufferAttribute(array, components);
+
+      if (accessor.min !== undefined) attribute.min = accessor.min;
+      if (accessor.max !== undefined) attribute.max = accessor.max;
+
+      return attribute;
+    } catch (error) {
+      if (error.name !== "AbortError") {
+        console.error("Error creating buffer attribute:", {
+          error,
+          accessor,
+          bufferView,
+        });
+      }
+
+      throw error;
+    }
+  }
+
+  getComponentSize(componentType) {
+    switch (componentType) {
+      case 5120: // BYTE
+      case 5121: // UNSIGNED_BYTE
+        return 1;
+      case 5122: // SHORT
+      case 5123: // UNSIGNED_SHORT
+        return 2;
+      case 5125: // UNSIGNED_INT
+      case 5126: // FLOAT
+        return 4;
+      default:
+        throw new Error(`Unknown component type: ${componentType}`);
+    }
+  }
+
+  getNumComponents(type) {
+    switch (type) {
+      case "SCALAR":
+        return 1;
+      case "VEC2":
+        return 2;
+      case "VEC3":
+        return 3;
+      case "VEC4":
+        return 4;
+      case "MAT2":
+        return 4;
+      case "MAT3":
+        return 9;
+      case "MAT4":
+        return 16;
+      default:
+        throw new Error(`Unknown type: ${type}`);
+    }
+  }
+
+  async loadTextures() {
+    if (!this.json.textures) return;
+
+    const loadTexture = async (imageIndex) => {
+      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 {
+          const fullUrl = this.baseUrl + image.uri;
+          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 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
+        return texture;
+      }
+    };
+
+    // Load all textures
+    const texturePromises = [];
+    for (let i = 0; i < this.json.textures.length; i++) {
+      texturePromises.push(
+        loadTexture(this.json.textures[i].source).then((texture) => this.textureCache.set(i, texture))
+      );
+    }
+    await Promise.all(texturePromises);
+  }
+
+  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);
+      this.materials.set(i, material);
+    }
+    return this.materials;
+  }
+
+  createMaterial(materialDef) {
+    const material = new MeshStandardMaterial();
+
+    // Base color
+    if (materialDef.pbrMetallicRoughness) {
+      const pbr = materialDef.pbrMetallicRoughness;
+
+      if (pbr.baseColorFactor) {
+        material.color.fromArray(pbr.baseColorFactor);
+        material.opacity = pbr.baseColorFactor[3];
+      }
+
+      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;
+      }
+    }
+
+    // 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);
+      }
+    }
+
+    // Emissive
+    if (materialDef.emissiveFactor) {
+      material.emissive.fromArray(materialDef.emissiveFactor);
+    }
+    if (materialDef.emissiveTexture) {
+      material.emissiveMap = this.textureCache.get(materialDef.emissiveTexture.index);
+    }
+
+    // Occlusion
+    if (materialDef.occlusionTexture) {
+      material.aoMap = this.textureCache.get(materialDef.occlusionTexture.index);
+      if (materialDef.occlusionTexture.strength !== undefined) {
+        material.aoMapIntensity = materialDef.occlusionTexture.strength;
+      }
+    }
+
+    // Alpha mode
+    if (materialDef.alphaMode === "BLEND") {
+      material.transparent = true;
+    } else if (materialDef.alphaMode === "MASK") {
+      material.alphaTest = materialDef.alphaCutoff !== undefined ? materialDef.alphaCutoff : 0.5;
+    }
+
+    // Double sided
+    material.side = materialDef.doubleSided ? DoubleSide : FrontSide;
+
+    material.name = materialDef.name;
+
+    return material;
+  }
+
+  disposeMaterials() {
+    // Dispose all textures
+    this.textureCache.forEach((texture) => texture.dispose());
+    this.textureCache.clear();
+
+    // Dispose all materials
+    this.materials.forEach((material) => {
+      if (material.map) material.map.dispose();
+      if (material.lightMap) material.lightMap.dispose();
+      if (material.bumpMap) material.bumpMap.dispose();
+      if (material.normalMap) material.normalMap.dispose();
+      if (material.specularMap) material.specularMap.dispose();
+      if (material.envMap) material.envMap.dispose();
+      if (material.aoMap) material.aoMap.dispose();
+      if (material.metalnessMap) material.metalnessMap.dispose();
+      if (material.roughnessMap) material.roughnessMap.dispose();
+      if (material.emissiveMap) material.emissiveMap.dispose();
+      material.dispose();
+    });
+    this.materials.clear();
+  }
+
+  estimateNodeSize(meshIndex) {
+    if (!this.json.meshes) return 0;
+
+    const meshDef = this.json.meshes[meshIndex];
+    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;
+
+          const accessor = this.json.accessors[accessorIndex];
+          if (!accessor) continue;
+
+          const numComponents = this.getNumComponents(accessor.type);
+          const bytesPerComponent = this.getComponentSize(accessor.componentType);
+          totalSize += accessor.count * numComponents * bytesPerComponent;
+        }
+      }
+
+      // Calculate indices size if present
+      if (primitive.indices !== undefined) {
+        const accessor = this.json.accessors[primitive.indices];
+        if (accessor) {
+          const bytesPerComponent = this.getComponentSize(accessor.componentType);
+          totalSize += accessor.count * bytesPerComponent;
+        }
+      }
+    }
+
+    return totalSize;
+  }
+}

package/src/Viewer/loaders/GLTFCloudDynamicLoader.ts

@@ -0,0 +1,145 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2002-2025, Open Design Alliance (the "Alliance").
+// All rights reserved.
+//
+// This software and its documentation and related materials are owned by
+// the Alliance. The software may only be incorporated into application
+// programs owned by members of the Alliance, subject to a signed
+// Membership Agreement and Supplemental Software License Agreement with the
+// Alliance. The structure and organization of this software are the valuable
+// trade secrets of the Alliance and its suppliers. The software is also
+// protected by copyright law and international treaty provisions. Application
+// programs incorporating this software must include the following statement
+// with their copyright notices:
+//
+//   This application incorporates Open Design Alliance software pursuant to a
+//   license agreement with Open Design Alliance.
+//   Open Design Alliance Copyright (C) 2002-2025 by Open Design Alliance.
+//   All rights reserved.
+//
+// By use of this software, its documentation or related materials, you
+// acknowledge and accept the above terms.
+///////////////////////////////////////////////////////////////////////////////
+
+import { Group } from "three";
+import { ILoader, LoadParams } from "@inweb/viewer-core";
+
+import { Viewer } from "../Viewer";
+import { DynamicModelImpl } from "./DynamicGltfLoader/DynamicModelImpl";
+import { DynamicGltfLoader } from "./DynamicGltfLoader/DynamicGltfLoader.js";
+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() {
+    if (this.gltfLoader) this.gltfLoader.clear();
+  }
+
+  isSupport(file: any): boolean {
+    return (
+      typeof file === "object" &&
+      typeof file.database === "string" &&
+      typeof file.downloadResource === "function" &&
+      typeof file.downloadResourceRange === "function" &&
+      /.gltf$/i.test(file.database)
+    );
+  }
+
+  async load(model: any, format?: string, params?: LoadParams): Promise<this> {
+    this.gltfLoader = new DynamicGltfLoader(this.viewer.camera, this.viewer.scene, this.viewer.renderer);
+    this.gltfLoader.memoryLimit = this.viewer.options.memoryLimit;
+
+    this.gltfLoader.addEventListener("databasechunk", (data) => {
+      const modelImpl = new DynamicModelImpl(this.scene);
+      modelImpl.loader = this;
+      modelImpl.gltfLoader = this.gltfLoader;
+      modelImpl.viewer = this.viewer;
+
+      this.viewer.scene.add(this.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.gltfLoader.addEventListener("geometryprogress", (data) => {
+      const progress = data.loaded / data.total;
+      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 });
+    });
+
+    this.gltfLoader.addEventListener("update", (data) => {
+      this.viewer.update();
+    });
+
+    const loadController = {
+      loadJson: async () => {
+        const progress = (progress: number) => {
+          this.viewer.emitEvent({ type: "geometryprogress", data: progress, file: model });
+        };
+
+        const arrayBuffer = await model.downloadResource(
+          model.database,
+          progress,
+          this.gltfLoader.getAbortController().signal
+        );
+
+        const text = new TextDecoder().decode(arrayBuffer);
+        const json = JSON.parse(text);
+
+        return json;
+      },
+
+      loadBinaryData: (requests) => {
+        const ranges = requests.map((request) => ({
+          begin: request.offset,
+          end: request.offset + request.length - 1,
+          requestId: this.requestId++,
+        }));
+
+        return model.downloadResourceRange(
+          model.geometry[0],
+          undefined,
+          ranges,
+          undefined,
+          this.gltfLoader.getAbortController().signal
+        );
+      },
+
+      baseUrl: () => Promise.resolve(`${model.httpClient.serverUrl}${model.path}/`),
+    };
+
+    const structure = new GltfStructure(1);
+    await structure.initialize(loadController);
+
+    await this.gltfLoader.loadStructure(structure);
+    await this.gltfLoader.loadNodes();
+
+    return this;
+  }
+
+  cancel() {
+    if (this.gltfLoader) {
+      this.gltfLoader.abortLoading();
+    }
+  }
+}