[jasmcole]

Nice article!

When we wrote the instanced WebGL line renderer for https://count.co one of the tricky parts was switching between mitre and bevel joins based on the join angle - for very acute angles the mitre join shoots off to infinity.

Another nice extension (that we are yet to implement) is anti-aliasing, but I think that requires extra geometry to vary the opacity over.

[paulgb]

> Another nice extension (that we are yet to implement) is anti-aliasing, but I think that requires extra geometry to vary the opacity over.

There’s a way to do it where you pass one extra vec2 from the vertex shader and use that to determine how much of the pixel is covered by the lines. (This has the effect of thinning the line, so you may want to thicken it to compensate)

Here’s an example of a pair of shaders that do this: https://github.com/paulgb/experiments/tree/master/2021-05-20...

Here’s a demo: https://twitter.com/paulgb/status/1394824275635408907

[thomasikzelf]

You can do anti aliasing in the fragment shader using 4 vertices per segment. See: Shader-Based Antialiased Dashed Stroked Polylines- Nicolas Rougier

And:

https://blog.mapbox.com/drawing-antialiased-lines-with-openg...

I am also rendering round caps in the fragment shader. You can then render multiple lines with 1 draw call. The only problem is drawing transparent lines, because of the overlap between segments.

[mtsr]

What did you end up using to choose the join?

I’m also interested in adding anti-aliasing to my implementation. Maybe widening the line by a bit and fading opacity over that? But yeah, extra geometry, it seems.