Connected strokes in WebGL mode

[davepagurek]

Topic

In WebGL mode, strokes don't have joins or caps. This leads to some ugly results, e.g.:

function setup() { createCanvas(400, 400, WEBGL) } function draw() { background(255) stroke(0) strokeWeight(20) beginShape() vertex(-40, -40) bezierVertex(40, -40, -40, 40, 40, 40) endShape() }

It would be great to connect these strokes in WebGL mode too. The dofficulty would be for 3D shapes, when there might be more than two strokes connected to each other (e.g. the vertices on a sphere(), which connect multiple triangles.) Is there a way to support the former without having to handle the general 3D case?

[davepagurek]

I was thinking that maybe we can add some join triangles between adjacent edges if the edges share a vertex. This would mean that 3D geometry like sphere() don't get many joins as they don't have many end-to-end edges, but shapes drawn with bezierVertex would get joins. The joins are nothing fancy, just two triangles connecting the end of the previous edge to the end of the next edge. Proof-of-concept sketch here: https://editor.p5js.org/davepagurek/sketches/LjcrmkJ6X

edit: one more version with round stroke caps: https://editor.p5js.org/davepagurek/sketches/2MaaVagOa

[davepagurek]

Update: I was looking into what it would take to just fully support stroke joins + caps in WebGL mode, and I found I could handle all stroke caps but not all joins. I've updated the above sketch, which supports all stroke caps and uses BEVEL stroke joins.

Basically I'm hoping for the following in an ideal solution to caps+joins:

• Doesn't dramatically increase the number of vertices being drawn
• Doesn't dramatically increase the amount of data per vertex
• Uses the same buffer data regardless of stroke cap/join settings so that geometry can cache the data

The main reason why I couldn't get all stroke joins to work is because there will always be some viewing angle where a join looks like a cusp and would need a lot of vertices for strokeJoin(ROUND). Consider this joint, which on the left would not take many vertices to look smooth. If you move the camera so that you're looking at the joint head on (like on the right), we would need enough vertices to draw a semicircle to do the join:

Because of this, we'd basically have to add enough vertices to make a semicircle on every join. I worry that doing that would slow down less powerful computers.

At the very least, I think it's pretty safe to add just BEVEL joins (two extra triangles per join) and stroke caps (extra vertices only at endpoints.) My example sketch with support for those runs at 60fps on my 2015 Macbook Pro anyway. I can turn that sketch into a PR and add unit tests in the coming days.

[davepagurek]

Another update: I got a suggestion from someone on Twitter to try basically always doing a MITER join and then using the fragment shader to discard pixels if the mode is set to ROUND or BEVEL. This actually works pretty well! Example sketch here: https://editor.p5js.org/davepagurek/sketches/vCasLHjlT

Some things to note:

• The rounded or cut off edges in ROUND or BEVEL modes are not antialiased as well as normal shapes that don't use discard in the fragment shader. It's subtle, but maybe this is a dealbreaker for this method? Let me know what you think when looking at the sketch!
• Although MITER is the default in 2D mode, I think it probably shouldn't be the default in WebGL mode because the default shapes accidentally have end-to-end edges at weird angles (try looking at the sphere in WebGL mode.) Is it OK to break consistently in order to have things look better by default?
• I've limited the size of MITER joins because thick lines can make really big spikes. This is more of a problem than in 2D mode because you can get so many more weird angles than in 2D mode due to camera rotation.