fix: Use sRGB color space for IFC material colors

packages/fragments/src/FragmentsModels/src/edit/element.ts

@@ -149,7 +149,7 @@ export class Element {
   async getData() {
     const result = await this.model.getItemsData(
       [this.localId],
-      this.config.data,
+      this.config.data
     );
     return result[0];
   }
@@ -163,7 +163,7 @@ export class Element {
     config?: {
       disposeGeometry?: boolean;
       disposeMaterial?: boolean;
-    },
+    }
   ) {
     const disposeGeometry = config?.disposeGeometry ?? true;
     const disposeMaterial = config?.disposeMaterial ?? true;
@@ -207,7 +207,7 @@ export class Element {
 
       if (!meshData) {
         throw new Error(
-          `No geometry found for representation ${sample.representation}`,
+          `No geometry found for representation ${sample.representation}`
         );
       }
 
@@ -219,8 +219,14 @@ export class Element {
       // Material
       if (!materialList.has(sample.material)) {
         const { r, g, b, a } = this.core.materials[sample.material];
+        const color = new THREE.Color().setRGB(
+          r / 255,
+          g / 255,
+          b / 255,
+          THREE.SRGBColorSpace
+        );
         const material = new THREE.MeshLambertMaterial({
-          color: new THREE.Color(r / 255, g / 255, b / 255),
+          color,
           transparent: true,
           opacity: a / 255,
         });
@@ -240,7 +246,7 @@ export class Element {
         geometry.setIndex(Array.from(indices));
         geometry.setAttribute(
           "position",
-          new THREE.BufferAttribute(positions, 3),
+          new THREE.BufferAttribute(positions, 3)
         );
         geometry.setAttribute("normal", new THREE.BufferAttribute(normals, 3));
         geometry.userData.localId = sample.representation;
@@ -482,19 +488,19 @@ export class Element {
     // Update the core data to have just the data referenced by the samples
 
     const matsToDelete = new Set<number>(
-      Object.keys(this.core.materials).map(Number),
+      Object.keys(this.core.materials).map(Number)
     );
 
     const ltsToDelete = new Set<number>(
-      Object.keys(this.core.localTransforms).map(Number),
+      Object.keys(this.core.localTransforms).map(Number)
     );
 
     const gtsToDelete = new Set<number>(
-      Object.keys(this.core.globalTransforms).map(Number),
+      Object.keys(this.core.globalTransforms).map(Number)
     );
 
     const repsToDelete = new Set<number>(
-      Object.keys(this.core.representations).map(Number),
+      Object.keys(this.core.representations).map(Number)
     );
 
     const materialsToGet = new Set<number>();

packages/fragments/src/FragmentsModels/src/model/material-manager.ts

@@ -26,7 +26,13 @@ export class MaterialManager {
       const { color } = definition;
       if (color.isColor) continue;
       const { r, g, b } = color;
-      definition.color = new THREE.Color(r, g, b);
+      // IFC colors are stored in sRBG color space
+      definition.color = new THREE.Color().setRGB(
+        r,
+        g,
+        b,
+        THREE.SRGBColorSpace
+      );
     }
   }
 
@@ -47,7 +53,7 @@ export class MaterialManager {
     const { modelId, objectClass, currentLod, templateId } = request;
     if (!(modelId && objectClass !== undefined && currentLod !== undefined)) {
       throw new Error(
-        "Fragments: material definition information is missing to create the material.",
+        "Fragments: material definition information is missing to create the material."
       );
     }
 
@@ -96,7 +102,7 @@ export class MaterialManager {
         materialDefinitions,
         index,
         request,
-        materials,
+        materials
       );
       const first = highlightData.position[i];
       const value = highlightData.size[i];
@@ -163,7 +169,7 @@ export class MaterialManager {
     } else if (objectClass === ObjectClass.LINE) {
       material = this.newLODMaterial(
         { data, instancing: templateId !== undefined },
-        request,
+        request
       );
     } else {
       throw new Error("Fragments: Unsupported object class");
@@ -187,7 +193,7 @@ export class MaterialManager {
     materialDefinitions: MaterialDefinition[],
     index: any,
     request: any,
-    materials: THREE.Material[],
+    materials: THREE.Material[]
   ) {
     if (!localMap.has(highlightIndex)) {
       const originalDefinition = materialDefinitions[index];
@@ -205,7 +211,7 @@ export class MaterialManager {
   private getUniqueMaterial(
     id: number,
     data: MaterialDefinition,
-    request: any,
+    request: any
   ) {
     const modelId = request.modelId;
     const material = this.list.get(id);

packages/fragments/src/FragmentsModels/src/utils/geometry/parser-helper.ts

@@ -25,7 +25,9 @@ export class ParserHelper {
     const b = material.b() / 255;
     const opacity = material.a() / 255;
     const transparent = material.a() < 255;
-    const color = new THREE.Color(r, g, b);
+    // IFC colors are stored in sRGB color space, so we need to tell Three.js
+    // to convert them to linear color space.
+    const color = new THREE.Color().setRGB(r, g, b, THREE.SRGBColorSpace);
     const renderedFaces = material.renderedFaces();
     return {
       color,
@@ -67,7 +69,7 @@ export class ParserHelper {
   private static getBox(
     data: BoundingBox,
     box: THREE.Box3,
-    point: "min" | "max",
+    point: "min" | "max"
   ) {
     data[point](this._floatVector);
     const x = this._floatVector.x();
@@ -81,7 +83,7 @@ export class ParserHelper {
   private static getVector(
     transform: Transform,
     name: "position" | "xDirection" | "yDirection",
-    vector: DoubleVector | FloatVector,
+    vector: DoubleVector | FloatVector
   ) {
     transform[name](vector);
     const parsed = this._temp[name] as THREE.Vector3;
@@ -96,7 +98,7 @@ export class ParserHelper {
   private static computeZVector() {
     this._temp.zDirection.crossVectors(
       this._temp.xDirection,
-      this._temp.yDirection,
+      this._temp.yDirection
     );
   }
 }

yarn.lock

@@ -1568,7 +1568,7 @@ __metadata:
     ts-node: ^10.0.0
     tsx: ^4.19.2
     typescript: 5.4.2
-    web-ifc: 0.0.72
+    web-ifc: 0.0.73
   peerDependencies:
     three: ">=0.175"
     web-ifc: ">=0.0.72"
@@ -7751,10 +7751,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"web-ifc@npm:0.0.72":
-  version: 0.0.72
-  resolution: "web-ifc@npm:0.0.72"
-  checksum: cdc5cc682c4fb9597bf99dc1bd88abeee91523eb17a0b3840ed143cc1cddf6d75d42c65274b842ec3f3a33bb9374ae2dbfb8580848d951ab8eee4a35028f5af1
+"web-ifc@npm:0.0.73":
+  version: 0.0.73
+  resolution: "web-ifc@npm:0.0.73"
+  checksum: a162e3db0568b03265a76b52cbffb1a8d643f1280b8a7d869c110354a14eb10d784d3f790e59474e65fcb1bfcabf6b9a40cc63e944233b52fd3b695ce46c2c4f
   languageName: node
   linkType: hard