beginShape(QUADS) does not work in WebGL mode

[edorfaus]

Most appropriate sub-area of p5.js?

• WebGL

Details about the bug:

• p5.js version: 1.0.0
• Web browser and version: Firefox 73.0
• Operating System: Linux 5.3.0 (Ubuntu 19.10)
• Steps to reproduce this:
  Try to draw a QUADS shape with fill, e.g. like this:

  function setup() {
    createCanvas(256, 256, WEBGL);
  }
  function draw() {
    background(240);
    stroke(0);
    beginShape(QUADS);
    fill(255, 0, 0);
    vertex(-25, -25, 0);
    vertex(25, -25, 0);
    vertex(25, 25, 0);
    vertex(-25, 25, 0);
    fill(0, 255, 0);
    vertex(-25, 100, -25);
    vertex(25, 100, -25);
    vertex(25, 100, 25);
    vertex(-25, 100, 25);
    endShape();
  }

  According to the beginShape() reference documentation, this should draw two separate quads, which I expect to be filled in with separate colors (one red and one green).
  Instead, I get an unclosed and unfilled 7-sided polygon, as if I specified noFill() and left out the QUADS.

Further notes:

• The same code without the QUADS argument draws the same line, but with fill between the vertices (including a gradient between the two quads).
• The same code with p5.js 0.10.2 gives the same result, except it also logs an error about quads not being implemented yet to the console. Version 1.0.0 does not log that error.
• Searching through the existing issues and PRs only found me some sidenote comments that mentioned quads not being handled; I did not find any issue that tracks it not being implemented yet, so I decided to add one.

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, be sure to follow the issue template if you haven't already.

[stalgiag]

Thank you @edorfaus! This warning should be added back in here until quads are handled correctly.

[chanof]

Hi does anybody find a solution?

[hollunder]

We just encountered the same issue when trying to build a textured cube from quads.
Any attempts to texture quads just fail silently.
The same seems to be true for QUAD_STRIP.

The one workaround a colleague found was to use a irregular polygons.
One beginShape() without any "kind" specified, with four vertices per "quad".

The thing that bothers me most about it is that it fails silently. One can waste a lot of time trying to figure out what one does wrong and we certainly did. I suggest you add some form of test to detect such breakages.

[EmmanuelPil]

Hi.
Any chance that this will be solved soon?
I have several sketches using QUAD and QUAD_STRIP that I would like to translate from P5.java to P5.js
It would be very much appreciated. Thank you very much.

[Pixelkar]

Hello ,

Did anyone Find any solution for this :(

[stalgiag]

There seems to be consistent and noteworthy demand for QUADS support in immediate mode drawing for WEBGL. This is due in part to the fact that the reference lists all modes that work in 2D with beginShape(). The JSDoc comment for RendererGL.beginShape() lists the correct available drawing modes for WEBGL but this isn't going to appear in documentation because it is private method called by p5.prototype.beginShape().

There are two possible changes here.

1. Suitable for a new contributor or someone unfamiliar with WEBGL
Task: Update the JSDoc documentation on p5.prototype.beginShape to indicate which shape modes only work with 2D. This list can be cross-referenced with the list of available modes in the comment on RendererGL.prototype.beginShape.

2. Suitable for a contributor with an interest in or experience with WebGL
Task: Implement QUADS in RendererGL.Immediate
The majority of the work will need to happen in RendererGL.prototype._calculateEdges. Care should also be given to look for any usage of RendererGL.immediateMode.shapeMode to see if updates are necessary to account for a shapeMode of QUADS.

[davepagurek]

If we opt for the second solution, I wouldn't mind taking that task on. I'll defer to you to judge whether that change is warranted compared to just updating the docs though!

[stalgiag]

@davepagurek that would be great! Working with QUADS is pretty common judging by the activity on this thread and many Processing 3D sketches I see. This would be a significant improvement to parity between the renderers without i think too much work required.