From 06d48dc0eebdf60b65eeceb29580837f7195bdfd Mon Sep 17 00:00:00 2001 From: Cody Bennett Date: Thu, 11 Jan 2024 17:51:09 -0600 Subject: [PATCH] feat(Lines): alpha support for line color (#335) --- src/lines/LineGeometry.js | 38 +++++++++++++++++--------- src/lines/LineMaterial.js | 41 +++++++++++++++++++++-------- src/lines/LineSegmentsGeometry.d.ts | 2 +- src/lines/LineSegmentsGeometry.js | 8 +++--- 4 files changed, 61 insertions(+), 28 deletions(-) diff --git a/src/lines/LineGeometry.js b/src/lines/LineGeometry.js index 781d32d3..47c05cfd 100644 --- a/src/lines/LineGeometry.js +++ b/src/lines/LineGeometry.js @@ -30,23 +30,37 @@ class LineGeometry extends LineSegmentsGeometry { return this } - setColors(array) { - // converts [ r1, g1, b1, r2, g2, b2, ... ] to pairs format + setColors(array, itemSize = 3) { + // converts [ r1, g1, b1, (a1), r2, g2, b2, (a2), ... ] to pairs format - const length = array.length - 3 + const length = array.length - itemSize const colors = new Float32Array(2 * length) - for (let i = 0; i < length; i += 3) { - colors[2 * i] = array[i] - colors[2 * i + 1] = array[i + 1] - colors[2 * i + 2] = array[i + 2] - - colors[2 * i + 3] = array[i + 3] - colors[2 * i + 4] = array[i + 4] - colors[2 * i + 5] = array[i + 5] + if (itemSize === 3) { + for (let i = 0; i < length; i += itemSize) { + colors[2 * i] = array[i] + colors[2 * i + 1] = array[i + 1] + colors[2 * i + 2] = array[i + 2] + + colors[2 * i + 3] = array[i + 3] + colors[2 * i + 4] = array[i + 4] + colors[2 * i + 5] = array[i + 5] + } + } else { + for (let i = 0; i < length; i += itemSize) { + colors[2 * i] = array[i] + colors[2 * i + 1] = array[i + 1] + colors[2 * i + 2] = array[i + 2] + colors[2 * i + 3] = array[i + 3] + + colors[2 * i + 4] = array[i + 4] + colors[2 * i + 5] = array[i + 5] + colors[2 * i + 6] = array[i + 6] + colors[2 * i + 7] = array[i + 7] + } } - super.setColors(colors) + super.setColors(colors, itemSize) return this } diff --git a/src/lines/LineMaterial.js b/src/lines/LineMaterial.js index 6799330a..064b3456 100644 --- a/src/lines/LineMaterial.js +++ b/src/lines/LineMaterial.js @@ -36,7 +36,6 @@ class LineMaterial extends ShaderMaterial { vertexShader: /* glsl */ ` #include - #include #include #include #include @@ -47,8 +46,15 @@ class LineMaterial extends ShaderMaterial { attribute vec3 instanceStart; attribute vec3 instanceEnd; - attribute vec3 instanceColorStart; - attribute vec3 instanceColorEnd; + #ifdef USE_LINE_COLOR_ALPHA + varying vec4 vLineColor; + attribute vec4 instanceColorStart; + attribute vec4 instanceColorEnd; + #else + varying vec3 vLineColor; + attribute vec3 instanceColorStart; + attribute vec3 instanceColorEnd; + #endif #ifdef WORLD_UNITS @@ -94,11 +100,7 @@ class LineMaterial extends ShaderMaterial { void main() { - #ifdef USE_COLOR - - vColor.xyz = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd; - - #endif + vLineColor = ( position.y < 0.5 ) ? instanceColorStart : instanceColorEnd; #ifdef USE_DASH @@ -297,11 +299,16 @@ class LineMaterial extends ShaderMaterial { #endif #include - #include #include #include #include + #ifdef USE_LINE_COLOR_ALPHA + varying vec4 vLineColor; + #else + varying vec3 vLineColor; + #endif + vec2 closestLineToLine(vec3 p1, vec3 p2, vec3 p3, vec3 p4) { float mua; @@ -410,11 +417,15 @@ class LineMaterial extends ShaderMaterial { #endif vec4 diffuseColor = vec4( diffuse, alpha ); + #ifdef USE_LINE_COLOR_ALPHA + diffuseColor *= vLineColor; + #else + diffuseColor.rgb *= vLineColor; + #endif #include - #include - gl_FragColor = vec4( diffuseColor.rgb, alpha ); + gl_FragColor = diffuseColor; #include #include <${parseInt(REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}> @@ -428,6 +439,14 @@ class LineMaterial extends ShaderMaterial { this.isLineMaterial = true + this.onBeforeCompile = function () { + if (this.transparent) { + this.defines.USE_LINE_COLOR_ALPHA = '1' + } else { + delete this.defines.USE_LINE_COLOR_ALPHA + } + } + Object.defineProperties(this, { color: { enumerable: true, diff --git a/src/lines/LineSegmentsGeometry.d.ts b/src/lines/LineSegmentsGeometry.d.ts index be684821..4d3fe7e3 100644 --- a/src/lines/LineSegmentsGeometry.d.ts +++ b/src/lines/LineSegmentsGeometry.d.ts @@ -11,6 +11,6 @@ export class LineSegmentsGeometry extends InstancedBufferGeometry { fromLineSegments(lineSegments: LineSegments): this fromMesh(mesh: Mesh): this fromWireframeGeometry(geometry: WireframeGeometry): this - setColors(array: number[] | Float32Array): this + setColors(array: number[] | Float32Array, itemSize?: 3 | 4): this setPositions(array: number[] | Float32Array): this } diff --git a/src/lines/LineSegmentsGeometry.js b/src/lines/LineSegmentsGeometry.js index 1579c309..8259a0b1 100644 --- a/src/lines/LineSegmentsGeometry.js +++ b/src/lines/LineSegmentsGeometry.js @@ -74,7 +74,7 @@ class LineSegmentsGeometry extends InstancedBufferGeometry { return this } - setColors(array) { + setColors(array, itemSize = 3) { let colors if (array instanceof Float32Array) { @@ -83,10 +83,10 @@ class LineSegmentsGeometry extends InstancedBufferGeometry { colors = new Float32Array(array) } - const instanceColorBuffer = new InstancedInterleavedBuffer(colors, 6, 1) // rgb, rgb + const instanceColorBuffer = new InstancedInterleavedBuffer(colors, itemSize * 2, 1) // rgb(a), rgb(a) - this.setAttribute('instanceColorStart', new InterleavedBufferAttribute(instanceColorBuffer, 3, 0)) // rgb - this.setAttribute('instanceColorEnd', new InterleavedBufferAttribute(instanceColorBuffer, 3, 3)) // rgb + this.setAttribute('instanceColorStart', new InterleavedBufferAttribute(instanceColorBuffer, itemSize, 0)) // rgb(a) + this.setAttribute('instanceColorEnd', new InterleavedBufferAttribute(instanceColorBuffer, itemSize, 3)) // rgb(a) return this }