Custom shape creates negative space when overlapping itself in WebGL mode

p5.js Coding Questions
1

I’ve got a script that I’m trying to port from 2d mode to webgl mode, but the shapes are not behaving as expected. The following isn’t my script, but it’s a demonstration of the problem I run into. When I create a custom shape, and that shape overlaps with itself, the area with the overlap ends up not getting filled at all.

Here’s the WEBGL version

let vertices = [[71,92],[275,271],[145,259],[309,113],[265,64],[57,263],[369,334],[128,77]];
function setup() {
  createCanvas(400, 400,WEBGL);
}

function draw() {
  translate(-width/2,-height/2)
  background(0);
  noFill();
  stroke(255);
  fill(255);
  beginShape(TESS);
  for (let i = 0; i < vertices.length; i++) {
    vertex(vertices[i][0],vertices[i][1],0.);
  }
  endShape(CLOSE);
  
}

And here’s the 2d version (only differences are the canvas type and the translate. presented for ease of diagnosis)

let vertices = [[71,92],[275,271],[145,259],[309,113],[265,64],[57,263],[369,334],[128,77]];
function setup() {
  createCanvas(400, 400);
}

function draw() {
  // translate(-width/2,-height/2)
  background(0);
  noFill();
  stroke(255);
  fill(255);
  beginShape(TESS);
  for (let i = 0; i < vertices.length; i++) {
    vertex(vertices[i][0],vertices[i][1],0.);
  }
  endShape(CLOSE);
  
}

Anybody know what’s going on here? I might have to try out three.js if I can’t figure this out.

2

Bumping this in case anyone has any thoughts. It’s a tricky one.