[Taterr]

Funny timing on this post, I just finished implementing this a couple days ago for a little effect in a game. I followed the math in this comment that is now only viewable from the archive http://web.archive.org/web/20190614093605/https://forum.libc...

I notice you use 4 triangles per segment but I believe it's always possible to use only 2 if you only have miter and bevel caps.

[GuB-42]

For miter caps, you need 2, for bevel caps, you need 3.

But it is actually way more complicated than that in the general case. Notice how there is some overlap, not very pretty with transparency. There are ways around this problem, for example using a stencil buffer, but if you don't want that either and instead go a proper triangulation, this becomes quite involved.

The problem is when segments are shorter than the inner intersection point. In the example in the article, that's when I1 is outside of [A1, A1'] or [B1, B1']. Doing it properly would require taking the geometry of the entire figure into account, you can't just draw it segment by segment and fix the joints.

For example, if you draw a closed polygon that is smaller than the line thickness, all internal geometry will disappear so you have to triangulate the shape using only the outer vertices. How to calculate that looks like an interesting problem that would need a much longer blog post...

[Taterr]

You can do bevel with 2 if you accept intersections, which will always occur unless you ensure a minimum distance between points equal to the width of the line. https://i.imgur.com/1vWoAGV.png

In my context the line represents a player path so the transparency overlap created by the bevel intersection is actually perfectly fine and looks good. The same for intersections over a previous section of the path.

I might go back and add the pixel buffer method anyway so the rounded curves can be both smooth and non intersecting.

https://i.imgur.com/DXRkZGt.png

[montroser]

Yes, this problem seems intuitively not so hard -- but without flattening first to a pixel buffer, it is a formidable challenge.

[jvernay]

You can use 2 triangles with miter join, I've started with this approach, but the bevel join creates (in general) a pentagon, thus this should be doable with 3 triangles I suppose.