3 ms·

Nice article! When we wrote the instanced WebGL line renderer for https://count.co https://count.co one of the tricky parts was switching between mitre and bev

Nice article! When we wrote the instanced WebGL line renderer for https://count.co 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.

mtsr 5y ago
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.
paulgb 5y ago
> 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-animated-lines/src https://github.com/paulgb/experiments/tree/master/2021-05-20... Here’s a demo: https://twitter.com/paulgb/status/1394824275635408907 https://twitter.com/paulgb/status/1394824275635408907
thomasikzelf 5y ago
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-opengl-8766f34192dc 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 5y ago

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.

paulgb 5y ago

> 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-animated-lines/src https://github.com/paulgb/experiments/tree/master/2021-05-20... Here’s a demo: https://twitter.com/paulgb/status/1394824275635408907 https://twitter.com/paulgb/status/1394824275635408907

thomasikzelf 5y ago

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-opengl-8766f34192dc 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.