Vertex colors don't save in buildGeometry() with a single color, but do when multiple colors used

[ThomasLengeling]

Edit from @davepagurek:

• It is unclear how materials should work inside p5.Geometry: some material properties (vertex colors) are included (and only sometimes; they are discarded if they are all the same), and others never are (e.g. specular material)
• To fix this:
  • We should define clearly what properties are included in p5.Geometry
  • To be more consistent, we should likely include all materials or no materials, and be explicit about which
  • This probably means making a wrapper around p5.Geometry that also includes materials
  • This probably means having a method to turn the above into a materilalless p5.Geometry

Original bug report:

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
• Internalization
• Friendly Errors
• Other (specify if possible)

p5.js version

1.7.0.0

Web browser and version

Chrome

Operating System

MacOSX

Steps to reproduce this

Hi all!,

I'm using the new geometry feature from this push #6287 , However I am having problems creating geometries with transparency, I would expect that using the function fill() with alpha would generate a triangle with opacity, but the beginGeometry() and endGeometry() ignore the transparent component.
Am I doing something work?

let shape01;
let shape02;

let points = [];

function setup() {
  renderer = createCanvas(600, 600, WEBGL);
  
  points.push(new p5.Vector(-1, -1, 0));
  points.push(new p5.Vector(-1, 1, 0));
  points.push(new p5.Vector(1, -1, 0));
  points.push(new p5.Vector(-1, -1, 0));

  buildShape01();
  buildShape02();
}

function draw() {
  background(0);

  model(shape01);  
  model(shape02);
}

function buildShape01() {
  beginGeometry();
  fill(255, 0, 0, 50);
  beginShape();

  for (let vec of points) {
    vertex(vec.x*100, vec.y*100, vec.z*100);
  }
  endShape(CLOSE);
  shape01 = endGeometry();
}

function buildShape02() {
  beginGeometry();
  fill(0, 255, 0, 150);
  beginShape();
  for (let vec of points) {
    vertex(vec.x*200, vec.y*200, vec.z*200);
  }
  endShape(CLOSE);
  shape02 = endGeometry();
}

https://editor.p5js.org/thomaslengeling/sketches/a6-7PZ9IR

Many Thanks!

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

[davepagurek]

Right now, models with all the same vertex color act like there's no color applied. In your case, it's just using the default white. You can set a color in draw(): https://editor.p5js.org/davepagurek/sketches/1vhxD1HG2

This is due to these lines: https://github.com/davepagurek/p5.js/blob/a9f4eb3de4acf232106d60fafc029afa051e512a/src/webgl/GeometryBuilder.js#L133-L142

We added this because it's a bit hard to differentiate in what cases we should or should not use the geometry's existing colors vs when it should conform to the currently set material in draw. Both seem to be valid uses, so long term, we should decide on an API for that. Some questions to answer:

• Is the ability to recolor a model something that is set when building the model, or should all models be recolorable?
• Should models remember all state that was set when making them? e.g. material colors and textures?

One option could be two different ways of drawing geometry, model(someGeometry) to use the surrounding context, or materialModel(someGeometry) to use its built-in material settings. We'd probably need to make those settings editable properties.

[davepagurek]

If you don't mind, I'm going to edit this issue to make it more clear that this is a design shortcoming in how p5.Geometry handles color so we can organize and prioritize this better 🙂