TRIANGLE_FAN not behaving as expected on WEBGL

[wagedu]

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

Snippet:

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();
}

[davepagurek]

Good catch! We don't handle this case yet, I'll add it in.

[wagedu]

Good catch! We don't handle this case yet, I'll add it in.

Then... how is cone() built? I assumed it was two TRIANGLE_FAN sharing all points but the centers... I'm really interested :)
Thanks!

[davepagurek]

@wagedu Cones and cylinders both use a function to create truncated cones: https://github.com/processing/p5.js/blob/v1.5.0/src/webgl/3d_primitives.js#L317

Cone/cylinder are also using the retained mode renderer for efficiency, meaning they're p5.Geometry under the hood rather than beginShape(TRIANGLE_FAN) (currently there isn't a way in p5 to use that to create p5.Geometry. For now 🙂)