From fdd03ef821ee3160cc699a7b4eeff24745559cdc Mon Sep 17 00:00:00 2001 From: AlexandruPopovici Date: Mon, 18 Jul 2022 17:00:01 +0300 Subject: [PATCH] #828[Debt] Added support for vertex colors on meshes that specify it --- packages/viewer-sandbox/src/main.ts | 4 +--- .../viewer/src/modules/batching/Batcher.ts | 2 +- .../viewer/src/modules/batching/MeshBatch.ts | 21 ++++++++++++------- .../viewer/src/modules/materials/Materials.ts | 17 +++++++++++++-- .../materials/SpeckleLambertMaterial.ts | 8 +++---- .../materials/SpeckleLineBasicMaterial.ts | 8 +++---- .../materials/shaders/speckle-lambert-frag.ts | 2 +- .../materials/shaders/speckle-lambert-vert.ts | 2 +- .../shaders/speckle-line-basic-frag.ts | 2 +- .../shaders/speckle-line-basic-vert.ts | 2 +- .../viewer/src/modules/tree/NodeRenderView.ts | 6 +++++- 11 files changed, 47 insertions(+), 27 deletions(-) diff --git a/packages/viewer-sandbox/src/main.ts b/packages/viewer-sandbox/src/main.ts index 0750ac923..fc3f2569d 100644 --- a/packages/viewer-sandbox/src/main.ts +++ b/packages/viewer-sandbox/src/main.ts @@ -39,6 +39,4 @@ sandbox.makeGenericUI() 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' -) +sandbox.loadUrl('https://latest.speckle.dev/streams/92b620fb17/commits/d994c76165') diff --git a/packages/viewer/src/modules/batching/Batcher.ts b/packages/viewer/src/modules/batching/Batcher.ts index 50bfd71c8..f0518e743 100644 --- a/packages/viewer/src/modules/batching/Batcher.ts +++ b/packages/viewer/src/modules/batching/Batcher.ts @@ -145,7 +145,7 @@ export default class Batcher { /** Conveniece method. This should also work as a filtering action * Though, because the batches are not smart enough yet to group * their draw ranges, it would be currently be inneficient to isolate - * via filtering. Thid will change in the future + * via filtering. This will change in the future */ public isolateRenderView(id: string) { const rvs = WorldTree.getRenderTree().getRenderViewsForNodeId(id) diff --git a/packages/viewer/src/modules/batching/MeshBatch.ts b/packages/viewer/src/modules/batching/MeshBatch.ts index 8769da215..021b6e031 100644 --- a/packages/viewer/src/modules/batching/MeshBatch.ts +++ b/packages/viewer/src/modules/batching/MeshBatch.ts @@ -193,6 +193,8 @@ export default class MeshBatch implements Batch { ).length const indices = new Uint32Array(indicesCount) const position = new Float32Array(attributeCount) + const color = new Float32Array(this.batchMaterial.vertexColors ? attributeCount : 0) + color.fill(1) let offset = 0 let arrayOffset = 0 for (let k = 0; k < this.renderViews.length; k++) { @@ -202,6 +204,7 @@ export default class MeshBatch implements Batch { arrayOffset ) position.set(geometry.attributes.POSITION, offset) + if (geometry.attributes.COLOR) color.set(geometry.attributes.COLOR, offset) this.renderViews[k].setBatchData( this.id, arrayOffset, @@ -211,7 +214,11 @@ export default class MeshBatch implements Batch { offset += geometry.attributes.POSITION.length arrayOffset += geometry.attributes.INDEX.length } - this.makeMeshGeometry(indices, position) + this.makeMeshGeometry( + indices, + position, + this.batchMaterial.vertexColors ? color : null + ) this.mesh = new Mesh(this.geometry, this.batchMaterial) this.mesh.uuid = this.id } @@ -232,7 +239,8 @@ export default class MeshBatch implements Batch { */ private makeMeshGeometry( indices: Uint32Array | Uint16Array, - position: Float32Array + position: Float32Array, + color?: Float32Array ): BufferGeometry { this.geometry = new BufferGeometry() if (position.length >= 65535 || indices.length >= 65535) { @@ -245,12 +253,9 @@ export default class MeshBatch implements Batch { this.geometry.setAttribute('position', new Float32BufferAttribute(position, 3)) } - // if (geometryData.attributes.COLOR) { - // this.bufferGeometry.setAttribute( - // 'color', - // new Float32BufferAttribute(geometryData.attributes.COLOR, 3) - // ) - // } + if (color) { + this.geometry.setAttribute('color', new Float32BufferAttribute(color, 3)) + } this.geometry.computeVertexNormals() this.geometry.computeBoundingSphere() diff --git a/packages/viewer/src/modules/materials/Materials.ts b/packages/viewer/src/modules/materials/Materials.ts index f608f1d79..aaa1b464a 100644 --- a/packages/viewer/src/modules/materials/Materials.ts +++ b/packages/viewer/src/modules/materials/Materials.ts @@ -152,7 +152,20 @@ export default class Materials { emissive: 0x0, roughness: 1, metalness: 0, - side: DoubleSide // TBD + side: DoubleSide // TBD, + // clippingPlanes: this.viewer.sectionBox.planes + }, + ['USE_RTE'] + ) + this.materialMap[NodeRenderView.NullRenderMaterialVertexColorsHash] = + new SpeckleStandardMaterial( + { + color: 0x7f7f7f, + emissive: 0x0, + roughness: 1, + metalness: 0, + side: DoubleSide, // TBD + vertexColors: true // clippingPlanes: this.viewer.sectionBox.planes }, ['USE_RTE'] @@ -239,7 +252,7 @@ export default class Materials { ): Material { // console.log(this.materialMap) if (this.materialMap[hash]) { - console.warn(`Duplicate material hash found: ${hash}`) + // console.warn(`Duplicate material hash found: ${hash}`) return this.materialMap[hash] } diff --git a/packages/viewer/src/modules/materials/SpeckleLambertMaterial.ts b/packages/viewer/src/modules/materials/SpeckleLambertMaterial.ts index 587f56543..b9a83ff8f 100644 --- a/packages/viewer/src/modules/materials/SpeckleLambertMaterial.ts +++ b/packages/viewer/src/modules/materials/SpeckleLambertMaterial.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable camelcase */ -import { speckle_lambert_vert } from './shaders/speckle-lambert-vert' -import { speckle_lambert_frag } from './shaders/speckle-lambert-frag' +import { speckleLambertVert } from './shaders/speckle-lambert-vert' +import { speckleLambertFrag } from './shaders/speckle-lambert-frag' import { UniformsUtils, ShaderLib, Vector3, MeshLambertMaterial } from 'three' import { Matrix4 } from 'three' import { Geometry } from '../converter/Geometry' @@ -22,8 +22,8 @@ class SpeckleLambertMaterial extends MeshLambertMaterial { this.userData.uViewer_low = { value: new Vector3() } - ;(this as any).vertProgram = speckle_lambert_vert - ;(this as any).fragProgram = speckle_lambert_frag + ;(this as any).vertProgram = speckleLambertVert + ;(this as any).fragProgram = speckleLambertFrag ;(this as any).uniforms = UniformsUtils.merge([ ShaderLib.standard.uniforms, { diff --git a/packages/viewer/src/modules/materials/SpeckleLineBasicMaterial.ts b/packages/viewer/src/modules/materials/SpeckleLineBasicMaterial.ts index a0ca84e6d..2b65647f1 100644 --- a/packages/viewer/src/modules/materials/SpeckleLineBasicMaterial.ts +++ b/packages/viewer/src/modules/materials/SpeckleLineBasicMaterial.ts @@ -1,8 +1,8 @@ /* eslint-disable @typescript-eslint/no-unused-vars */ /* eslint-disable @typescript-eslint/no-explicit-any */ /* eslint-disable camelcase */ -import { speckle_line_basic_vert } from './shaders/speckle-line-basic-vert' -import { speckle_line_basic_frag } from './shaders/speckle-line-basic-frag' +import { speckleLineBasicVert } from './shaders/speckle-line-basic-vert' +import { speckleLineBasicFrag } from './shaders/speckle-line-basic-frag' import { UniformsUtils, ShaderLib, Vector3, LineBasicMaterial } from 'three' import { Matrix4 } from 'three' import { Geometry } from '../converter/Geometry' @@ -22,8 +22,8 @@ class SpeckleLineBasicMaterial extends LineBasicMaterial { this.userData.uViewer_low = { value: new Vector3() } - ;(this as any).vertProgram = speckle_line_basic_vert - ;(this as any).fragProgram = speckle_line_basic_frag + ;(this as any).vertProgram = speckleLineBasicVert + ;(this as any).fragProgram = speckleLineBasicFrag ;(this as any).uniforms = UniformsUtils.merge([ ShaderLib.line.uniforms, { diff --git a/packages/viewer/src/modules/materials/shaders/speckle-lambert-frag.ts b/packages/viewer/src/modules/materials/shaders/speckle-lambert-frag.ts index 915eeea97..c8da903b0 100644 --- a/packages/viewer/src/modules/materials/shaders/speckle-lambert-frag.ts +++ b/packages/viewer/src/modules/materials/shaders/speckle-lambert-frag.ts @@ -1,4 +1,4 @@ -export const speckle_lambert_frag = /* glsl */ ` +export const speckleLambertFrag = /* glsl */ ` uniform vec3 diffuse; uniform vec3 emissive; uniform float opacity; diff --git a/packages/viewer/src/modules/materials/shaders/speckle-lambert-vert.ts b/packages/viewer/src/modules/materials/shaders/speckle-lambert-vert.ts index dda3042be..302c7ac82 100644 --- a/packages/viewer/src/modules/materials/shaders/speckle-lambert-vert.ts +++ b/packages/viewer/src/modules/materials/shaders/speckle-lambert-vert.ts @@ -1,4 +1,4 @@ -export const speckle_lambert_vert = /* glsl */ ` +export const speckleLambertVert = /* glsl */ ` #define LAMBERT #ifdef USE_RTE attribute vec3 position_high; diff --git a/packages/viewer/src/modules/materials/shaders/speckle-line-basic-frag.ts b/packages/viewer/src/modules/materials/shaders/speckle-line-basic-frag.ts index c5e9ce589..2f60d27bc 100644 --- a/packages/viewer/src/modules/materials/shaders/speckle-line-basic-frag.ts +++ b/packages/viewer/src/modules/materials/shaders/speckle-line-basic-frag.ts @@ -1,4 +1,4 @@ -export const speckle_line_basic_frag = /* glsl */ ` +export const speckleLineBasicFrag = /* glsl */ ` uniform vec3 diffuse; uniform float opacity; #ifndef FLAT_SHADED diff --git a/packages/viewer/src/modules/materials/shaders/speckle-line-basic-vert.ts b/packages/viewer/src/modules/materials/shaders/speckle-line-basic-vert.ts index 1be91bd33..e3284916c 100644 --- a/packages/viewer/src/modules/materials/shaders/speckle-line-basic-vert.ts +++ b/packages/viewer/src/modules/materials/shaders/speckle-line-basic-vert.ts @@ -1,4 +1,4 @@ -export const speckle_line_basic_vert = /* glsl */ ` +export const speckleLineBasicVert = /* glsl */ ` #include #include #include diff --git a/packages/viewer/src/modules/tree/NodeRenderView.ts b/packages/viewer/src/modules/tree/NodeRenderView.ts index 0f5c3c2ed..95574b5f0 100644 --- a/packages/viewer/src/modules/tree/NodeRenderView.ts +++ b/packages/viewer/src/modules/tree/NodeRenderView.ts @@ -37,6 +37,9 @@ export class NodeRenderView { public static readonly NullRenderMaterialHash = this.hashCode( GeometryType.MESH.toString() ) + public static readonly NullRenderMaterialVertexColorsHash = this.hashCode( + GeometryType.MESH.toString() + 'vertexColors' + ) public static readonly NullDisplayStyleHash = this.hashCode( GeometryType.LINE.toString() ) @@ -159,7 +162,8 @@ export class NodeRenderView { this.geometryType !== GeometryType.POINT ? this.displayStyleToString() : '' - const s = this.geometryType.toString() + mat + const geometry = this.renderData.geometry.attributes.COLOR ? 'vertexColors' : '' + const s = this.geometryType.toString() + geometry + mat return NodeRenderView.hashCode(s) } }