Quad in WEBGL is hidden or shown with diagonal line

p5.js Coding Questions
1

In the following code, I expect to see two quads displayed on the canvas, but only the blue one shows up, and it shows up with a diagonal line between its two vertexes.

  1. How can I get rid of the diagonal line?
  2. How come the green quad doesn’t show up?

https://editor.p5js.org/yellowds/sketches/fk1xCzdzp

function setup() {
  myCanvas = createCanvas(window.innerWidth, 400, WEBGL);
}

function draw() {
  background(255);
  fill(color("blue"));
  quad(-50,-50,20,  50,-50,20,  50,50,20,  -50,50,20,  2, 2);

  fill(color("green"));
  quad(-50,-150,20,  50,-150,20,  50,-50,20,  -50,-50,20);
}
1 Like
2

This appears to be a bug in p5.js
According to the documentation the last two parameters are optional but your code works if you add them. See code below

The only way to do this is to turn off the stroke (See code below). In p5.js the quad is drawn as 2 triangles hence the diagonal line. It is not usual to draw quads in 3D because all four vertices should lie in the same plane and that can’t be guaranteed. On the other hand a triangle has three vertices and they will always be in the same plane.

function setup() {
  myCanvas = createCanvas(window.innerWidth, 400, WEBGL);
}

function draw() {
  background(255);
  noStroke();
  fill(color("blue"));
  quad(-50,-50,20,  50,-50,20,  50,50,20,  -50,50,20, 2,2);

  fill(color("green"));
  quad(-50,-150,20,  50,-150,20,  50,-50,20,  -50,-50,20, 2,2);
}
3

Thank you! May I suggest that when the four vertices happen to lie in the same plane (which you can detect), you don’t use 2 triangles but use a quadrilateral instead? Perhaps even better, don’t draw the shared edge between the 2 triangles with stroke on.

4

My understanding is that WEBGL does not support drawing quadrilaterals - you can see the drawing modes here. The quad(...) method in p5.js is a convenience method to make it easier for programmers to draw quadrilaterals in WEBGL and under the hood draws 2 triangles.

To determine whether 4 vertices lie in a plane is easy if they are axis-aligned as in your diagram (all on same z plane) but computationally expensive when not aligned.

In WEBGL either the stroke is on or off for the whole shape so to avoid the diagonal you would draw the triangles without stroke and then separately draw the 4 outside edges. Again not a good solution.

I would not recommend using stroke in WEBGL because if it is like OpenGL is has a serious effect on performance. OpenGL is optimized to draw borderless filled triangles.