Shapes with 3 vertices in webgl mode are always closed

[franolichdesign]

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

1.11.1

Web browser and version

Firefox 132.0.2 / Edge 130.0.2849.80

Operating system

Windows 11 Home / Pro

Steps to reproduce this

Steps:

1.Run the following code (p5 editor). The triangle at the top-left of the canvas should be an L-shaped corner but has been closed even though endShape() is called without the CLOSE constant.
2.To see the desired result, change the value of the webgl variable in line 1 to false and run the code again.

Snippet:

let webgl = true;

function setup() {
  if (webgl) {
    createCanvas(400, 400, WEBGL);
  } else {
    createCanvas(400, 400);
  }
  
  background(220);  
  stroke(0);
  strokeWeight(5);
  noFill();

  let offset = (webgl ? -100 : 100);
  translate(offset, offset);
  beginShape();
  vertex(100, 0, 0);
  vertex(0, 0, 0);
  vertex(0, 100, 0);
  endShape();
  
  translate(100, 100);
  beginShape();
  vertex(100, 0, 0);
  vertex(0, 0, 0);
  vertex(0, 100, 0);
  vertex(100, 100, 0);
  endShape();
}

[rishabhs-rizz]

hey, i would like to work on this issue. As I am a newcomer in the open source, i will try to get a boost in my confidence by solving this issue.

[franolichdesign]

Hi! Thanks for taking a look at this. Unfortunately I do not have permission to assign the issue on GitHub. As a p5/GitHub noob I'm not sure how to proceed so I'll follow your suggestions. Cheers, Fran EDIT - I only glanced at your reply to this issue as I read your reply to my other issue first. So I missed the fact that you too are new to making contributions to open source projects. When I have a moment, I could try to find out what to do but do feel free to tell me how to proceed if you find out first. I have been getting a lot of confidence from my first project using p5 and I hope you do too.

…

On Tue, 26 Nov 2024 at 10:40, rishabhs-rizz ***@***.***> wrote: hey, i would like to work on this issue. As I am a newcomer in the open source, i will try to get a boost in my confidence by solving this issue.

[franolichdesign]

@rishabhs-rizz - The help page Assigning issues and pull requests to other GitHub users states that "Anyone with write access to a repository can assign issues and pull requests." ie not me! I guess we'll just have to wait for for a project maintainer to look at the issue.

[davepagurek]

Thanks for noticing this issue! So the problematic code is also a piece that is being currently refactored for the upcoming 2.0 release, the code for which is on the dev-2.0 branch. It's a little harder to contribute to that, but if you're up to it, you could make a fork off of that branch and make a PR into that branch.

The offending code, I think, is this bit here, that converts to TRIANGLES mode if there are just 3 points for the sake of speed:

p5.js/src/webgl/ShapeBuilder.js

Lines 69 to 76 in be504ea

	// When we are drawing a shape then the shape mode is TESS,
	// but in case of triangle we can skip the breaking into small triangle
	// this can optimize performance by skipping the step of breaking it into triangles
	if (this.geometry.vertices.length === 3 &&
	this.shapeMode === constants.TESS
	) {
	this.shapeMode === constants.TRIANGLES;
	}

We maybe just need to add an extra condition to this if statement to only do this optimization if endShape has been called with CLOSE.

If you're up for that @rishabhs-rizz, I can assign this to you!

[rishabhs-rizz]

I am totally up for this, it will surely take some time but i assure you I'll solve it. @davepagurek

[davepagurek]

Awesome, thanks! I'll assign this to you.