# TRIANGLE\_FAN not behaving as expected on WEBGL?

**URL:** <https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180>\
**Category:** p5.js\
**Created:** [December 15, 2022, 10:58pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180 "2022-12-15T22:58:01Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![wageDu](https://avatars.discourse-cdn.com/v4/letter/w/5f8ce5/32.png) [@wageDu](https://discourse.processing.org/u/wageDu)\
**Post date:** [December 15, 2022, 10:58pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/1 "2022-12-15T22:58:02Z")

</div>

Hi all,  
I just noticed that when trying to draw a Triangle Fan on WEBGL, I don’t get the expected behavior ie. ALL lines stroked.  
On WEBGL only the outlines + last radial line (point1 to center) appear stroked, while all the other radial lines disappear(!?)

Is it a problem w/stroking or actually the way the triangles are built?

Thanks in advance

(I used the default reference code for clarity. Just comment/uncomment 2nd line to see)

![Screen Shot 2022-12-15 at 19.53.36](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/4/f/4feb4dccc8566696ecae972a1a02b75196d8aa8c.png)  
 ![Screen Shot 2022-12-15 at 20.20.49](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/a/b/ab5824beb92e33b78adabe759d5435ae09bee139.png)

```auto
let Webgl = true
// Webgl = false //uncomment to see difference

function setup() {
  if (Webgl){
    createCanvas(400, 400, WEBGL);
  } else {
    createCanvas(400, 400);
  }
}

function draw() {
  if (Webgl){
    orbitControl();
  } else {
    translate(width/2, height/2)
  }
  
  background(220);
  beginShape(TRIANGLE_FAN);
  vertex(57.5, 50, 0);
  vertex(57.5, 15, 0);
  vertex(92, 50, 0);
  vertex(57.5, 85, 0);
  vertex(22, 50, 0);
  vertex(57.5, 15, 0);
  endShape();
}

```

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 16, 2022, 9:06am UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/2 "2022-12-16T09:06:53Z")

</div>

Hi @wageDu,

Thanks for reporting that! 😉

From what I saw on previous issues, it may be related to how p5.js handles vertices and edges in WebGL:

> <https://github.com/processing/p5.js/issues/3672>
>
> \<!--
> Hi there! 
> 
> PLEASE NOTE: The github issues are for bugs and feature requ…ests for the p5.js library itself. If you have a general question or bug programming with p5.js please post it in the p5.js forum: https://discourse.processing.org
> 
> To check any option, replace the "\[\]" with a "\[x\]". Be sure to check out how it looks in the Preview tab! Feel free to remove any portion of the template that is not relevant for your issue.
> \--\>
> 
> \#### Nature of issue?
> 
> \- \[x \] Found a bug
> \- \[\] Existing feature enhancement
> \- \[\] New feature request
> 
> \#### Most appropriate sub-area of p5.js?
> 
> \- \[\] Color
> \- \[\] Core/Environment/Rendering
> \- \[\] Data
> \- \[\] Events
> \- \[\] Image
> \- \[\] IO
> \- \[\] Math
> \- \[\] Typography
> \- \[\] Utilities
> \- \[x\] WebGL
> \- \[\] Other (specify if possible)
> 
> \#### Which platform were you using when you encountered this?
> 
> \- \[x \] Mobile/Tablet (touch devices)
> \- \[x \] Desktop/Laptop
> \- \[\] Others (specify if possible)
> 
> \#### Details about the bug: 
> 
> \- p5.js version 0.7.3: 
> \- Steps to reproduce this:
> 
> 
> \*\*Here is a minimal working example\*\*. It should draw the letter C (works in 2D), but in WEBGL it creates a strange fill from the lower extremity of the C letter to the origin (top left of the letter).
> An example can be seen in \<https://codepen.io/sixhat/pen/NmNgLj\>
> 
> \<img width="346" alt="p5-webgl-bug-fill" src="https://user-images.githubusercontent.com/614881/55618773-373a0580-578f-11e9-9126-27b137dbc7ca.png"\>
> 
> 
> \`\`\`javascript
> let points;
> function setup(){
> createCanvas(innerWidth, innerHeight, WEBGL);
> points = \[
> {x: 0, y:0},
> {x: 4, y:0},
> {x: 4, y:1},
> {x: 1, y:1},
> {x: 1, y:2},
> {x: 4, y:2},
> {x: 4, y:3},
> {x: 0, y:3},
> \];
> }
> 
> function draw(){
> background("gray");
> 
> beginShape()
> for(let p of points){
> vertex(p.x\*30,p.y\*30, 0);
> } 
> endShape(CLOSE)
> }
> \`\`\`
> 
> 
> \#### Feature enhancement details:
> 
> 
> 
> \#### New feature details:

> <https://github.com/processing/p5.js/issues/2344>
>
> \#### Nature of issue?
> 
> \- \[X\] Found a bug
> 
> \#### Most appropriate sub-area of …p5.js?
> 
> \- \[X\] WebGL
> 
> \#### Which platform were you using when you encountered this?
> 
> \- \[X\] Desktop/Laptop
> 
> \#### Details about the bug: 
> 
> \- p5.js version: p5.js v0.5.16 October 11, 2017
> \- Web browser and version: Safari 11.0.2 
> \- Operating System: macOS High Sierra
> \- Steps to reproduce this:
> 
> Using this code:
> 
> \`\`\`javascript
> var cols, rows, w, h;
> var scl = 100;
> 
> function setup() {
> createCanvas(windowWidth, windowHeight, WEBGL);
> 
> w = windowWidth;
> h = windowHeight;
> cols = w / scl;
> rows = h / scl;
> }
> 
> function draw() {
> background(245, 244, 236);
> stroke(17, 18, 16);
> noFill();
> 
> translate(0, 600);
> rotateX(PI / 3);
> translate(-w / 2, -h / 2);
> 
> for (var y = 0; y \< 1; y++) {
> beginShape(TRIANGLE\_STRIP);
> for (var x = 0; x \< cols; x++) {
> vertex(x \* scl, y \* scl, 1);
> vertex(x \* scl, (y + 1) \* scl, 2);
> 
> }
> endShape();
> }
> }
> \`\`\`
> 
> I get this result:
> \<img width="1542" alt="screen shot 2017-11-06 at 23 05 51" src="https://user-images.githubusercontent.com/202450/32466376-1081fe8a-c347-11e7-9531-c67d6abd4c0a.png"\>
> 
> I would expect all vertices to be connected like this:
> 
> \<img width="693" alt="screen shot 2017-11-06 at 23 07 32" src="https://user-images.githubusercontent.com/202450/32466445-4ca44940-c347-11e7-9534-b7f80a8e4167.png"\>
> 
> It works like it should in 2D environment, but not when I set it to WEBGL.

And how the edges are computed:

> <https://github.com/processing/p5.js/blob/19c1c90f1407b02c1028a4c053fdaf73515ba61e/src/webgl/p5.RendererGL.Immediate.js#L243>

Maybe someone has a better understanding on the subject?

---

<div class="post-metadata">

**Author:** ![wageDu](https://avatars.discourse-cdn.com/v4/letter/w/5f8ce5/32.png) [@wageDu](https://discourse.processing.org/u/wageDu)\
**Post date:** [December 16, 2022, 2:45pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/3 "2022-12-16T14:45:09Z")

</div>

Hi @josephh and thanks for the reply.

I had a look on p5 issues (and StackO) and found nothing. But you confirmed it’s part of existing issues, not a mistake of mine so, should I open a new issue?

Thanks again! Cheers

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [December 16, 2022, 3:02pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/4 "2022-12-16T15:02:18Z")

</div>

> [@wageDu](#):
>
> I had a look on p5 issues (and StackO) and found nothing. But you confirmed it’s part of existing issues, not a mistake of mine so, should I open a new issue?

I didn’t find anything related to the specific problem you are having so I would open an issue 🤓 (except if anyone knows the reason of that behavior)

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [December 16, 2022, 3:35pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/5 "2022-12-16T15:35:38Z")

</div>

> <https://github.com/processing/p5.js/issues/5900>
>
> \### Most appropriate sub-area of p5.js?
> 
> \- \[\] Accessibility
> \- \[\] Color
> \- \[\] C…ore/Environment/Rendering
> \- \[\] Data
> \- \[\] DOM
> \- \[\] Events
> \- \[\] Image
> \- \[\] IO
> \- \[\] Math
> \- \[\] Typography
> \- \[\] Utilities
> \- \[X\] WebGL
> \- \[\] Build Process
> \- \[\] Unit Testing
> \- \[\] Internalization
> \- \[\] Friendly Errors
> \- \[\] Other (specify if possible)
> 
> \### p5.js version
> 
> 1.5.0
> 
> \### Web browser and version
> 
> Firefox 108
> 
> \### Operating System
> 
> OSX 10.15
> 
> \### Steps to reproduce this
> 
> \### Steps:
> when trying to draw a Triangle Fan on WEBGL, I don’t get the expected behavior ie. ALL lines stroked.
> On WEBGL only the outlines + last radial line (point1 to center) appear stroked, while all the other radial lines disappear(!?)
> OBS: I used P5's own reference code for clarity. Just comment/uncomment 2nd line to see the problem
> 
> !\[Screen Shot 2022-12-15 at 19 53 36\](https://user-images.githubusercontent.com/1332848/208128247-9ebec659-4412-484b-860f-f72a45226dce.png)
> !\[Screen Shot 2022-12-15 at 20 20 49\](https://user-images.githubusercontent.com/1332848/208128251-d1a2a691-274e-42be-9c31-32a4b6da4dc6.png)
> 
> 
> \### Snippet:
> 
> \`\`\`js
> 
> let Webgl = true
> // Webgl = false //uncomment to see difference
> 
> function setup() {
> if (Webgl){
> createCanvas(400, 400, WEBGL);
> } else {
> createCanvas(400, 400);
> }
> }
> 
> function draw() {
> if (Webgl){
> orbitControl();
> } else {
> translate(width/2, height/2)
> }
>   
> background(220);
> beginShape(TRIANGLE\_FAN);
> vertex(57.5, 50, 0);
> vertex(57.5, 15, 0);
> vertex(92, 50, 0);
> vertex(57.5, 85, 0);
> vertex(22, 50, 0);
> vertex(57.5, 15, 0);
> endShape();
> }
> 
> \`\`\`

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 17, 2022, 2:01pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/6 "2022-12-17T14:01:37Z")

</div>

I have experienced the same problem with TRIANGLE\_FAN and TRIANGLE\_STRIP it only seems to occur when stroke and fill are applied together.

If you use WEBGL with `stroke(...)` and `noFill()` you get an open wire frame.

---

<div class="post-metadata">

**Author:** ![wageDu](https://avatars.discourse-cdn.com/v4/letter/w/5f8ce5/32.png) [@wageDu](https://discourse.processing.org/u/wageDu)\
**Post date:** [December 17, 2022, 7:47pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/7 "2022-12-17T19:47:39Z")

</div>

I just tried in the code above( original post) and it doesn’t change a bit.  
Added stroke(0); noFill(); right below createCanvas(400,400,WEBGL)  
I also tried adding both commands right before beginShape  
still same result  
Could you share a bit of your code, please?  
Thanks a lot

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 18, 2022, 10:54am UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/8 "2022-12-18T10:54:42Z")

</div>

I owe you an apology this issue does not apply to triangle strips. I don’t have any small code examples to show you but this video shows an animated 3D model. Those areas in purple were drawn using TRIANGLE\_STRIP and the yellow areas using TRIANGLE\_FAN. You can clearly see that the triangle borders are clear when using TRIANGLE\_STRIP but not the TRIANGLE\_FAN.

When creating the video and looking at my code it dawned on me that the stroke simply links the vertices as they are processed and that for a fan there is _only one_ radial connection - that between the first vertex and the second one. So this might not be a bug it might just be the way WEBGL works.

I have added the rendering code below for the sake of completeness.

[![](https://img.youtube.com/vi/3RjA8ORUMpo/maxresdefault.jpg "WEBGL Fans and Strips") ](https://www.youtube.com/watch?v=3RjA8ORUMpo)

```auto
    /**
     * Render this model using as an open wireframe
     * @param p drawing context
     */
    renderWireframe(p = p5.instance) {
        p.push();
        let vpos = 0;
        let cfIdx = this.cFrame * this.num_xyz;
        let nfIdx = this.nFrame * this.num_xyz;
        p.noFill();
        p.stroke(0);
        p.strokeWeight(1.1);
        for (let i = 0; i < this.cmds.length; i++) {
            let cmd = this.cmds[i];
            p.beginShape(cmd < 0 ? p.TRIANGLE_FAN : p.TRIANGLE_STRIP);
            // =================================================================
            // The next line helps differentiate strips and fans
            p.fill(cmd < 0 ? p.color(255, 255, 200) : p.color(255, 200, 255));
            // =================================================================
            cmd = Math.abs(cmd);
            for (let j = 0; j < cmd; j++) {
                let gl_vertex = this.gl_verts[vpos];
                let cp = this.points[cfIdx + gl_vertex.idx];
                let np = this.points[nfIdx + gl_vertex.idx];
                let x = cp.getX() + this.interpol * (np.getX() - cp.getX());
                let y = cp.getY() + this.interpol * (np.getY() - cp.getY());
                let z = cp.getZ() + this.interpol * (np.getZ() - cp.getZ());
                p.vertex(this.scale * x, this.scale * y, this.scale * z);
                vpos++;
            }
            p.endShape();
        }
        p.pop();
    }

```

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 18, 2022, 11:30am UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/9 "2022-12-18T11:30:06Z")

</div>

Here is a workaround that uses indexed triangles with the OpenGL TRIANGLES mode.

```auto
let Webgl = true;
  // Webgl = false; //uncomment to see difference

function setup() {
  if (Webgl) {
    createCanvas(400, 400, WEBGL);
  } else {
    createCanvas(400, 400);
  }
  fan = new Array(
    createVector(57.5, 50, 0),
    createVector(57.5, 15, 0),
    createVector(92, 50, 0),
    createVector(57.5, 85, 0),
    createVector(22, 50, 0),
    createVector(57.5, 15, 0)
  );
}

function draw() {
  if (Webgl) {
    orbitControl();
  } else {
    translate(width/2, height/2)
  }
  background(220);
  drawFan(fan);
}

// Using indexed triangles instead of TRIANGLE_FAN
function drawFan(f) {
  let c = f[0];
  console.log('Length', f.length);
  beginShape(TRIANGLES);
  for (let i = 1; i < f.length - 1; i++) {
    vertex(c.x, c.y, c.z);
    vertex(f[i].x, f[i].y, f[i].z);
    vertex(f[i+1].x, f[i+1].y, f[i+1].z);
  }
  endShape(CLOSE);
}

```

---

<div class="post-metadata">

**Author:** ![wageDu](https://avatars.discourse-cdn.com/v4/letter/w/5f8ce5/32.png) [@wageDu](https://discourse.processing.org/u/wageDu)\
**Post date:** [December 18, 2022, 7:38pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/10 "2022-12-18T19:38:30Z")

</div>

Regarding the topic, there’s a workaround: using TRIANGLE\_STRIP and picking the center every 3 vertices. But that’s more of a proof of concept than a real/valid/efficient solution. Thankfully Dave has fixed it for a next release.

Now, your troglodyte/Troll… WOW! That is insane! O\_O  
👏

---

<div class="post-metadata">

**Author:** ![quark](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/quark/32/26_2.png) [@quark](https://discourse.processing.org/u/quark)\
**Post date:** [December 19, 2022, 2:57pm UTC](https://discourse.processing.org/t/triangle-fan-not-behaving-as-expected-on-webgl/40180/11 "2022-12-19T14:57:19Z")

</div>

IMPORTANT - I can’t take credit for the actual model. It is one of two models abandoned / discarded by their creator.

The creature is called an Ogro and it is stored in Quake MD2 file format. Originally a proprietary format it is now an open format. My interest started many years ago when I created a MD2 file loader in Java and a week ago I decided to create a Javascript MD2 file loader.

In the video you see a wireframe image of the Ogro but I will be publishing the skinned version of this and the second model on my website and Open Processing in the next few days. When that happens I will announce it on this forum.

Glad to know there is a fix for the next release. 😄