feat(materials): Add setColor method with opacity preservation

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

@@ -631,6 +631,18 @@ export class FragmentsModel {
     return this._highlightManager.highlight(this, localIds, highlightMaterial);
   }
 
+  /**
+   * Applies a color to the specified items while preserving original material properties.
+   * @param localIds - The local IDs of the items to color. If undefined, all items will be colored.
+   * @param color - The color to apply.
+   */
+  async setColor(
+    localIds: number[] | undefined,
+    color: MaterialDefinition["color"],
+  ) {
+    return this._highlightManager.setColor(this, localIds, color);
+  }
+
   /**
    * Gets the highlight of the specified items.
    * @param localIds - The local IDs of the items to get the highlight of. If undefined, it will return the highlight of all items.

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

@@ -24,6 +24,14 @@ export class HighlightManager {
     ]);
   }
 
+  async setColor(
+    model: FragmentsModel,
+    localIds: number[] | undefined,
+    color: MaterialDefinition["color"],
+  ) {
+    await model.threads.invoke(model.modelId, "setColor", [localIds, color]);
+  }
+
   async getHighlightItemIds(model: FragmentsModel) {
     return model.threads.invoke(
       model.modelId,

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

@@ -192,10 +192,20 @@ export class MaterialManager {
     if (!localMap.has(highlightIndex)) {
       const originalDefinition = materialDefinitions[index];
       const newDefinition = materialDefinitions[highlightIndex];
-      const combinedDefinition: MaterialDefinition = {
-        ...originalDefinition,
-        ...newDefinition,
-      };
+      const { preserveOriginalMaterial, ...highlightDefinition } = newDefinition;
+      const combinedDefinition: MaterialDefinition = { ...originalDefinition };
+      if (preserveOriginalMaterial) {
+        combinedDefinition.color = highlightDefinition.color;
+        if (highlightDefinition.renderedFaces !== undefined) {
+          combinedDefinition.renderedFaces = highlightDefinition.renderedFaces;
+        }
+
+        if (highlightDefinition.depthTest !== undefined) {
+          combinedDefinition.depthTest = highlightDefinition.depthTest;
+        }
+      } else {
+        Object.assign(combinedDefinition, highlightDefinition);
+      }
       const material = this.get(combinedDefinition, request);
       materials.push(material);
       localMap.set(highlightIndex, materials.length - 1);

packages/fragments/src/FragmentsModels/src/model/model-types.ts

@@ -110,6 +110,10 @@ export type MaterialDefinition = {
   opacity: number;
   /** Whether the material is transparent */
   transparent: boolean;
+  /**
+   * Internal flag to preserve base material properties when applying color-only highlights.
+   */
+  preserveOriginalMaterial?: boolean;
   /** An optional custom ID for the material */
   customId?: string;
   /**

packages/fragments/src/FragmentsModels/src/virtual-model/virtual-controllers/virtual-material-controller.ts

@@ -65,6 +65,12 @@ export class VirtualMaterialController {
   }
 
   private checkMaterialExists(material: MaterialDefinition, ids: number[]) {
+    // Don't deduplicate materials with preserveOriginalMaterial flag,
+    // as they need to preserve original material properties (like opacity)
+    // which may differ from existing materials with the same color
+    if (material.preserveOriginalMaterial) {
+      return false;
+    }
     const count = this._list.length;
     for (let i = 0; i < count; i++) {
       const current = this._list[i];

packages/fragments/src/FragmentsModels/src/virtual-model/virtual-fragments-model.ts

@@ -212,6 +212,10 @@ export class VirtualFragmentsModel {
     this._highlightHelper.highlight(this, items, highlightMaterial);
   }
 
+  setColor(items: number[], color: MaterialDefinition["color"]) {
+    this._highlightHelper.setColor(this, items, color);
+  }
+
   getHighlight(localIds: number[]) {
     return this._highlightHelper.getHighlight(this, localIds);
   }

packages/fragments/src/FragmentsModels/src/virtual-model/virtual-helpers/highlight-helper.ts

@@ -50,6 +50,18 @@ export class HighlightHelper {
     model.tiles.updateVirtualMeshes(itemIds);
   }
 
+  setColor(
+    model: VirtualFragmentsModel,
+    items: number[],
+    color: MaterialDefinition["color"],
+  ) {
+    const material = {
+      color,
+      preserveOriginalMaterial: true,
+    } as MaterialDefinition;
+    this.highlight(model, items, material);
+  }
+
   private getFetchEvent(
     model: VirtualFragmentsModel,
     found: MaterialDefinition[],