Add support for beginContour() and endContour() in Webgl mode

[davepagurek]

Resolves #5946

Changes

1. This implements contours in WebGL TESS mode (the default mode.) This involves:
   • Recording the indices of breaks between contours
   • Taking the vertex data array that we were passing into libtess before and splitting it into multiple arrays at the
     contour indices
   • Updating our TESS edge algorithm to not connect vertices across contour boundaries
   • Making libtess use nonzero winding order like 2D mode (its default is evenodd)
2. Updating the WebGL stroke cap/join algorithm to handle multiple contours better.
   • Previously, only back-to-back edges in the array could get a join between them
   • Now, every time we see an edge not connected with the previous, we check to see if we previously thought it was
     a cap, and turn it into a join
   • I stress tested this on a complicated shape and the performance is within 1FPS difference of before (33FPS with Improve performance of line rendering #6230 also merged in):
     
3. Fixes a bug in 2D mode where endShape(CLOSE), when used with contours, does not add a stroke join between the end of the stroke and the start. Note the gap in the top left corner of this modified version of the beginContour() reference example (it was less visible before with the default round caps, which look very similar to a round join):
   

Performance

Screenshots

Live: https://editor.p5js.org/davepagurek/sketches/qYp33OFnY

PR Checklist

• npm run lint passes
• Inline documentation is included / updated
• Unit tests are included / updated

[aferriss]

Amazing work as always, this was something I didn't even know wasn't supported in WebGL mode. As far as I can tell it looks good and is working as expected!

Also impressed that the webGL mode can pass the test when compared with p2d. I would have assumed some aliasing or slight differences in stroke weight would throw it off but I guess with vertical and horizontal lines there's no issue.

Since it only works with TESS in webGL mode, should we document that somewhere?

One thing I noticed (which I think is unrelated to this PR) are some artifacts that show up when viewing strokes at oblique angles. The issue disappears when disabling fill, so maybe it's something to do with the ordering of surfaces. Don't think it's blocking here but maybe something to log if it isn't already.

[davepagurek]

One thing I noticed (which I think is unrelated to this PR) are some artifacts that show up when viewing strokes at oblique angles.

Oh yeah I noticed that too and added a fill toggle to that sketch. If you toggle off fills, it looks like what's happening is that the strokes are always perpendicular to the camera plane, but the fill is not, so the stroke ends up getting cut off by the fill a bit. I guess the way to truly deal with that would be to turn strokes into proper 3D objects, like 3D pipes? That likely wouldn't be fast enough for immediate mode, but could be cool for p5.Geometry

[Qianqianye]

Thanks @davepagurek and @aferriss!