# Custom shape creates negative space when overlapping itself in WebGL mode

**URL:** https://discourse.processing.org/t/custom-shape-creates-negative-space-when-overlapping-itself-in-webgl-mode/37262
**Category:** Coding Questions
**Created:** [June 1, 2022, 2:27am UTC](https://discourse.processing.org/t/custom-shape-creates-negative-space-when-overlapping-itself-in-webgl-mode/37262 "2022-06-01T02:27:55Z")
**Posts on this page:** 2
**Page:** 1

<div class="post-metadata">

### Author: ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)
#### Post date: [June 1, 2022, 2:27am UTC](https://discourse.processing.org/t/custom-shape-creates-negative-space-when-overlapping-itself-in-webgl-mode/37262/1 "2022-06-01T02:27:55Z")

</div>

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

```auto
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)

```auto
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.

---

<div class="post-metadata">

### Author: ![neel](https://avatars.discourse-cdn.com/v4/letter/n/f475e1/32.png) [@neel](https://discourse.processing.org/u/neel)
#### Post date: [June 15, 2022, 11:22pm UTC](https://discourse.processing.org/t/custom-shape-creates-negative-space-when-overlapping-itself-in-webgl-mode/37262/2 "2022-06-15T23:22:46Z")

</div>

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