Modify the shader so that the line can be colored per vertex

src/webgl/p5.Geometry.js

@@ -45,6 +45,7 @@ p5.Geometry = function(detailX, detailY, callback) {
   //based on faces for most objects;
   this.edges = [];
   this.vertexColors = [];
+  this.lineVertexColors = [];
   this.detailX = detailX !== undefined ? detailX : 1;
   this.detailY = detailY !== undefined ? detailY : 1;
   this.dirtyFlags = {};
@@ -62,6 +63,7 @@ p5.Geometry.prototype.reset = function() {
   this.vertices.length = 0;
   this.edges.length = 0;
   this.vertexColors.length = 0;
+  this.lineVertexColors.length = 0;
   this.vertexNormals.length = 0;
   this.uvs.length = 0;
 
@@ -238,12 +240,16 @@ p5.Geometry.prototype._makeTriangleEdges = function() {
  * @chainable
  */
 p5.Geometry.prototype._edgesToVertices = function() {
+  const data = this.lineVertexColors.slice();
+  this.lineVertexColors.length = 0;
   this.lineVertices.length = 0;
   this.lineNormals.length = 0;
 
   for (let i = 0; i < this.edges.length; i++) {
-    const begin = this.vertices[this.edges[i][0]];
-    const end = this.vertices[this.edges[i][1]];
+    const e0 = this.edges[i][0];
+    const e1 = this.edges[i][1];
+    var begin = this.vertices[e0];
+    var end = this.vertices[e1];
     const dir = end
       .copy()
       .sub(begin)
@@ -260,6 +266,13 @@ p5.Geometry.prototype._edgesToVertices = function() {
     dirSub.push(-1);
     this.lineNormals.push(dirAdd, dirSub, dirAdd, dirAdd, dirSub, dirSub);
     this.lineVertices.push(a, b, c, c, b, d);
+    if(data.length > 0){
+      var beginColor = [data[4*e0], data[4*e0+1], data[4*e0+2], data[4*e0+3]];
+      var endColor = [data[4*e1], data[4*e1+1], data[4*e1+2], data[4*e1+3]];
+      this.lineVertexColors.push(
+        beginColor, beginColor, endColor, endColor, beginColor, endColor
+      );
+    }
   }
   return this;
 };

src/webgl/p5.RendererGL.Immediate.js

@@ -109,6 +109,13 @@ p5.RendererGL.prototype.vertex = function(x, y) {
     vertexColor[2],
     vertexColor[3]
   );
+  var lineVertexColor = this.curStrokeColor || [0.5, 0.5, 0.5, 1];
+  this.immediateMode.geometry.lineVertexColors.push(
+    lineVertexColor[0],
+    lineVertexColor[1],
+    lineVertexColor[2],
+    lineVertexColor[3]
+  );
 
   if (this.textureMode === constants.IMAGE) {
     if (this._tex !== null) {
@@ -405,6 +412,8 @@ p5.RendererGL.prototype._drawImmediateFill = function() {
 p5.RendererGL.prototype._drawImmediateStroke = function() {
   const gl = this.GL;
   const shader = this._getImmediateStrokeShader();
+  this._useLineColor =
+    (this.immediateMode.geometry.lineVertexColors.length > 0);
   this._setStrokeUniforms(shader);
   for (const buff of this.immediateMode.buffers.stroke) {
     buff._prepareBuffer(this.immediateMode.geometry, shader);

src/webgl/p5.RendererGL.Retained.js

@@ -119,6 +119,7 @@ p5.RendererGL.prototype.drawBuffers = function(gId) {
 
   if (this._doStroke && geometry.lineVertexCount > 0) {
     const strokeShader = this._getRetainedStrokeShader();
+    this._useLineColor = (geometry.model.lineVertexColors.length > 0);
     this._setStrokeUniforms(strokeShader);
     for (const buff of this.retainedMode.buffers.stroke) {
       buff._prepareBuffer(geometry, strokeShader);

src/webgl/p5.RendererGL.js

@@ -110,6 +110,8 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
   this._useNormalMaterial = false;
   this._useShininess = 1;
 
+  this._useLineColor = false;
+
   this._tint = [255, 255, 255, 255];
 
   // lightFalloff variables
@@ -149,6 +151,7 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
     geometry: {},
     buffers: {
       stroke: [
+        new p5.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', this, this._flatten),
         new p5.RenderBuffer(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten),
         new p5.RenderBuffer(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten)
       ],
@@ -184,6 +187,7 @@ p5.RendererGL = function(elt, pInst, isMainCanvas, attr) {
         new p5.RenderBuffer(2, 'uvs', 'uvBuffer', 'aTexCoord', this, this._flatten)
       ],
       stroke: [
+        new p5.RenderBuffer(4, 'lineVertexColors', 'lineColorBuffer', 'aVertexColor', this, this._flatten),
         new p5.RenderBuffer(3, 'lineVertices', 'lineVertexBuffer', 'aPosition', this, this._flatten),
         new p5.RenderBuffer(4, 'lineNormals', 'lineNormalBuffer', 'aDirection', this, this._flatten)
       ],
@@ -1257,6 +1261,7 @@ p5.RendererGL.prototype._setStrokeUniforms = function(strokeShader) {
   strokeShader.bindShader();
 
   // set the uniform values
+  strokeShader.setUniform('uUseLineColor', this._useLineColor);
   strokeShader.setUniform('uMaterialColor', this.curStrokeColor);
   strokeShader.setUniform('uStrokeWeight', this.curStrokeWeight);
 };

src/webgl/shaders/line.frag

@@ -1,8 +1,11 @@
 precision mediump float;
 precision mediump int;
 
+varying vec4 vColor;
+
+uniform bool uUseLineColor;
 uniform vec4 uMaterialColor;
 
 void main() {
-  gl_FragColor = uMaterialColor;
-}
+  gl_FragColor = (uUseLineColor ? vColor : uMaterialColor);
+}

src/webgl/shaders/line.vert

@@ -27,7 +27,10 @@ uniform int uPerspective;
 
 attribute vec4 aPosition;
 attribute vec4 aDirection;
-
+attribute vec4 aVertexColor;
+
+varying vec4 vColor;
+
 void main() {
   // using a scale <1 moves the lines towards the camera
   // in order to prevent popping effects due to half of
@@ -94,4 +97,6 @@ void main() {
 
   gl_Position.xy = p.xy + offset.xy * curPerspScale;
   gl_Position.zw = p.zw;
+
+  vColor = aVertexColor;
 }