[p5.js 2.0 Bug Report]: buildGeometry isn't saving per-vertex stroke colors

[davepagurek]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.0.2

Web browser and version

Firefox

Operating system

MacOS

Steps to reproduce this

Steps:

1. In buildGeometry, draw a shape with per-vertex stroke colors
2. Draw the geometry
3. The stroke colors do not show up

The stroke vertex colors property of the geometry is an empty array, so it seems it's not getting created. Not sure if this is related or just a documentation/FES bug, but it also logs this message:

Expected number at the first parameter, but received null in color().

Snippet:

let geom

function setup() {
  createCanvas(400, 400, WEBGL);
  angleMode(DEGREES)
  
  strokeWeight(5)
  noFill()
  randomSeed(5)
  geom = buildGeometry(() => {
    // *** remove/replace POINTS and works as expected
    beginShape(LINES) // LINES or TRIANGLES or empty works fine
    for(let i=0; i < 50; i++){
      //push()
      stroke(random(255), random(255), random(255))
      let x = random(-width/2, width/2)
      let y = random(-width/2, width/2)
      let z = random(-width/2, width/2)
      vertex(x, y, z)
      vertex(x, y, z+10)
      //pop()
    }
    endShape()
  })
}

function draw() {
  background(0);
  orbitControl(3)
  rotateY(frameCount/3)
  
  strokeWeight(5)
  // stroke(255) // uncomment to show points
  model(geom)
}

Live: https://editor.p5js.org/davepagurek/sketches/uEPGri4DK

[Vaivaswat2244]

Hey @davepagurek,
I was investigating the issue and I had some questions regarding the issue,

• Is per-vertex stroke color support intentionally missing from buildGeometry or is this a known limitation?

• Are there existing arrays or mechanisms in the underlying WebGL renderer for storing per-vertex stroke colors that might be unpopulated or skipped during geometry building... cuz I wasn't able to find much for stroke colors in the p5.geometry and geometrybuilder classes

Just trying to understand if this is a gap in implementation or a broader design constraint within the WebGL mode.

[davepagurek]

Is per-vertex stroke color support intentionally missing from buildGeometry or is this a known limitation?

Not intentionally, I think it was just overlooked. The per-vertex fills are currently added here and we'd have to do something similar for per-vertex stroke colors:

p5.js/src/webgl/GeometryBuilder.js

Lines 100 to 103 in d51184b

	const vertexColors = [...input.vertexColors];
	while (vertexColors.length < input.vertices.length * 4) {
	vertexColors.push(...this.renderer.states.curFillColor);
	}

Are there existing arrays or mechanisms in the underlying WebGL renderer for storing per-vertex stroke colors that might be unpopulated or skipped during geometry building... cuz I wasn't able to find much for stroke colors in the p5.geometry and geometrybuilder classes

GeometryBuilder mostly just wraps p5.Geometry. In that class, the vertexColors property stores per-vertex fill colors, and vertexStrokeColors stores per-vertex stroke colors:

p5.js/src/webgl/p5.Geometry.js

Lines 48 to 51 in d51184b

	this.vertexColors = [];
	// One color per vertex representing the stroke color at that vertex
	this.vertexStrokeColors = [];

In terms of what to expect when debugging, both of those arrays could be empty if there are no per-vertex colors at all, or it could be a flattened array of color channel values (the comment in p5.Geometry seems to be out of date -- it's not one color entry per vertex, it's four number entries per vertex, representing r, g, b, a). If a color in the array is -1, -1, -1, -1, that's an indication that we should fall back to the global fill color, so that a single p5.Geometry can have some per-vertex colors and other bits that do not have a color bound to them.

[Vaivaswat2244]

Thanks @davepagurek, Got it. I've raised a pr for this which populates the vertexStrokecolor