# Quad in WEBGL is hidden or shown with diagonal line

**URL:** <https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233>\
**Category:** Coding Questions\
**Created:** [August 5, 2022, 4:58am UTC](https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233 "2022-08-05T04:58:01Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![yedu](https://avatars.discourse-cdn.com/v4/letter/y/dbc845/32.png) [@yedu](https://discourse.processing.org/u/yedu)\
**Post date:** [August 5, 2022, 4:58am UTC](https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233/1 "2022-08-05T04:58:01Z")

</div>

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](https://editor.p5js.org/yellowds/sketches/fk1xCzdzp)

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

```

---

<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:** [August 5, 2022, 4:03pm UTC](https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233/2 "2022-08-05T16:03:12Z")

</div>

> [@yedu](#):
>
> How come the green quad doesn’t show up?

This appears to be a [bug](https://github.com/processing/p5.js/issues/4401) in p5.js  
According to the documentation the last two parameters are optional but your code works if you add them. See code below

> [@yedu](#):
>
> How can I get rid of the diagonal line?

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.

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

```

---

<div class="post-metadata">

**Author:** ![yedu](https://avatars.discourse-cdn.com/v4/letter/y/dbc845/32.png) [@yedu](https://discourse.processing.org/u/yedu)\
**Post date:** [August 5, 2022, 10:09pm UTC](https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233/3 "2022-08-05T22:09:01Z")

</div>

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.

---

<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:** [August 6, 2022, 8:14am UTC](https://discourse.processing.org/t/quad-in-webgl-is-hidden-or-shown-with-diagonal-line/38233/4 "2022-08-06T08:14:18Z")

</div>

> [@yedu](#):
>
> 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?

My understanding is that WEBGL does not support drawing quadrilaterals - you can see the drawing modes [here](https://www.tutorialspoint.com/webgl/webgl_modes_of_drawing.htm). 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.

> [@yedu](#):
>
> don’t draw the shared edge between the 2 triangles with stroke on.

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.