feat(Lines): alpha support for line color (pmndrs#335)

Author: CodyJasonBennett

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
   }

src/lines/LineMaterial.js

@@ -36,7 +36,6 @@ class LineMaterial extends ShaderMaterial {
 
       vertexShader: /* glsl */ `
 				#include <common>
-				#include <color_pars_vertex>
 				#include <fog_pars_vertex>
 				#include <logdepthbuf_pars_vertex>
 				#include <clipping_planes_pars_vertex>
@@ -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 <common>
-				#include <color_pars_fragment>
 				#include <fog_pars_fragment>
 				#include <logdepthbuf_pars_fragment>
 				#include <clipping_planes_pars_fragment>
 
+				#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 <logdepthbuf_fragment>
-					#include <color_fragment>
 
-					gl_FragColor = vec4( diffuseColor.rgb, alpha );
+					gl_FragColor = diffuseColor;
 
 					#include <tonemapping_fragment>
 					#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,

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
 }

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
   }