refactor: decouple material initialization from CadMaterialManager (#5475)

* refactor: initialize materials in cad node

* refactor: cad material manager events

---------

Co-authored-by: Christopher  Tannum <christopher.tannum@cognitedata.com>

Author: christjt

viewer/packages/cad-geometry-loaders/src/CadManager.test.ts

@@ -15,13 +15,7 @@ describe(CadManager.name, () => {
   let updateHandlerMock: IMock<CadModelUpdateHandler>;
 
   beforeEach(() => {
-    materialManagerMock = new Mock<CadMaterialManager>()
-      .setup(p => p.on(It.IsAny(), It.IsAny()))
-      .returns()
-      .setup(p => p.off(It.IsAny(), It.IsAny()))
-      .returns()
-      .setup(p => p.dispose())
-      .returns();
+    materialManagerMock = new Mock<CadMaterialManager>().setup(p => p.dispose()).returns();
 
     cadModelFactoryMock = new Mock<CadModelFactory>().setup(p => p.dispose()).returns();
 
@@ -56,10 +50,6 @@ describe(CadManager.name, () => {
     expect(cadManager.updateCamera).toBeDefined();
   });
 
-  test('should register materials changed listener on initialization', () => {
-    materialManagerMock.verify(p => p.on('materialsChanged', It.IsAny()));
-  });
-
   test('should access budget correctly', () => {
     const budget = cadManager.budget;
     expect(budget).toBeDefined();
@@ -79,7 +69,6 @@ describe(CadManager.name, () => {
   test('should dispose properly', () => {
     expect(() => cadManager.dispose()).not.toThrow();
     updateHandlerMock.verify(p => p.dispose());
-    materialManagerMock.verify(p => p.off('materialsChanged', It.IsAny()));
   });
 
   test('should access material manager correctly', () => {

viewer/packages/cad-geometry-loaders/src/CadManager.ts

@@ -36,7 +36,6 @@ export class CadManager {
   private readonly _loadingStateChangedTrigger = new EventTrigger<(loadingState: LoadingState) => void>();
 
   private readonly _markNeedsRedrawBound = this.markNeedsRedraw.bind(this);
-  private readonly _materialsChangedListener = this.handleMaterialsChanged.bind(this);
 
   private readonly _sectorBufferTime = 350;
 
@@ -68,7 +67,6 @@ export class CadManager {
     this._materialManager = materialManger;
     this._cadModelFactory = cadModelFactory;
     this._cadModelUpdateHandler = cadModelUpdateHandler;
-    this._materialManager.on('materialsChanged', this._materialsChangedListener);
 
     const consumeNextSector = (sector: ConsumedSector) => {
       const modelSymbol = sector.modelIdentifier.revealInternalId;
@@ -136,7 +134,6 @@ export class CadManager {
     this._unsubscribeConsumedSectors();
     this._unsubscribeLoadingState();
     this._loadingStateChangedTrigger.unsubscribeAll();
-    this._materialManager.off('materialsChanged', this._materialsChangedListener);
   }
 
   requestRedraw(): void {
@@ -145,11 +142,14 @@ export class CadManager {
 
   resetRedraw(): void {
     this._needsRedraw = false;
+    this._materialManager.resetRedraw();
     [...this._cadModelMap.values()].some(m => m.resetRedraw());
   }
 
   get needsRedraw(): boolean {
-    return this._needsRedraw || [...this._cadModelMap.values()].some(m => m.needsRedraw);
+    return (
+      this._needsRedraw || this._materialManager.needsRedraw || [...this._cadModelMap.values()].some(m => m.needsRedraw)
+    );
   }
 
   updateCamera(camera: THREE.PerspectiveCamera, cameraInMotion: boolean): void {
@@ -257,10 +257,6 @@ export class CadManager {
     this._needsRedraw = true;
   }
 
-  private handleMaterialsChanged() {
-    this.requestRedraw();
-  }
-
   private updateTreeIndexToSectorsMap(cadModel: CadNode, sector: ConsumedSector): void {
     if (cadModel.treeIndexToSectorsMap.isCompleted(sector.metadata.id, RevealGeometryCollectionType.TriangleMesh)) {
       return;

viewer/packages/cad-model/src/CadModelFactory.ts

@@ -38,7 +38,7 @@ export class CadModelFactory {
     const geometryClipBox = determineGeometryClipBox(geometryFilter, metadata);
     const modelMetadata = createClippedModel(metadata, geometryClipBox);
 
-    const { modelIdentifier, scene, format, formatVersion } = modelMetadata;
+    const { modelIdentifier, format, formatVersion } = modelMetadata;
     const modelType: SupportedModelTypes = 'cad';
     MetricsLogger.trackLoadModel(
       {
@@ -49,8 +49,8 @@ export class CadModelFactory {
     );
     const sectorRepository = this.getSectorRepository(format, formatVersion);
 
-    this._materialManager.addModelMaterials(modelIdentifier.revealInternalId, scene.maxTreeIndex);
     const cadModel = new CadNode(modelMetadata, this._materialManager, sectorRepository);
+    this._materialManager.addModelMaterials(modelIdentifier.revealInternalId, cadModel.cadMaterial);
 
     if (modelMetadata.geometryClipBox !== null) {
       const clipBox = transformToThreeJsSpace(modelMetadata.geometryClipBox, modelMetadata);

viewer/packages/cad-model/src/picking/PickingHandler.test.ts

@@ -4,7 +4,7 @@
 
 import * as THREE from 'three';
 
-import { CadMaterialManager } from '@reveal/rendering';
+import { CadMaterialManager, RenderMode } from '@reveal/rendering';
 import { IntersectInput } from '@reveal/model-base';
 
 import { PickingHandler } from './PickingHandler';
@@ -29,7 +29,11 @@ describe(PickingHandler.name, () => {
   const cadNode = createCadModel(1, 2).cadNode;
 
   beforeEach(() => {
-    const materialManagerMock = new Mock<CadMaterialManager>().setup(p => p.setRenderMode(It.IsAny())).returns();
+    const materialManagerMock = new Mock<CadMaterialManager>()
+      .setup(p => p.getRenderMode())
+      .returns(RenderMode.Color)
+      .setup(p => p.setRenderMode(It.IsAny()))
+      .returns();
     pickingHandler = new PickingHandler(renderer, materialManagerMock.object(), new SceneHandler());
   });
 

viewer/packages/cad-model/src/picking/PickingHandler.ts

@@ -230,21 +230,13 @@ export class PickingHandler {
   }
 
   private async pickTreeIndex(input: TreeIndexPickingInput, shouldRunAsync: boolean): Promise<number | undefined> {
-    const { cadNode } = input;
-    const previousRenderMode = cadNode.renderMode;
-    cadNode.renderMode = RenderMode.TreeIndex;
-    let pixelBuffer: Uint8Array;
-    try {
-      pixelBuffer = await this.pickPixel(
-        input,
-        this._treeIndexRenderPipeline,
-        this._clearColor,
-        this._clearAlpha,
-        shouldRunAsync
-      );
-    } finally {
-      cadNode.renderMode = previousRenderMode;
-    }
+    const pixelBuffer = await this.pickPixel(
+      input,
+      this._treeIndexRenderPipeline,
+      this._clearColor,
+      this._clearAlpha,
+      shouldRunAsync
+    );
 
     if (pixelBuffer[3] === 0) {
       return;
@@ -260,20 +252,15 @@ export class PickingHandler {
   }
 
   private async pickDepth(input: PickingInput, shouldRunAsync: boolean): Promise<number> {
-    const { cadNodes } = input;
-    const previousRenderMode = cadNodes[0].renderMode;
-    cadNodes.forEach(cadeNode => (cadeNode.renderMode = RenderMode.Depth));
     const pixelBuffer = await this.pickPixel(
       input,
       this._depthRenderPipeline,
       this._clearColor,
       this._clearAlpha,
       shouldRunAsync
     );
-    cadNodes.forEach(cadeNode => (cadeNode.renderMode = previousRenderMode));
 
-    const depth = this.unpackRGBAToDepth(pixelBuffer);
-    return depth;
+    return this.unpackRGBAToDepth(pixelBuffer);
   }
 
   private getPosition(input: PickingInput, viewZ: number): THREE.Vector3 {

viewer/packages/cad-model/src/wrappers/CadNode.ts

@@ -8,10 +8,17 @@ import {
   PrioritizedArea,
   type NodeTransformProvider
 } from '@reveal/cad-styling';
+import throttle from 'lodash/throttle';
 import { SectorScene, CadModelMetadata, RootSectorNode, WantedSector, ConsumedSector } from '@reveal/cad-parsers';
 import { SectorRepository } from '@reveal/sector-loader';
 import { ParsedGeometry } from '@reveal/sector-parser';
-import { CadMaterialManager, RenderMode, setModelRenderLayers, StyledTreeIndexSets } from '@reveal/rendering';
+import {
+  CadMaterialManager,
+  setModelRenderLayers,
+  StyledTreeIndexSets,
+  createCadMaterial,
+  type CadMaterial
+} from '@reveal/rendering';
 
 import { Group, Object3D, Plane, Matrix4, Object3DEventMap } from 'three';
 
@@ -37,9 +44,10 @@ export class CadNode extends Object3D<Object3DEventMap & { update: undefined }>
 
   private readonly _sourceTransform: Matrix4;
   private readonly _customTransform: Matrix4;
-  private readonly _setModelRenderLayers = () => this.setModelRenderLayers();
   private readonly _batchedGeometryMeshGroup: Group;
   private readonly _styledTreeIndexSets: StyledTreeIndexSets;
+  //cleaup type
+  private readonly _cadMaterial: CadMaterial;
 
   private _isDisposed: boolean = false;
 
@@ -59,22 +67,37 @@ export class CadNode extends Object3D<Object3DEventMap & { update: undefined }>
     this._sectorRepository = sectorRepository;
     this._modelIdentifier = model.modelIdentifier;
     this.treeIndexToSectorsMap = new TreeIndexToSectorsMap(model.scene.maxTreeIndex);
-    const back = this._materialManager.getModelBackTreeIndices(model.modelIdentifier.revealInternalId);
-    const ghost = this._materialManager.getModelGhostedTreeIndices(model.modelIdentifier.revealInternalId);
-    const inFront = this._materialManager.getModelInFrontTreeIndices(model.modelIdentifier.revealInternalId);
-    const visible = this._materialManager.getModelVisibleTreeIndices(model.modelIdentifier.revealInternalId);
+    this._cadMaterial = createCadMaterial(model.scene.maxTreeIndex);
 
     this._styledTreeIndexSets = {
-      back,
-      ghost,
-      inFront,
-      visible
+      back: this._cadMaterial.nodeAppearanceTextureBuilder.regularNodeTreeIndices,
+      ghost: this._cadMaterial.nodeAppearanceTextureBuilder.ghostedNodeTreeIndices,
+      inFront: this._cadMaterial.nodeAppearanceTextureBuilder.infrontNodeTreeIndices,
+      visible: this._cadMaterial.nodeAppearanceTextureBuilder.visibleNodeTreeIndices
     };
 
+    const materialUpdateThrottleDelay = 75;
+    const updateMaterialsCallback: () => void = throttle(
+      () => {
+        if (this._cadMaterial.nodeAppearanceTextureBuilder.needsUpdate) {
+          this._cadMaterial.nodeAppearanceTextureBuilder.build();
+        }
+        this._needsRedraw = true;
+        this.setModelRenderLayers();
+      },
+      materialUpdateThrottleDelay,
+      {
+        leading: true,
+        trailing: true
+      }
+    );
+
+    this._cadMaterial.nodeAppearanceProvider.on('changed', updateMaterialsCallback);
+
     this._batchedGeometryMeshGroup = new Group();
     this._batchedGeometryMeshGroup.name = 'Batched Geometry';
 
-    const materials = materialManager.getModelMaterials(model.modelIdentifier.revealInternalId);
+    const materials = this._cadMaterial.materials;
     this._geometryBatchingManager = new MultiBufferBatchingManager(
       this._batchedGeometryMeshGroup,
       materials,
@@ -105,8 +128,6 @@ export class CadNode extends Object3D<Object3DEventMap & { update: undefined }>
 
     this._sourceTransform = new Matrix4().copy(model.modelMatrix);
     this._customTransform = new Matrix4();
-
-    this.materialManager.on('materialsChanged', this._setModelRenderLayers);
   }
 
   get needsRedraw(): boolean {
@@ -117,26 +138,30 @@ export class CadNode extends Object3D<Object3DEventMap & { update: undefined }>
     this._needsRedraw = false;
   }
 
+  // TODO: cleanup type
+  get cadMaterial(): CadMaterial {
+    return this._cadMaterial;
+  }
+
   get nodeTransformProvider(): NodeTransformProvider {
-    return this._materialManager.getModelNodeTransformProvider(this._cadModelMetadata.modelIdentifier.revealInternalId);
+    return this._cadMaterial.nodeTransformProvider;
   }
 
   get nodeAppearanceProvider(): NodeAppearanceProvider {
-    return this._materialManager.getModelNodeAppearanceProvider(
-      this._cadModelMetadata.modelIdentifier.revealInternalId
-    );
+    return this._cadMaterial.nodeAppearanceProvider;
   }
 
   get defaultNodeAppearance(): NodeAppearance {
-    return this._materialManager.getModelDefaultNodeAppearance(this._cadModelMetadata.modelIdentifier.revealInternalId);
+    return this._cadMaterial.nodeAppearanceTextureBuilder.getDefaultAppearance();
   }
 
   set defaultNodeAppearance(appearance: NodeAppearance) {
-    this._materialManager.setModelDefaultNodeAppearance(
-      this._cadModelMetadata.modelIdentifier.revealInternalId,
-      appearance
-    );
+    this._cadMaterial.nodeAppearanceTextureBuilder.setDefaultAppearance(appearance);
+    if (this._cadMaterial.nodeAppearanceTextureBuilder.needsUpdate) {
+      this._cadMaterial.nodeAppearanceTextureBuilder.build();
+    }
     this.setModelRenderLayers();
+    this._needsRedraw = true;
   }
 
   get clippingPlanes(): Plane[] {
@@ -163,18 +188,6 @@ export class CadNode extends Object3D<Object3DEventMap & { update: undefined }>
     return this._rootSector;
   }
 
-  get materialManager(): CadMaterialManager {
-    return this._materialManager;
-  }
-
-  set renderMode(mode: RenderMode) {
-    this._materialManager.setRenderMode(mode);
-  }
-
-  get renderMode(): RenderMode {
-    return this._materialManager.getRenderMode();
-  }
-
   get isDisposed(): boolean {
     return this._isDisposed;
   }
@@ -246,7 +259,6 @@ export class CadNode extends Object3D<Object3DEventMap & { update: undefined }>
 
   public dispose(): void {
     this.nodeAppearanceProvider.dispose();
-    this.materialManager.off('materialsChanged', this._setModelRenderLayers);
     this._materialManager.removeModelMaterials(this._cadModelMetadata.modelIdentifier.revealInternalId);
     this._geometryBatchingManager?.dispose();
 

viewer/packages/rendering/index.ts

@@ -2,7 +2,7 @@
  * Copyright 2021 Cognite AS
  */
 
-export { CadMaterialManager } from './src/CadMaterialManager';
+export { CadMaterialManager, createCadMaterial, CadMaterial } from './src/CadMaterialManager';
 export { PointCloudMaterialManager } from './src/PointCloudMaterialManager';
 
 export {