fix(viewer-lib): Handles WEB-2491.

- Section outlines are no longer visible behind other geometry. They are depth tested now for all view modes - Shaded mode aka BastiMode now properly updates the section planes
specklesystems · Jan 21, 2025 · 1bb172f · 1bb172f
1 parent a2bc9ff
commit 1bb172f
Show file tree

Hide file tree

Showing 12 changed files with 51 additions and 62 deletions.
diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts
@@ -113,7 +113,7 @@ const getStream = () => {
     // prettier-ignore
     // 'https://app.speckle.systems/streams/da9e320dad/commits/5388ef24b8?c=%5B-7.66134,10.82932,6.41935,-0.07739,-13.88552,1.8697,0,1%5D'
     // Revit sample house (good for bim-like stuff with many display meshes)
-    // 'https://app.speckle.systems/streams/da9e320dad/commits/5388ef24b8'
+    'https://app.speckle.systems/streams/da9e320dad/commits/5388ef24b8'
     // 'https://latest.speckle.systems/streams/c1faab5c62/commits/ab1a1ab2b6'
     // 'https://app.speckle.systems/streams/da9e320dad/commits/5388ef24b8'
     // 'https://latest.speckle.systems/streams/58b5648c4d/commits/60371ecb2d'
@@ -469,7 +469,7 @@ const getStream = () => {
     // 'https://app.speckle.systems/projects/e89b61b65c/models/2a0995f124'
 
     // 'https://latest.speckle.systems/projects/3fe1880c36/models/65bb4287a8'
-    'https://latest.speckle.systems/projects/db06488e1c/models/21f3930771'
+    // 'https://latest.speckle.systems/projects/db06488e1c/models/21f3930771'
   )
 }
 

diff --git a/packages/viewer/src/modules/pipeline/Passes/BasitPass.ts b/packages/viewer/src/modules/pipeline/Passes/BasitPass.ts
@@ -3,6 +3,7 @@ import {
   DoubleSide,
   OrthographicCamera,
   PerspectiveCamera,
+  Plane,
   Scene,
   WebGLRenderer
 } from 'three'
@@ -40,6 +41,12 @@ export class BasitPass extends BaseGPass {
     return 'BASIT'
   }
 
+  public setClippingPlanes(planes: Plane[]) {
+    for (const k in this.materialMap) {
+      this.materialMap[k][2].clippingPlanes = planes
+    }
+  }
+
   protected buildMaterials() {
     const batches: MeshBatch[] = this.speckleRenderer.batcher.getBatches(
       undefined,

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/ArcticViewPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/ArcticViewPipeline.ts
@@ -30,7 +30,8 @@ export class ArcticViewPipeline extends ProgressivePipeline {
       ObjectLayers.STREAM_CONTENT_LINE,
       ObjectLayers.STREAM_CONTENT_POINT,
       ObjectLayers.STREAM_CONTENT_POINT_CLOUD,
-      ObjectLayers.STREAM_CONTENT_TEXT
+      ObjectLayers.STREAM_CONTENT_TEXT,
+      ObjectLayers.PROPS
     ])
     viewportPass.setVisibility(ObjectVisibility.OPAQUE)
     viewportPass.options = { minIntensity: 0.75 }
@@ -72,11 +73,7 @@ export class ArcticViewPipeline extends ProgressivePipeline {
     stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.dynamicStage.push(
       stencilPass,

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/BasitViewPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/BasitViewPipeline.ts
@@ -12,7 +12,7 @@ export class BasitPipeline extends Pipeline {
     super(speckleRenderer)
 
     const basitPass = new BasitPass(tree, speckleRenderer)
-    basitPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
+    basitPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH, ObjectLayers.PROPS])
     basitPass.setClearColor(0x000000, 0)
     basitPass.setClearFlags(ClearFlags.COLOR)
     basitPass.outputTarget = null
@@ -34,11 +34,7 @@ export class BasitPipeline extends Pipeline {
     stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.passList.push(
       stencilPass,

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/DefaultPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/DefaultPipeline.ts
@@ -27,7 +27,8 @@ export class DefaultPipeline extends ProgressivePipeline {
       ObjectLayers.STREAM_CONTENT_LINE,
       ObjectLayers.STREAM_CONTENT_POINT,
       ObjectLayers.STREAM_CONTENT_POINT_CLOUD,
-      ObjectLayers.STREAM_CONTENT_TEXT
+      ObjectLayers.STREAM_CONTENT_TEXT,
+      ObjectLayers.PROPS
     ])
     opaqueColorPass.setVisibility(ObjectVisibility.OPAQUE)
 
@@ -63,11 +64,7 @@ export class DefaultPipeline extends ProgressivePipeline {
     stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.dynamicStage.push(
       stencilPass,

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/EdgesPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/EdgesPipeline.ts
@@ -49,7 +49,8 @@ export class EdgesPipeline extends ProgressivePipeline {
       ObjectLayers.STREAM_CONTENT_LINE,
       ObjectLayers.STREAM_CONTENT_POINT,
       ObjectLayers.STREAM_CONTENT_POINT_CLOUD,
-      ObjectLayers.STREAM_CONTENT_TEXT
+      ObjectLayers.STREAM_CONTENT_TEXT,
+      ObjectLayers.PROPS
     ])
     opaqueColorPass.setVisibility(ObjectVisibility.OPAQUE)
 
@@ -103,11 +104,7 @@ export class EdgesPipeline extends ProgressivePipeline {
     stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.dynamicStage.push(
       depthPassDynamic,

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/MRT/MRTEdgesPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/MRT/MRTEdgesPipeline.ts
@@ -79,6 +79,9 @@ export class MRTEdgesPipeline extends ProgressivePipeline {
     blendPassDynamic.setTexture('tEdges', edgesPassDynamic.outputTarget?.texture)
     blendPassDynamic.accumulationFrames = this.accumulationFrameCount
 
+    const postBlendGeometryPass = new GeometryPass()
+    postBlendGeometryPass.setLayers([ObjectLayers.PROPS])
+
     const stencilPass = new StencilPass()
     stencilPass.setVisibility(ObjectVisibility.STENCIL)
     stencilPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
@@ -89,20 +92,17 @@ export class MRTEdgesPipeline extends ProgressivePipeline {
     stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.dynamicStage.push(
       depthPassNormalDynamic,
       edgesPassDynamic,
       stencilPass,
       opaqueColorPass,
       transparentColorPass,
-      stencilMaskPass,
       blendPassDynamic,
+      postBlendGeometryPass,
+      stencilMaskPass,
       overlayPass
     )
     this.progressiveStage.push(
@@ -113,16 +113,18 @@ export class MRTEdgesPipeline extends ProgressivePipeline {
       stencilPass,
       opaqueColorPass,
       transparentColorPass,
-      stencilMaskPass,
       blendPass,
+      postBlendGeometryPass,
+      stencilMaskPass,
       overlayPass
     )
     this.passthroughStage.push(
       stencilPass,
       opaqueColorPass,
       transparentColorPass,
-      stencilMaskPass,
       blendPass,
+      postBlendGeometryPass,
+      stencilMaskPass,
       overlayPass
     )
 

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/MRT/MRTPenViewPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/MRT/MRTPenViewPipeline.ts
@@ -96,19 +96,15 @@ export class MRTPenViewPipeline extends ProgressivePipeline {
         return +a.material.colorWrite - +b.material.colorWrite
       }
     })()
-    geometryPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
+    geometryPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH, ObjectLayers.PROPS])
 
     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.OVERLAY,
-      ObjectLayers.MEASUREMENTS,
-      ObjectLayers.PROPS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     const outputPass = new OutputPass()
     outputPass.setTexture('tDiffuse', taaPass.outputTarget?.texture)

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/MRT/MRTShadedViewPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/MRT/MRTShadedViewPipeline.ts
@@ -36,7 +36,8 @@ export class MRTShadedViewPipeline extends ProgressivePipeline {
       ObjectLayers.STREAM_CONTENT_LINE,
       ObjectLayers.STREAM_CONTENT_POINT,
       ObjectLayers.STREAM_CONTENT_POINT_CLOUD,
-      ObjectLayers.STREAM_CONTENT_TEXT
+      ObjectLayers.STREAM_CONTENT_TEXT,
+      ObjectLayers.PROPS
     ])
     viewportPass.options = {
       matcapTexture: {
@@ -71,6 +72,9 @@ export class MRTShadedViewPipeline extends ProgressivePipeline {
     blendPassDynamic.setTexture('tEdges', edgesPassDynamic.outputTarget?.texture)
     blendPassDynamic.accumulationFrames = this.accumulationFrameCount
 
+    const postBlendGeometryPass = new GeometryPass()
+    postBlendGeometryPass.setLayers([ObjectLayers.PROPS])
+
     const stencilPass = new StencilPass()
     stencilPass.setVisibility(ObjectVisibility.STENCIL)
     stencilPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
@@ -81,20 +85,17 @@ export class MRTShadedViewPipeline extends ProgressivePipeline {
     stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.dynamicStage.push(
       depthPassNormalDynamic,
       edgesPassDynamic,
       stencilPass,
       shadowcatcherPass,
       viewportPass,
-      stencilMaskPass,
       blendPassDynamic,
+      postBlendGeometryPass,
+      stencilMaskPass,
       overlayPass
     )
     this.progressiveStage.push(
@@ -104,16 +105,18 @@ export class MRTShadedViewPipeline extends ProgressivePipeline {
       stencilPass,
       shadowcatcherPass,
       viewportPass,
-      stencilMaskPass,
       blendPass,
+      postBlendGeometryPass,
+      stencilMaskPass,
       overlayPass
     )
     this.passthroughStage.push(
       stencilPass,
       shadowcatcherPass,
       viewportPass,
-      stencilMaskPass,
       blendPass,
+      stencilMaskPass,
+      postBlendGeometryPass,
       overlayPass
     )
 

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/PenViewPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/PenViewPipeline.ts
@@ -110,7 +110,7 @@ export class PenViewPipeline extends ProgressivePipeline {
         return +a.material.colorWrite - +b.material.colorWrite
       }
     })()
-    geometryPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH])
+    geometryPass.setLayers([ObjectLayers.STREAM_CONTENT_MESH, ObjectLayers.PROPS])
 
     const stencilMaskPass = new StencilMaskPass()
     stencilMaskPass.setVisibility(ObjectVisibility.STENCIL)

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/ShadedViewPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/ShadedViewPipeline.ts
@@ -46,7 +46,8 @@ export class ShadedViewPipeline extends ProgressivePipeline {
       ObjectLayers.STREAM_CONTENT_LINE,
       ObjectLayers.STREAM_CONTENT_POINT,
       ObjectLayers.STREAM_CONTENT_POINT_CLOUD,
-      ObjectLayers.STREAM_CONTENT_TEXT
+      ObjectLayers.STREAM_CONTENT_TEXT,
+      ObjectLayers.PROPS
     ])
     viewportPass.options = {
       matcapTexture: {
@@ -91,11 +92,7 @@ export class ShadedViewPipeline extends ProgressivePipeline {
     stencilMaskPass.setClearFlags(ClearFlags.DEPTH)
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.dynamicStage.push(
       depthPassDynamic,

diff --git a/packages/viewer/src/modules/pipeline/Pipelines/TAAPipeline.ts b/packages/viewer/src/modules/pipeline/Pipelines/TAAPipeline.ts
@@ -39,7 +39,8 @@ export class TAAPipeline extends ProgressivePipeline {
       ObjectLayers.STREAM_CONTENT_LINE,
       ObjectLayers.STREAM_CONTENT_POINT,
       ObjectLayers.STREAM_CONTENT_POINT_CLOUD,
-      ObjectLayers.STREAM_CONTENT_TEXT
+      ObjectLayers.STREAM_CONTENT_TEXT,
+      ObjectLayers.PROPS
     ])
     opaqueColorPass.setVisibility(ObjectVisibility.OPAQUE)
 
@@ -131,11 +132,7 @@ export class TAAPipeline extends ProgressivePipeline {
     jitteredStencilMaskPass.outputTarget = renderTarget
 
     const overlayPass = new GeometryPass()
-    overlayPass.setLayers([
-      ObjectLayers.PROPS,
-      ObjectLayers.OVERLAY,
-      ObjectLayers.MEASUREMENTS
-    ])
+    overlayPass.setLayers([ObjectLayers.OVERLAY, ObjectLayers.MEASUREMENTS])
 
     this.dynamicStage.push(
       stencilPass,