Alex/g pipeline update

packages/frontend-2/lib/viewer/extensions/PassReader.ts

@@ -1,6 +1,4 @@
-import { type SpecklePass } from '@speckle/viewer'
 import { Extension } from '@speckle/viewer'
-import type SpeckleRenderer from '@speckle/viewer/dist/modules/SpeckleRenderer'
 import type { WebGLRenderTarget } from 'three'
 import { Vector3, Vector4 } from 'three'
 
@@ -12,23 +10,23 @@ export class PassReader extends Extension {
 
   public async read(): Promise<string> {
     return new Promise<string>((resolve, reject) => {
-      const renderer: SpeckleRenderer = this.viewer.getRenderer()
+      // const renderer: SpeckleRenderer = this.viewer.getRenderer()
 
-      const dephPass: SpecklePass = renderer.pipeline.composer
-        .passes[0] as unknown as SpecklePass
-      // o_0
+      // const dephPass: SpecklePass = renderer.pipeline.composer
+      //   .passes[0] as unknown as SpecklePass
+      // // o_0
 
-      this.renderTarget = dephPass.outputRenderTarget
-      if (!this.renderTarget) {
-        reject('Issue with depth pass render target')
-        return
-      }
+      // this.renderTarget = dephPass.outputRenderTarget
+      // if (!this.renderTarget) {
+      reject('Issue with depth pass render target')
+      //   return
+      // }
 
-      const bufferSize = this.renderTarget.width * this.renderTarget.height * 4
-      if (this.outputBuffer.length !== bufferSize)
-        this.outputBuffer = new Uint8Array(bufferSize)
-      this.needsRead = true
-      this.readbackExecutor = resolve
+      // const bufferSize = this.renderTarget.width * this.renderTarget.height * 4
+      // if (this.outputBuffer.length !== bufferSize)
+      //   this.outputBuffer = new Uint8Array(bufferSize)
+      // this.needsRead = true
+      // this.readbackExecutor = resolve
     })
   }
 

packages/viewer-sandbox/src/Sandbox.ts

@@ -1,4 +1,16 @@
-import { SectionTool, SpeckleStandardMaterial, TreeNode } from '@speckle/viewer'
+/* eslint-disable @typescript-eslint/no-unsafe-argument */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+/* eslint-disable @typescript-eslint/no-unsafe-call */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import {
+  ArcticViewPipeline,
+  EdgesPipeline,
+  PenViewPipeline,
+  SectionTool,
+  ShadedViewPipeline,
+  SpeckleStandardMaterial,
+  TreeNode
+} from '@speckle/viewer'
 import {
   CanonicalView,
   Viewer,
@@ -142,7 +154,6 @@ export default class Sandbox {
     // Mad HTML/CSS skills
     container.appendChild(this.pane['containerElem_'])
 
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
     this.pane['containerElem_'].style = 'pointer-events:auto;'
 
     this.tabs = this.pane.addTab({
@@ -162,7 +173,7 @@ export default class Sandbox {
       this.addStreamControls(url)
       this.addViewControls()
       this.addBatches()
-      this.properties = await this.viewer.getObjectProperties()
+      // this.properties = await this.viewer.getObjectProperties()
       this.batchesParams.totalBvhSize = this.getBVHSize()
       this.refresh()
     })
@@ -274,7 +285,6 @@ export default class Sandbox {
       this.objectControls.dispose()
     }
     this.objectControls = this.tabs.pages[0].addFolder({
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
       title: `Object: ${node.model.id}`
     })
 
@@ -377,7 +387,6 @@ export default class Sandbox {
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
 
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         const file = e.target?.files[0] as Blob & { name: string }
 
         const reader = new FileReader()
@@ -412,7 +421,7 @@ export default class Sandbox {
     })
     toggleSectionBox.on('click', () => {
       let box = this.viewer.getRenderer().boxFromObjects(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         this.selectionList.map((val) => val.hits[0].node.model.raw.id) as string[]
       )
       if (!box) {
@@ -443,7 +452,7 @@ export default class Sandbox {
     })
     zoomExtents.on('click', () => {
       this.viewer.getExtension(CameraController).setCameraView(
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-return
         this.selectionList.map((val) => val.hits[0].node.model.id) as string[],
         true
       )
@@ -499,27 +508,68 @@ export default class Sandbox {
         await waitForAnimation(1000)
       }
     })
+    this.tabs.pages[0].addSeparator()
 
+    const pipeline = { output: 0 }
+    this.tabs.pages[0]
+      .addInput(pipeline, 'output', {
+        label: 'Pipeline',
+        options: {
+          DEFAULT: 0,
+          SHADED: 1,
+          PEN: 2,
+          ARCTIC: 3
+        }
+      })
+      .on('change', (value) => {
+        switch (value.value) {
+          case 0:
+            this.viewer.getRenderer().pipeline = new EdgesPipeline(
+              this.viewer.getRenderer()
+            )
+            break
+          case 1:
+            this.viewer.getRenderer().pipeline = new ShadedViewPipeline(
+              this.viewer.getRenderer()
+            )
+            break
+          case 2:
+            this.viewer.getRenderer().pipeline = new PenViewPipeline(
+              this.viewer.getRenderer()
+            )
+            break
+          case 3:
+            this.viewer.getRenderer().pipeline = new ArcticViewPipeline(
+              this.viewer.getRenderer()
+            )
+            break
+
+          default:
+            break
+        }
+        this.viewer.resize()
+        this.viewer.requestRender(UpdateFlags.RENDER_RESET)
+      })
+
+    this.tabs.pages[0].addSeparator()
     const colors = this.tabs.pages[0].addButton({
       title: `PM's Colors`
     })
     colors.on('click', async () => {
       const colorNodes = this.viewer.getWorldTree().findAll(
         (node: TreeNode) =>
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-return, @typescript-eslint/no-unsafe-member-access
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-return
           node.model.renderView &&
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           node.model.renderView.renderData.colorMaterial &&
-          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
           node.model.renderView.geometryType === GeometryType.MESH
       )
       const colorMap: { [color: number]: Array<string> } = {}
       for (let k = 0; k < colorNodes.length; k++) {
         const node = colorNodes[k]
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-unsafe-member-access
+
         const color: number = node.model.renderView.renderData.colorMaterial.color
         if (!colorMap[color]) colorMap[color] = []
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument, @typescript-eslint/no-unsafe-member-access
+
         colorMap[color].push(node.model.id)
       }
       const colorGroups = []
@@ -547,6 +597,8 @@ export default class Sandbox {
         }
       })
 
+    this.tabs.pages[0].addSeparator()
+
     const canonicalViewsFolder = this.tabs.pages[0].addFolder({
       title: 'Canonical Views',
       expanded: false
@@ -563,6 +615,122 @@ export default class Sandbox {
             .setCameraView(sides[k] as CanonicalView, true)
         })
     }
+    // const edgesParams = {
+    //   depthMultiplier: 1,
+    //   depthBias: 0.001,
+    //   normalMultiplier: 1,
+    //   normalBias: 1,
+    //   outlineDensity: 0.5,
+    //   outlineThickness: 1,
+    //   smaa: false,
+    //   taa: true
+    // }
+    // const edgesFolder = this.tabs.pages[0].addFolder({
+    //   title: 'Edges',
+    //   expanded: true
+    // })
+    // edgesFolder
+    //   .addInput(edgesParams, 'depthMultiplier', {
+    //     label: 'depthMultiplier',
+    //     min: 0,
+    //     max: 1,
+    //     step: 0.01
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.uniforms[
+    //       'uDepthMultiplier'
+    //     ].value = value.value
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.needsUpdate = true
+    //     this.viewer.requestRender()
+    //   })
+    // edgesFolder
+    //   .addInput(edgesParams, 'depthBias', {
+    //     label: 'depthBias',
+    //     min: 0,
+    //     max: 1,
+    //     step: 0.0001
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.uniforms[
+    //       'uDepthBias'
+    //     ].value = value.value
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.needsUpdate = true
+    //     this.viewer.requestRender()
+    //   })
+    // edgesFolder
+    //   .addInput(edgesParams, 'normalMultiplier', {
+    //     label: 'normalMultiplier',
+    //     min: 0,
+    //     max: 1,
+    //     step: 0.01
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.uniforms[
+    //       'uNormalMultiplier'
+    //     ].value = value.value
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.needsUpdate = true
+    //     this.viewer.requestRender()
+    //   })
+    // edgesFolder
+    //   .addInput(edgesParams, 'normalBias', {
+    //     label: 'normalBias',
+    //     min: 0,
+    //     max: 50,
+    //     step: 0.1
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.uniforms[
+    //       'uNormalBias'
+    //     ].value = value.value
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.needsUpdate = true
+    //     this.viewer.requestRender()
+    //   })
+    // edgesFolder
+    //   .addInput(edgesParams, 'outlineDensity', {
+    //     label: 'outlineDensity',
+    //     min: 0,
+    //     max: 1,
+    //     step: 0.01
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.uniforms[
+    //       'uOutlineDensity'
+    //     ].value = value.value
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.needsUpdate = true
+    //     this.viewer.requestRender()
+    //   })
+    // edgesFolder
+    //   .addInput(edgesParams, 'outlineThickness', {
+    //     label: 'outlineThickness',
+    //     min: 0,
+    //     max: 10,
+    //     step: 0.1
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.uniforms[
+    //       'uOutlineThickness'
+    //     ].value = value.value
+    //     this.viewer.getRenderer().pipeline.edgesPass.edgesMaterial.needsUpdate = true
+    //     this.viewer.requestRender()
+    //   })
+    // edgesFolder
+    //   .addInput(edgesParams, 'smaa', {
+    //     label: 'SMAA'
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.smaaPass.enabled = edgesParams.smaa
+    //     this.viewer.getRenderer().pipeline.pipelineOutput = 8
+    //     this.viewer.requestRender()
+    //   })
+    // edgesFolder
+    //   .addInput(edgesParams, 'taa', {
+    //     label: 'TAA'
+    //   })
+    //   .on('change', (value) => {
+    //     this.viewer.getRenderer().pipeline.taaPass.enabled = edgesParams.taa
+    //     this.viewer.getRenderer().pipeline.pipelineOutput = 8
+    //     this.viewer.requestRender()
+    //   })
   }
 
   makeSceneUI() {
@@ -702,7 +870,8 @@ export default class Sandbox {
           DYNAMIC_AO: 5,
           DYNAMIC_AO_BLURED: 6,
           PROGRESSIVE_AO: 7,
-          FINAL: 8
+          FINAL: 8,
+          EDGES: 9
         }
       })
       .on('change', () => {
@@ -1341,9 +1510,7 @@ export default class Sandbox {
     const objects = this.viewer.getRenderer().allObjects
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     objects.traverse((obj: any) => {
-      // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
       if (obj.hasOwnProperty('boundsTreeSizeInBytes')) {
-        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
         size += obj['boundsTreeSizeInBytes']
         // console.log(obj['boundsTreeSizeInBytes'] / 1024 / 1024)
       }

packages/viewer-sandbox/src/main.ts

@@ -105,7 +105,7 @@ const getStream = () => {
     // prettier-ignore
     // 'https://speckle.xyz/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://speckle.xyz/streams/da9e320dad/commits/5388ef24b8'
+    'https://speckle.xyz/streams/da9e320dad/commits/5388ef24b8'
     // 'https://latest.speckle.dev/streams/c1faab5c62/commits/ab1a1ab2b6'
     // 'https://speckle.xyz/streams/da9e320dad/commits/5388ef24b8'
     // 'https://latest.speckle.dev/streams/58b5648c4d/commits/60371ecb2d'
@@ -211,7 +211,7 @@ const getStream = () => {
     // 'https://latest.speckle.dev/streams/92b620fb17/commits/b4366a7086?filter=%7B%7D&c=%5B-31.02357,37.60008,96.58899,11.01564,7.40652,66.0411,0,1%5D)'
     // double
     // 'https://latest.speckle.dev/streams/92b620fb17/commits/b4366a7086?overlay=c009dbe144&filter=%7B%7D&c=%5B-104.70053,-98.80617,67.44669,6.53096,1.8739,38.584,0,1%5D'
-    // 'https://latest.speckle.dev/streams/c43ac05d04/commits/ec724cfbeb',
+    // 'https://latest.speckle.dev/streams/c43ac05d04/commits/ec724cfbeb'
     // 'https://latest.speckle.dev/streams/efd2c6a31d/commits/4b495e1901'
     // 'https://latest.speckle.dev/streams/efd2c6a31d/commits/4b495e1901'
     // tekla 2
@@ -406,25 +406,37 @@ const getStream = () => {
     // 'https://latest.speckle.systems/projects/126cd4b7bb/models/6221c985c0'
 
     // DUI3 Color Proxies
+    // 'https://app.speckle.systems/projects/93200a735d/models/d1fbf678f1'
     // ' https://app.speckle.systems/projects/93200a735d/models/d1fbf678f1'
     // 'https://app.speckle.systems/projects/b53a53697a/models/93fa215ba9'
     // 'https://latest.speckle.systems/projects/126cd4b7bb/models/5ec85fc2a2'
     // 'https://latest.speckle.systems/projects/2af60ce1b6/models/09dbceb25f@5af6d6a3f4'
     // 'https://latest.speckle.systems/projects/2af60ce1b6/models/09dbceb25f@ebb895355d'
+
+    // Backfaces
+    // 'https://app.speckle.systems/projects/69bf87aa61/models/c8f443a03e'
+
+    // 'https://app.speckle.systems/projects/cdaeb201d9/models/1ad10b0a5b'
     // 'https://app.speckle.systems/projects/93200a735d/models/d1fbf678f1@088537140b'
     // 'https://app.speckle.systems/projects/93200a735d/models/e3c3849167'
     // 'https://app.speckle.systems/projects/93200a735d/models/d1fbf678f1@088537140b'
     // 'https://app.speckle.systems/projects/93200a735d/models/e3c3849167'
 
     // Text with no material
     // 'https://latest.speckle.systems/projects/731c6e2fd1/models/bcd3a4a706'
+    // 'https://latest.speckle.systems/projects/126cd4b7bb/models/44a3cddb93'
+    // 'https://latest.speckle.systems/projects/126cd4b7bb/models/afec5fcb04@0c2ad0b86b'
+    // 'https://latest.speckle.systems/projects/126cd4b7bb/models/44a3cddb93'
+    // 'https://latest.speckle.systems/projects/126cd4b7bb/models/44a3cddb93@31654f1e2c'
+    // Homepage
+    // 'https://app.speckle.systems/projects/0c1ea0ca62/models/729a6f557d@9bff3c6f1f'
 
     // BREPs as display values
     // 'https://latest.speckle.systems/projects/126cd4b7bb/models/b613d77690@046b56bf12'
 
     // 'https://app.speckle.systems/projects/00a5c443d6/models/de56edf901'
 
-    'https://app.speckle.systems/projects/6cf358a40e/models/e01ffbc891@f1ddc19011'
+    // 'https://app.speckle.systems/projects/6cf358a40e/models/e01ffbc891@f1ddc19011'
   )
 }