Toggle-able Basit Mode (#3672)

* Some updates to Basit Mode. Added it to the 6 key

* Renamed BasitMode to ColorsMode

packages/viewer-sandbox/src/Extensions/ViewModesKeys.ts

@@ -31,6 +31,9 @@ export class ViewModesKeys extends Extension {
         case '5':
           viewModes.setViewMode(ViewMode.ARCTIC)
           break
+        case '6':
+          viewModes.setViewMode(ViewMode.COLORS)
+          break
       }
     })
   }

packages/viewer-sandbox/src/main.ts

@@ -11,7 +11,6 @@ import {
 import './style.css'
 import Sandbox from './Sandbox'
 import {
-  SelectionExtension,
   MeasurementsExtension,
   ExplodeExtension,
   DiffExtension,
@@ -456,7 +455,12 @@ const getStream = () => {
     // 'https://app.speckle.systems/projects/344f803f81/models/5582ab673e'
 
     // 'https://speckle.xyz/streams/27e89d0ad6/commits/5ed4b74252'
-    'https://app.speckle.systems/projects/e89b61b65c/models/2a0995f124'
+
+    // DUI3 Mesh Colors
+    'https://app.speckle.systems/projects/93200a735d/models/cbacd3eaeb@344a397239'
+
+    // Instance toilets
+    // 'https://app.speckle.systems/projects/e89b61b65c/models/2a0995f124'
   )
 }
 

packages/viewer/src/index.ts

@@ -131,6 +131,7 @@ import {
 } from './modules/materials/Materials.js'
 import { AccelerationStructure } from './modules/objects/AccelerationStructure.js'
 import { TopLevelAccelerationStructure } from './modules/objects/TopLevelAccelerationStructure.js'
+import { BasitPipeline } from './modules/pipeline/Pipelines/BasitViewPipeline.js'
 
 export {
   Viewer,
@@ -214,6 +215,7 @@ export {
   MRTEdgesPipeline,
   MRTShadedViewPipeline,
   MRTPenViewPipeline,
+  BasitPipeline,
   ViewModes,
   ViewMode,
   FilterMaterial,

packages/viewer/src/modules/extensions/ViewModes.ts

@@ -1,5 +1,6 @@
 import { UpdateFlags } from '../../IViewer.js'
 import { ArcticViewPipeline } from '../pipeline/Pipelines/ArcticViewPipeline.js'
+import { BasitPipeline } from '../pipeline/Pipelines/BasitViewPipeline.js'
 import { DefaultPipeline } from '../pipeline/Pipelines/DefaultPipeline.js'
 import { EdgesPipeline } from '../pipeline/Pipelines/EdgesPipeline.js'
 import { MRTEdgesPipeline } from '../pipeline/Pipelines/MRT/MRTEdgesPipeline.js'
@@ -14,7 +15,8 @@ export enum ViewMode {
   DEFAULT_EDGES,
   SHADED,
   PEN,
-  ARCTIC
+  ARCTIC,
+  COLORS
 }
 
 export class ViewModes extends Extension {
@@ -46,6 +48,9 @@ export class ViewModes extends Extension {
       case ViewMode.ARCTIC:
         renderer.pipeline = new ArcticViewPipeline(renderer)
         break
+      case ViewMode.COLORS:
+        renderer.pipeline = new BasitPipeline(renderer, this.viewer.getWorldTree())
+        break
     }
     this.viewer.requestRender(UpdateFlags.RENDER_RESET)
   }

packages/viewer/src/modules/pipeline/Passes/BasitPass.ts

@@ -32,13 +32,14 @@ export class BasitPass extends BaseGPass {
     super()
     this.tree = tree
     this.speckleRenderer = renderer
+    this.buildMaterials()
   }
 
   public get displayName(): string {
     return 'BASIT'
   }
 
-  onBeforeRender = () => {
+  protected buildMaterials() {
     const batches: MeshBatch[] = this.speckleRenderer.batcher.getBatches(
       undefined,
       GeometryType.MESH
@@ -112,14 +113,14 @@ export class BasitPass extends BaseGPass {
   protected overrideMaterials() {
     for (const k in this.materialMap) {
       const tuple = this.materialMap[k]
-      ;(tuple[0].renderObject as SpeckleMesh).setOverrideMaterial(tuple[2])
+      ;(tuple[0].renderObject as SpeckleMesh).setOverrideBatchMaterial(tuple[2])
     }
   }
 
   protected restoreMaterials() {
     for (const k in this.materialMap) {
       const tuple = this.materialMap[k]
-      ;(tuple[0].renderObject as SpeckleMesh).restoreMaterial()
+      ;(tuple[0].renderObject as SpeckleMesh).restoreBatchMaterial()
     }
   }
 

packages/viewer/src/modules/pipeline/Pipelines/BasitViewPipeline.ts

@@ -3,7 +3,9 @@ import SpeckleRenderer from '../../SpeckleRenderer.js'
 import { GeometryPass } from '../Passes/GeometryPass.js'
 import { Pipeline } from './Pipeline.js'
 import { BasitPass } from '../Passes/BasitPass.js'
-import { ClearFlags } from '../Passes/GPass.js'
+import { ClearFlags, ObjectVisibility } from '../Passes/GPass.js'
+import { StencilPass } from '../Passes/StencilPass.js'
+import { StencilMaskPass } from '../Passes/StencilMaskPass.js'
 
 export class BasitPipeline extends Pipeline {
   constructor(speckleRenderer: SpeckleRenderer, tree: WorldTree) {
@@ -12,13 +14,38 @@ export class BasitPipeline extends Pipeline {
     const basitPass = new BasitPass(tree, speckleRenderer)
     basitPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
     basitPass.setClearColor(0x000000, 0)
-    basitPass.setClearFlags(ClearFlags.COLOR | ClearFlags.DEPTH | ClearFlags.STENCIL)
+    basitPass.setClearFlags(ClearFlags.COLOR)
     basitPass.outputTarget = null
 
-    const transparentColorPass = new GeometryPass()
-    transparentColorPass.setLayers([ObjectLayers.SHADOWCATCHER])
-    transparentColorPass.outputTarget = null
+    const nonMeshPass = new GeometryPass()
+    nonMeshPass.setLayers([
+      ObjectLayers.STREAM_CONTENT_LINE,
+      ObjectLayers.STREAM_CONTENT_POINT,
+      ObjectLayers.STREAM_CONTENT_POINT_CLOUD,
+      ObjectLayers.STREAM_CONTENT_TEXT
+    ])
+    const stencilPass = new StencilPass()
+    stencilPass.setVisibility(ObjectVisibility.STENCIL)
+    stencilPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
 
-    this.passList.push(basitPass, transparentColorPass)
+    const stencilMaskPass = new StencilMaskPass()
+    stencilMaskPass.setVisibility(ObjectVisibility.STENCIL)
+    stencilMaskPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
+    stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
+
+    const overlayPass = new GeometryPass()
+    overlayPass.setLayers([
+      ObjectLayers.PROPS,
+      ObjectLayers.OVERLAY,
+      ObjectLayers.MEASUREMENTS
+    ])
+
+    this.passList.push(
+      stencilPass,
+      basitPass,
+      nonMeshPass,
+      stencilMaskPass,
+      overlayPass
+    )
   }
 }