#827 Implemented the colored material (used when filtering by non-numeric properties) for lines as well.

packages/viewer-sandbox/src/main.ts

@@ -40,5 +40,5 @@ sandbox.makeSceneUI()
 sandbox.makeFilteringUI()
 // Load demo object
 sandbox.loadUrl(
-  'https://speckle.xyz/streams/da9e320dad/commits/5388ef24b8?c=%5B-7.66134,10.82932,6.41935,-0.07739,-13.88552,1.8697,0,1%5D'
+  'https://latest.speckle.dev/streams/3ed8357f29/commits/d10f2af1ce?c=%5B44.9036,-24.475,37.28273,46.97876,-2.90317,-1.54942,0,1%5D'
 )

packages/viewer/src/modules/FilteringManager.ts

@@ -1,4 +1,4 @@
-import { Texture } from 'three'
+import { Color, Texture } from 'three'
 
 export enum FilterMaterialType {
   SELECT,
@@ -10,6 +10,7 @@ export enum FilterMaterialType {
 export interface FilterMaterial {
   filterType: FilterMaterialType
   rampIndex?: number
+  rampIndexColor?: Color
   rampTexture?: Texture
 }
 

packages/viewer/src/modules/Viewer.ts

@@ -439,8 +439,6 @@ export class Viewer extends EventEmitter implements IViewer {
     this.speckleRenderer.clearFilter()
     this.speckleRenderer.beginFilter()
     for (let k = 0; k < colors.length; k++) {
-      if (colors[k].name === 'Mesh' || colors[k].name === 'Base') continue
-
       const nodes = colors[k].nodes
       let ids = []
       for (let i = 0; i < nodes.length; i++) {
@@ -453,6 +451,7 @@ export class Viewer extends EventEmitter implements IViewer {
       this.speckleRenderer.applyFilter(ids, {
         filterType: FilterMaterialType.COLORED,
         rampIndex: colors[k].colorIndex / colors.length,
+        rampIndexColor: new Color(colors[k].color),
         rampTexture
       })
     }

packages/viewer/src/modules/batching/LineBatch.ts

@@ -1,5 +1,6 @@
 import {
   BufferGeometry,
+  Color,
   DynamicDrawUsage,
   InstancedInterleavedBuffer,
   InterleavedBufferAttribute,
@@ -22,6 +23,7 @@ export default class LineBatch implements Batch {
   public batchMaterial: SpeckleLineMaterial
   private mesh: LineSegments2 | Line
   public colorBuffer: InstancedInterleavedBuffer
+  public static vectorBuffer: Vector4 = new Vector4()
 
   public constructor(id: string, renderViews: NodeRenderView[]) {
     this.id = id
@@ -66,14 +68,21 @@ export default class LineBatch implements Batch {
 
     for (let i = 0; i < ranges.length; i++) {
       const material = ranges[i].material as SpeckleLineMaterial
+      const materialOptions = ranges[i].materialOptions
+      const color: Color =
+        materialOptions && materialOptions.rampIndexColor
+          ? materialOptions.rampIndexColor
+          : material.color
       const start = ranges[i].offset * this.colorBuffer.stride
       const len =
         ranges[i].offset * this.colorBuffer.stride +
         ranges[i].count * this.colorBuffer.stride
+
+      LineBatch.vectorBuffer.set(color.r, color.g, color.b, 1)
       this.updateColorBuffer(
         start,
         ranges[i].count === Infinity ? this.colorBuffer.array.length : len,
-        new Vector4(material.color.r, material.color.g, material.color.b, 1)
+        LineBatch.vectorBuffer
       )
     }
     this.colorBuffer.updateRange = { offset: 0, count: data.length }

packages/viewer/src/modules/materials/Materials.ts

@@ -14,6 +14,7 @@ import { FilterMaterial } from '../FilteringManager'
 
 export interface MaterialOptions {
   rampIndex?: number
+  rampIndexColor?: Color
   rampTexture?: Texture
 }
 
@@ -23,6 +24,7 @@ export default class Materials {
   private meshGhostMaterial: Material = null
   private lineHighlightMaterial: Material = null
   private lineGhostMaterial: Material = null
+  private lineColoredMaterial: Material = null
   private pointCloudHighlightMaterial: Material = null
   private pointHighlightMaterial: Material = null
   private meshGradientMaterial: Material = null
@@ -115,6 +117,24 @@ export default class Materials {
       1306
     )
 
+    this.lineColoredMaterial = new SpeckleLineMaterial({
+      color: 0xffffff,
+      linewidth: 1, // in world units with size attenuation, pixels otherwise
+      worldUnits: false,
+      vertexColors: false,
+      alphaToCoverage: false,
+      resolution: new Vector2(1281, 1306)
+      // clippingPlanes: this.viewer.sectionBox.planes
+    })
+    ;(<SpeckleLineMaterial>this.lineHighlightMaterial).color = new Color(0xffffff)
+    ;(<SpeckleLineMaterial>this.lineHighlightMaterial).linewidth = 1
+    ;(<SpeckleLineMaterial>this.lineHighlightMaterial).worldUnits = false
+    ;(<SpeckleLineMaterial>this.lineHighlightMaterial).pixelThreshold = 0.5
+    ;(<SpeckleLineMaterial>this.lineHighlightMaterial).resolution = new Vector2(
+      1281,
+      1306
+    )
+
     this.pointCloudHighlightMaterial = new SpecklePointMaterial({
       color: 0xff0000,
       vertexColors: true,
@@ -308,7 +328,7 @@ export default class Materials {
       case GeometryType.MESH:
         return this.meshGhostMaterial
       case GeometryType.LINE:
-        return this.lineGhostMaterial // TO DO
+        return this.lineGhostMaterial
       case GeometryType.POINT:
         return this.meshGhostMaterial // TO DO
       case GeometryType.POINT_CLOUD:
@@ -321,7 +341,7 @@ export default class Materials {
       case GeometryType.MESH:
         return this.meshGradientMaterial
       case GeometryType.LINE:
-        return this.meshGradientMaterial // TO DO
+        return this.lineGhostMaterial
       case GeometryType.POINT:
         return this.meshGradientMaterial // TO DO
       case GeometryType.POINT_CLOUD:
@@ -334,7 +354,7 @@ export default class Materials {
       case GeometryType.MESH:
         return this.meshColoredMaterial
       case GeometryType.LINE:
-        return this.meshColoredMaterial // TO DO
+        return this.lineColoredMaterial
       case GeometryType.POINT:
         return this.meshColoredMaterial // TO DO
       case GeometryType.POINT_CLOUD:
@@ -413,6 +433,7 @@ export default class Materials {
   public getFilterMaterialOptions(filterMaterial: FilterMaterial) {
     return {
       rampIndex: filterMaterial.rampIndex ? filterMaterial.rampIndex : undefined,
+      rampIndexColor: filterMaterial.rampIndexColor,
       rampTexture: filterMaterial.rampTexture ? filterMaterial.rampTexture : undefined
     }
   }

packages/viewer/src/modules/materials/SpeckleBasicMaterial.ts

@@ -71,7 +71,7 @@ class SpeckleBasicMaterial extends MeshBasicMaterial {
     SpeckleBasicMaterial.matBuff.elements[12] = 0
     SpeckleBasicMaterial.matBuff.elements[13] = 0
     SpeckleBasicMaterial.matBuff.elements[14] = 0
-    SpeckleBasicMaterial.matBuff.multiply(object.matrixWorld)
+    // SpeckleBasicMaterial.matBuff.multiply(object.matrixWorld)
     object.modelViewMatrix.copy(SpeckleBasicMaterial.matBuff)
 
     SpeckleBasicMaterial.vecBuff0.set(

packages/viewer/src/modules/materials/SpeckleLambertMaterial.ts

@@ -71,7 +71,7 @@ class SpeckleLambertMaterial extends MeshLambertMaterial {
     SpeckleLambertMaterial.matBuff.elements[12] = 0
     SpeckleLambertMaterial.matBuff.elements[13] = 0
     SpeckleLambertMaterial.matBuff.elements[14] = 0
-    SpeckleLambertMaterial.matBuff.multiply(object.matrixWorld)
+    // SpeckleLambertMaterial.matBuff.multiply(object.matrixWorld)
     object.modelViewMatrix.copy(SpeckleLambertMaterial.matBuff)
 
     SpeckleLambertMaterial.vecBuff0.set(

packages/viewer/src/modules/materials/SpeckleLineBasicMaterial.ts

@@ -69,7 +69,7 @@ class SpeckleLineBasicMaterial extends LineBasicMaterial {
     SpeckleLineBasicMaterial.matBuff.elements[12] = 0
     SpeckleLineBasicMaterial.matBuff.elements[13] = 0
     SpeckleLineBasicMaterial.matBuff.elements[14] = 0
-    SpeckleLineBasicMaterial.matBuff.multiply(object.matrixWorld)
+    // SpeckleLineBasicMaterial.matBuff.multiply(object.matrixWorld)
     object.modelViewMatrix.copy(SpeckleLineBasicMaterial.matBuff)
 
     SpeckleLineBasicMaterial.vecBuff0.set(

packages/viewer/src/modules/materials/SpeckleLineMaterial.ts

@@ -84,7 +84,7 @@ class SpeckleLineMaterial extends LineMaterial {
     SpeckleLineMaterial.matBuff.elements[12] = 0
     SpeckleLineMaterial.matBuff.elements[13] = 0
     SpeckleLineMaterial.matBuff.elements[14] = 0
-    SpeckleLineMaterial.matBuff.multiply(object.matrixWorld)
+    // SpeckleLineMaterial.matBuff.multiply(object.matrixWorld)
     object.modelViewMatrix.copy(SpeckleLineMaterial.matBuff)
 
     SpeckleLineMaterial.vecBuff0.set(

packages/viewer/src/modules/materials/SpeckleStandardColoredMaterial.ts

@@ -93,7 +93,7 @@ class SpeckleStandardColoredMaterial extends MeshStandardMaterial {
     SpeckleStandardColoredMaterial.matBuff.elements[12] = 0
     SpeckleStandardColoredMaterial.matBuff.elements[13] = 0
     SpeckleStandardColoredMaterial.matBuff.elements[14] = 0
-    SpeckleStandardColoredMaterial.matBuff.multiply(object.matrixWorld)
+    // SpeckleStandardColoredMaterial.matBuff.multiply(object.matrixWorld)
     object.modelViewMatrix.copy(SpeckleStandardColoredMaterial.matBuff)
 
     SpeckleStandardColoredMaterial.vecBuff0.set(

packages/viewer/src/modules/materials/SpeckleStandardMaterial.ts

@@ -71,7 +71,7 @@ class SpeckleStandardMaterial extends MeshStandardMaterial {
     SpeckleStandardMaterial.matBuff.elements[12] = 0
     SpeckleStandardMaterial.matBuff.elements[13] = 0
     SpeckleStandardMaterial.matBuff.elements[14] = 0
-    SpeckleStandardMaterial.matBuff.multiply(object.matrixWorld)
+    // SpeckleStandardMaterial.matBuff.multiply(object.matrixWorld)
     object.modelViewMatrix.copy(SpeckleStandardMaterial.matBuff)
 
     SpeckleStandardMaterial.vecBuff0.set(