@inweb/viewer-three 27.4.2 → 27.4.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inweb/viewer-three",
-  "version": "27.4.2",
+  "version": "27.4.4",
   "description": "JavaScript library for rendering CAD and BIM files in a browser using Three.js",
   "homepage": "https://cloud.opendesign.com/docs/index.html",
   "license": "SEE LICENSE IN LICENSE",
@@ -35,10 +35,10 @@
     "docs": "typedoc"
   },
   "dependencies": {
-    "@inweb/client": "~27.4.2",
-    "@inweb/eventemitter2": "~27.4.2",
-    "@inweb/markup": "~27.4.2",
-    "@inweb/viewer-core": "~27.4.2"
+    "@inweb/client": "~27.4.4",
+    "@inweb/eventemitter2": "~27.4.4",
+    "@inweb/markup": "~27.4.4",
+    "@inweb/viewer-core": "~27.4.4"
   },
   "devDependencies": {
     "@streamparser/json": "^0.0.22",

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

@@ -19,7 +19,6 @@ import {
   MathUtils,
   PerspectiveCamera,
   OrthographicCamera,
-  DoubleSide,
   NormalBlending,
   BufferAttribute,
   LineBasicMaterial,
@@ -141,13 +140,6 @@ export class DynamicGltfLoader {
     this.visibilityMaterials = new Set(); // Keep track of materials to update uniforms
   }
 
-  // layout (1 matrix = 4 pixels)
-  //      RGBA RGBA RGBA RGBA (=> column1, column2, column3, column4)
-  //  with  8x8  pixel texture max   16 matrices * 4 pixels =  (8 * 8)
-  //       16x16 pixel texture max   64 matrices * 4 pixels = (16 * 16)
-  //       32x32 pixel texture max  256 matrices * 4 pixels = (32 * 32)
-  //       64x64 pixel texture max 1024 matrices * 4 pixels = (64 * 64)
-
   createDummyTexture() {
     // Create 1x1 dummy texture with identity matrix to prevent shader crash/black screen
     const data = new Float32Array(16); // 4x4 matrix
@@ -226,8 +218,6 @@ export class DynamicGltfLoader {
 
   updateMaterialUniforms() {
     // Only update if the texture actually changed
-    // In three.js, setting `.value = this.transformTexture` triggers uniformity checks
-    // We can avoid looping over all materials if the texture reference hasn't changed
     if (
       this._lastTransformTexture === this.transformTexture &&
       this._lastTransformTextureSize === this.transformTextureSize
@@ -272,7 +262,7 @@ export class DynamicGltfLoader {
 
       console.log(`Available memory set to ${Math.round(memoryLimit / (1024 * 1024 * 1024))}GB`);
     } catch (error) {
-      console.warn("Error detecting available memory:", error);
+      console.warn("DynamicLoader: Error detecting available memory:", error);
     }
 
     return memoryLimit;
@@ -470,7 +460,7 @@ export class DynamicGltfLoader {
             if (entry?.lines?.uuid) uniqueMaterialIds.add(entry.lines.uuid);
           }
         } catch (exp) {
-          console.error("Error adding material to uniqueMaterialIds", exp);
+          console.warn("DynamicLoader: Error collecting material stats", exp);
         }
       }
     }
@@ -492,7 +482,7 @@ export class DynamicGltfLoader {
           this._webglInfoCache = { renderer: null, vendor: null };
         }
       } catch (e) {
-        console.error("Error getting webgl info", e);
+        console.warn("DynamicLoader: Error getting webgl info", e);
         this._webglInfoCache = { renderer: null, vendor: null };
       }
     }
@@ -778,7 +768,7 @@ export class DynamicGltfLoader {
         return;
       }
 
-      console.error(`Error loading node ${nodeId}:`, error);
+      console.warn(`DynamicLoader: Error loading node ${nodeId}:`, error);
     }
   }
 
@@ -842,7 +832,7 @@ export class DynamicGltfLoader {
         await structure.loadTextures();
         await structure.loadMaterials();
       } catch (error) {
-        console.error("Error loading materials:", error);
+        console.error("DynamicLoader: Error loading materials:", error);
         throw error;
       }
     }
@@ -852,7 +842,7 @@ export class DynamicGltfLoader {
 
   async processSceneHierarchy() {
     if (this.structures.length === 0) {
-      throw new Error("No GLTF structures loaded");
+      throw new Error("DynamicLoader: No GLTF structures loaded");
     }
 
     this.nodesToLoad = [];
@@ -863,7 +853,7 @@ export class DynamicGltfLoader {
       const gltf = structure.getJson();
 
       if (!gltf.scenes || !gltf.scenes.length) {
-        console.warn("No scenes found in GLTF structure");
+        console.warn("DynamicLoader: No scenes found in GLTF structure");
         continue;
       }
 
@@ -1152,7 +1142,6 @@ export class DynamicGltfLoader {
         color: 0x808080,
         specular: 0x222222,
         shininess: 10,
-        side: DoubleSide,
       });
     }
   }
@@ -1383,7 +1372,6 @@ export class DynamicGltfLoader {
 
       //console.log("!vertex", shader.vertexShader);
     };
-
     // Ensure the material recompiles to pick up changes
     material.needsUpdate = true;
     return material;
@@ -1653,7 +1641,6 @@ export class DynamicGltfLoader {
     // Clear previous optimization data
     this.objectIdToIndex.clear();
     this.maxObjectId = 0;
-
     const structureGroups = new Map();
 
     this.dispatchEvent("optimizationprogress", {
@@ -1709,7 +1696,6 @@ export class DynamicGltfLoader {
     // This ensures that as we create merged objects, the texture is large enough
     // and populated with identity matrices, so objects don't disappear (scale 0).
     if (totalObjectsToMerge > 0) {
-      console.log(`Pre-allocating transform texture for ${totalObjectsToMerge} objects`);
       this.maxObjectId = totalObjectsToMerge;
       this.initTransformTexture();
       this.initializeObjectVisibility();
@@ -1776,7 +1762,6 @@ export class DynamicGltfLoader {
     });
 
     // Texture and visibility initialized at start of optimization
-
     console.log(`Optimization complete. Total objects: ${this.maxObjectId}`);
 
     this.dispatchEvent("optimizationprogress", {
@@ -1793,7 +1778,7 @@ export class DynamicGltfLoader {
     let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
-        console.warn("Skipping mesh group with null material");
+        console.warn("DynamicLoader: Skipping mesh group with null material");
         continue;
       }
 
@@ -1908,7 +1893,7 @@ export class DynamicGltfLoader {
           await this.yieldToUI();
         }
       } catch (error) {
-        console.error("Failed to merge meshes for material:", error);
+        console.warn("DynamicLoader: Failed to merge meshes for material:", error);
         group.objects.forEach((mesh) => {
           mesh.visible = true;
         });
@@ -1922,7 +1907,7 @@ export class DynamicGltfLoader {
       if (group.objects.length === 0) continue;
 
       if (!group.material) {
-        console.warn("Skipping line group with null material");
+        console.warn("DynamicLoader: Skipping line group with null material");
         continue;
       }
 
@@ -2058,7 +2043,7 @@ export class DynamicGltfLoader {
     let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
-        console.warn("Skipping line segment group with null material");
+        console.warn("DynamicLoader: Skipping line segment group with null material");
         continue;
       }
 
@@ -2171,7 +2156,7 @@ export class DynamicGltfLoader {
           await this.yieldToUI();
         }
       } catch (error) {
-        console.warn("Failed to merge line segments for material:", error);
+        console.warn("DynamicLoader: Failed to merge line segments for material:", error);
         group.objects.forEach((line) => {
           line.visible = true;
         });
@@ -2183,7 +2168,7 @@ export class DynamicGltfLoader {
     let processedGroups = 0;
     for (const group of materialGroups) {
       if (!group.material) {
-        console.warn("Skipping points group with null material");
+        console.warn("DynamicLoader: Skipping points group with null material");
         continue;
       }
 
@@ -2221,7 +2206,6 @@ export class DynamicGltfLoader {
           const totalVertices = mergedGeometry.attributes.position.count;
           const objectIds = new Float32Array(totalVertices);
           let vertexOffset = 0;
-
           group.objects.forEach((points) => {
             const handle = points.userData.handle;
             if (!this.objectIdToIndex.has(handle)) {
@@ -2275,7 +2259,7 @@ export class DynamicGltfLoader {
           await this.yieldToUI();
         }
       } catch (error) {
-        console.warn("Failed to merge points for material:", error);
+        console.warn("DynamicLoader: Failed to merge points for material:", error);
         group.objects.forEach((points) => {
           points.visible = true;
         });
@@ -2326,7 +2310,6 @@ export class DynamicGltfLoader {
       });
 
       const finalGeometry = mergeGeometries(geometriesWithIndex, false);
-
       // Add objectId attribute
       const totalVertices = finalGeometry.attributes.position.count;
       const objectIds = new Float32Array(totalVertices);
@@ -2373,7 +2356,7 @@ export class DynamicGltfLoader {
         obj.geometry.dispose();
       });
     } catch (error) {
-      console.error("Failed to merge geometries:", error);
+      console.warn("DynamicLoader: Failed to merge geometries:", error);
       lineSegmentsArray.forEach((obj) => {
         obj.visible = true;
         rootGroup.add(obj);
@@ -2501,12 +2484,12 @@ export class DynamicGltfLoader {
 
   applyObjectTransforms(objectTransformMap) {
     if (this.mergedObjectMap.size === 0) {
-      console.warn("No merged objects to transform");
+      console.warn("DynamicLoader: No merged objects to transform");
       return;
     }
 
     if (!this.transformData) {
-      console.warn("Transform texture not initialized");
+      console.warn("DynamicLoader: Transform texture not initialized");
       return;
     }
 
@@ -2609,15 +2592,9 @@ export class DynamicGltfLoader {
 
         // Convert offset from structure-root-local to world space,
         // then from world space to parent-local space.
-        // The structure root's matrixWorld converts local→world.
-        // The parent's inverse matrixWorld converts world→parent-local.
-        // But we only need to transform a direction/offset (not a point),
-        // so we transform two points and subtract.
         if (object.userData.structureId) {
           const rootGroup = this.structureRoots.get(object.userData.structureId);
           if (rootGroup && object.parent && object.parent !== rootGroup) {
-            // Transform offset: structureRoot-local → world → parent-local
-            // For a vector (not point): apply rotation/scale only
             const origin = new Vector3(0, 0, 0);
             origin.applyMatrix4(rootGroup.matrixWorld);
             _offset.applyMatrix4(rootGroup.matrixWorld);
@@ -2633,7 +2610,6 @@ export class DynamicGltfLoader {
 
         object.position.add(_offset);
 
-        // Also update highlight wireframe if it exists right now
         if (object.userData.highlight) {
           object.userData.highlight.position.copy(object.position);
         }
@@ -2702,6 +2678,7 @@ export class DynamicGltfLoader {
         // Cache it
         obj.userData.explodeVector = explodeVector;
       }
+
       const explodeVector = obj.userData.explodeVector;
       const distance = explodeVector.length();
 
@@ -2772,7 +2749,7 @@ export class DynamicGltfLoader {
 
   syncHiddenObjects() {
     if (this.mergedObjectMap.size === 0) {
-      console.log("No merged objects to sync");
+      console.warn("DynamicLoader: No merged objects to sync");
       return;
     }
 

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

@@ -4,10 +4,36 @@ import {
   Color,
   DoubleSide,
   MeshPhongMaterial,
+  MeshStandardMaterial,
   PointsMaterial,
   LineBasicMaterial,
+  RepeatWrapping,
+  ClampToEdgeWrapping,
+  MirroredRepeatWrapping,
+  NearestFilter,
+  NearestMipmapNearestFilter,
+  NearestMipmapLinearFilter,
+  LinearFilter,
+  LinearMipmapNearestFilter,
+  LinearMipmapLinearFilter,
+  SRGBColorSpace,
 } from "three";
 
+const GL_TO_THREE_WRAP = {
+  33071: ClampToEdgeWrapping,
+  33648: MirroredRepeatWrapping,
+  10497: RepeatWrapping,
+};
+
+const GL_TO_THREE_FILTER = {
+  9728: NearestFilter,
+  9729: LinearFilter,
+  9984: NearestMipmapNearestFilter,
+  9985: LinearMipmapNearestFilter,
+  9986: NearestMipmapLinearFilter,
+  9987: LinearMipmapLinearFilter,
+};
+
 export const GL_COMPONENT_TYPES = {
   5120: Int8Array,
   5121: Uint8Array,
@@ -54,6 +80,7 @@ export class GltfStructure {
     this.pendingRequests = [];
     this.batchTimeout = null;
     this.textureLoader = new TextureLoader();
+    this.textureLoader.crossOrigin = "anonymous";
     this.materials = new Map();
     this.textureCache = new Map();
     this.materialCache = new Map();
@@ -67,7 +94,7 @@ export class GltfStructure {
     const json = await this.loadController.loadJson();
 
     if (json.asset === undefined || json.asset.version[0] < 2) {
-      throw new Error("GltfStructure: Unsupported asset. glTF versions >=2.0 are supported.");
+      throw new Error("DynamicLoader: Unsupported asset. glTF versions >=2.0 are supported.");
     }
 
     this.json = json;
@@ -101,7 +128,9 @@ export class GltfStructure {
   scheduleRequest(request) {
     return new Promise((resolve, reject) => {
       if (this.loadingAborted) {
-        reject(this.criticalError || new Error("Structure loading has been aborted due to critical error"));
+        reject(
+          this.criticalError || new Error("DynamicLoader: Structure loading has been aborted due to critical error")
+        );
         return;
       }
       this.pendingRequests.push({
@@ -150,7 +179,7 @@ export class GltfStructure {
     }
 
     console.error(
-      `❌ Critical error for structure "${this.id}". All further loading aborted.`,
+      `DynamicLoader: Critical error for structure "${this.id}". All further loading aborted.`,
       `\n   Error: ${error.message || error}`,
       `\n   Rejected ${requests.length} pending chunk requests.`
     );
@@ -224,7 +253,7 @@ export class GltfStructure {
     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"));
+          req._reject(this.criticalError || new Error("DynamicLoader: Structure loading aborted"));
         }
         return;
       }
@@ -251,7 +280,10 @@ export class GltfStructure {
         if (this.isCriticalHttpError(error)) {
           this.abortLoading(error);
         } else {
-          console.warn(`Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`, error);
+          console.warn(
+            `DynamicLoader: Failed to load chunk ${index + 1}/${finalRanges.length} (${range.start}-${range.end}):`,
+            error
+          );
         }
       } finally {
         this.loader.releaseChunkSlot();
@@ -274,7 +306,7 @@ export class GltfStructure {
   createTypedArray(buffer, offset, length, componentType) {
     try {
       if (!buffer || !(buffer instanceof ArrayBuffer)) {
-        throw new Error("Invalid buffer");
+        throw new Error("DynamicLoader: Invalid buffer");
       }
 
       let elementSize;
@@ -292,23 +324,25 @@ export class GltfStructure {
           elementSize = 4;
           break; // UNSIGNED_INT, FLOAT
         default:
-          throw new Error(`Unsupported component type: ${componentType}`);
+          throw new Error(`DynamicLoader: Unsupported component type: ${componentType}`);
       }
 
       const numElements = length / elementSize;
       if (!Number.isInteger(numElements)) {
-        throw new Error(`Invalid length ${length} for component type ${componentType}`);
+        throw new Error(`DynamicLoader: Invalid length ${length} for component type ${componentType}`);
       }
 
       if (length > buffer.byteLength) {
-        throw new Error(`Buffer too small: need ${length} bytes, but buffer is ${buffer.byteLength} bytes`);
+        throw new Error(
+          `DynamicLoader: Buffer too small: need ${length} bytes, but buffer is ${buffer.byteLength} bytes`
+        );
       }
 
       const ArrayType = GL_COMPONENT_TYPES[componentType];
       return new ArrayType(buffer, offset, numElements);
     } catch (error) {
       if (error.name !== "AbortError") {
-        console.error("Error creating typed array:", {
+        console.warn("DynamicLoader: Error creating typed array:", {
           bufferSize: buffer?.byteLength,
           offset,
           length,
@@ -322,7 +356,7 @@ export class GltfStructure {
 
   async createBufferAttribute(accessorIndex) {
     if (!this.json) {
-      throw new Error("No GLTF structure loaded");
+      throw new Error("DynamicLoader: No GLTF structure loaded");
     }
 
     const gltf = this.json;
@@ -345,7 +379,7 @@ export class GltfStructure {
       return attribute;
     } catch (error) {
       if (error.name !== "AbortError") {
-        console.error("Error creating buffer attribute:", {
+        console.warn("DynamicLoader: Error creating buffer attribute:", {
           error,
           accessor,
           bufferView,
@@ -368,7 +402,7 @@ export class GltfStructure {
       case 5126: // FLOAT
         return 4;
       default:
-        throw new Error(`Unknown component type: ${componentType}`);
+        throw new Error(`DynamicLoader: Unknown component type: ${componentType}`);
     }
   }
 
@@ -389,7 +423,7 @@ export class GltfStructure {
       case "MAT4":
         return 16;
       default:
-        throw new Error(`Unknown type: ${type}`);
+        throw new Error(`DynamicLoader: Unknown type: ${type}`);
     }
   }
 
@@ -397,27 +431,52 @@ export class GltfStructure {
     if (!this.json.textures) return;
 
     const loadTexture = async (imageIndex) => {
-      const image = this.json.images[imageIndex];
-
-      if (image.uri) {
-        const fullUrl = await this.loadController.resolveURL(image.uri);
-        return this.textureLoader.loadAsync(fullUrl);
-      } else if (image.bufferView !== undefined) {
-        const bufferView = this.json.bufferViews[image.bufferView];
-        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;
-        return texture;
+      let textureName = `index_${imageIndex}`;
+      try {
+        const image = this.json.images[imageIndex];
+        textureName = image.uri || image.name || textureName;
+
+        if (image.uri) {
+          const fullUrl = await this.loadController.resolveURL(image.uri);
+          return await this.textureLoader.loadAsync(fullUrl);
+        } else if (image.bufferView !== undefined) {
+          const bufferView = this.json.bufferViews[image.bufferView];
+          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);
+          return texture;
+        }
+      } catch {
+        console.warn(`DynamicLoader: Error loading texture ${textureName}`);
       }
     };
 
     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))
+        loadTexture(this.json.textures[i].source).then((texture) => {
+          if (texture) {
+            // Apply sampler settings, mapping WebGL constants to Three.js constants
+            const samplerDef =
+              this.json.textures[i].sampler !== undefined && this.json.samplers
+                ? this.json.samplers[this.json.textures[i].sampler]
+                : {};
+
+            texture.magFilter = GL_TO_THREE_FILTER[samplerDef.magFilter] || LinearFilter;
+            texture.minFilter = GL_TO_THREE_FILTER[samplerDef.minFilter] || LinearMipmapLinearFilter;
+
+            // glTF spec: default wrap is REPEAT (10497) when not specified
+            texture.wrapS = GL_TO_THREE_WRAP[samplerDef.wrapS] || RepeatWrapping;
+            texture.wrapT = GL_TO_THREE_WRAP[samplerDef.wrapT] || RepeatWrapping;
+
+            // glTF textures use non-flipped Y convention
+            texture.flipY = false;
+            texture.needsUpdate = true;
+          }
+          this.textureCache.set(i, texture);
+        })
       );
     }
     await Promise.all(texturePromises);
@@ -455,8 +514,17 @@ export class GltfStructure {
         params.opacity = pbr.baseColorFactor[3];
         if (params.opacity < 1.0) params.transparent = true;
       }
-      if (pbr.baseColorTexture) {
-        params.map = this.textureCache.get(pbr.baseColorTexture.index);
+
+      if (pbr.baseColorTexture !== undefined) {
+        const texture = this.textureCache.get(pbr.baseColorTexture.index);
+        if (texture) {
+          params.map = texture;
+          // Set color to white if map is present and baseColorFactor is not,
+          // or else texture will be tinted with default color
+          if (!pbr.baseColorFactor) {
+            params.color = new Color(0xffffff);
+          }
+        }
       }
     }
 
@@ -491,11 +559,73 @@ export class GltfStructure {
       params.polygonOffsetFactor = 1;
       params.polygonOffsetUnits = 1;
 
-      if (materialDef.normalTexture) {
-        params.normalMap = this.textureCache.get(materialDef.normalTexture.index);
+      // Ensure color is white if only map is present so it renders the texture properly
+      if (params.map && !materialDef.pbrMetallicRoughness?.baseColorFactor) {
+        params.color = new Color(0xffffff);
       }
 
-      material = new MeshPhongMaterial(params);
+      if (materialDef.normalTexture !== undefined) {
+        const normalMap = this.textureCache.get(materialDef.normalTexture.index);
+        if (normalMap) {
+          params.normalMap = normalMap;
+        }
+      }
+
+      // Emissive texture
+      if (materialDef.emissiveTexture !== undefined) {
+        const emissiveMap = this.textureCache.get(materialDef.emissiveTexture.index);
+        if (emissiveMap) {
+          params.emissiveMap = emissiveMap;
+        }
+      }
+
+      // Metallic-roughness texture
+      // Check if we need MeshStandardMaterial for full PBR support or we can use MeshPhongMaterial
+      // Use MeshStandardMaterial only if there are PBR textures present to optimize rendering performance.
+      // If only factors are present, MeshPhongMaterial is enough for basic lighting.
+      const usePBR = materialDef.pbrMetallicRoughness?.metallicRoughnessTexture !== undefined;
+
+      if (usePBR) {
+        // Apply default values if not specified
+        params.metalness =
+          materialDef.pbrMetallicRoughness?.metallicFactor !== undefined
+            ? materialDef.pbrMetallicRoughness.metallicFactor
+            : 1.0;
+        params.roughness =
+          materialDef.pbrMetallicRoughness?.roughnessFactor !== undefined
+            ? materialDef.pbrMetallicRoughness.roughnessFactor
+            : 1.0;
+
+        if (materialDef.pbrMetallicRoughness?.metallicRoughnessTexture !== undefined) {
+          const map = this.textureCache.get(materialDef.pbrMetallicRoughness.metallicRoughnessTexture.index);
+          if (map) {
+            params.metalnessMap = map;
+            params.roughnessMap = map;
+          }
+        }
+        material = new MeshStandardMaterial(params);
+      } else {
+        material = new MeshPhongMaterial(params);
+      }
+
+      // Additional maps setup (needs to happen after instantiation for some properties)
+      if (material.map) material.map.colorSpace = SRGBColorSpace;
+      if (material.emissiveMap) material.emissiveMap.colorSpace = SRGBColorSpace;
+
+      if (material.normalMap) {
+        if (materialDef.normalTexture?.scale !== undefined) {
+          material.normalScale.set(materialDef.normalTexture.scale, materialDef.normalTexture.scale);
+        }
+      }
+      if (materialDef.occlusionTexture !== undefined) {
+        const aoMap = this.textureCache.get(materialDef.occlusionTexture.index);
+        if (aoMap) {
+          material.aoMap = aoMap;
+          if (materialDef.occlusionTexture.strength !== undefined) {
+            material.aoMapIntensity = materialDef.occlusionTexture.strength;
+          }
+        }
+      }
     }
 
     return material;