
Drawing Lines is Hard – an interactive look at GPU line rendering - mattdesl
http://mattdesl.svbtle.com/drawing-lines-is-hard#
======
inDigiNeous
Yeah, it is hard to do properly. Been looking into several different methods
and implementations, and this is the one I went with on my project (missing
from the article):

Shader-Based Antialiased, Dashed, Stroked Polylines
[http://jcgt.org/published/0002/02/08/](http://jcgt.org/published/0002/02/08/)

This is a very throughout implementation with many different drawing features
and beautiful results. The actual implementation provided with the Python
examples is a bit difficult to understand and not perhaps the most optimal,
but still the paper and the theory behind it is one of the most comprehensive
I've found.

~~~
mattdesl
This looks great. I'm tempted to add it as another implementation. :)

~~~
Apofis
Do it!

------
archagon
I wish OpenVG/NV_path_rendering were more supported, especially on mobile
platforms where they're needed the most. I'm making an app that involves
hardware-accelerated line/path rendering and dealing with triangulation,
color, batching, stroke vs. fill, patterns, etc. manually is a pain. Libraries
like MonkVG and nanovg exist but they're a little half-baked at the moment.

~~~
dietrichepp
OpenVG has been thoroughly dead for a while now. I think the half-baked
libraries are as good as you're going to get.

~~~
archagon
Yes, but it's a _good idea_. And there's plenty of software that relies on
hardware-accelerated vectors: maps, browsers, animations, games, etc. The
problem is that everyone has their own implementation!

------
i_am_ralpht
By some wonderful coincidence I need to implement antialiased line rendering
this afternoon. Previously I'd done the 6-triangle method (but I also
rasterized any kind of path with all sorts of fancy fills, and it made more
sense for that).

Thanks for such a clear write-up and all the links.

------
lmeyerov
It gets even more fun when you get into curves, or try to draw 1MM lines!

(If this sounds like your cup of tea, message me :))

~~~
eru
Are you hiring?

~~~
lmeyerov
Yep! Our fullstack / GPU / infrastructure spots are full (team of 5), but
we've been holding two spots open here:

* infoviz lead: handling design+impl of high-density data viz (imagine interacting with million node graphs). Coding-wise, clientside WebGL, D3, and serverside, node + c + opencl + our custom (GP)GPU cluster stack. It'll involve pushing what's possible in data viz, both in design & performance.

* frontend lead: UX/app/product design, meaning JS/CSS/whatever frameworks you want to bring in (e.g., React). GL is not necessary, but you'll probably want to get your hands dirty.

Msg build@graphistry.com and we can figure it out!

~~~
eru
Sounds interesting. I'm probably too dumb. But I referred a friend to your
post!

------
adamzegelin
A good example (a little out of date now, circa 2003) showing invariance in
OpenGL implementations across hardware:

[http://arek.bdmonkeys.net/bugs/invariance/index.html](http://arek.bdmonkeys.net/bugs/invariance/index.html)

------
jankins
Another good article on this subject is [https://www.mapbox.com/blog/drawing-
antialiased-lines/](https://www.mapbox.com/blog/drawing-antialiased-lines/)

------
eshyong
Slightly off topic, I was messing around with the triangulated lines demo, and
I get this rendering glitch:

[https://imgur.com/FPEaVTC](https://imgur.com/FPEaVTC)

Anyone know the reason behind this? I'm guessing it's sort of triangle
bounding error where something is being divided by a tiny divisor. It happens
when I draw the snake in an arc, then retrace the arc from the same angle but
in the opposite direction.

~~~
delluminatus
He actually mentions it in the article:

 _Note: a drawback that comes with miter-joined lines is sharp edges. When the
angle connecting two segments is very sharp, the miter length grows
exponentially toward infinity, and causes huge artifacts in rendering. In some
applications this may not be a problem, in others you might want to limit the
miter or fall back to another join (i.e. bevel) when the angle is too sharp._

~~~
jheriko
there is a solution to this called 'mitre limiting' its quite simple really.
beyond a certain angle (dot product) threshold between adjacent segments you
don't mitre the corner, but you 'cap' it, either with a simple triangle
filling the gap, or with a fan to create a nice, rounded appearance.

------
Vektorweg
I wrote some animated SVG's in the past. It was often slow but good enough for
most tasks. Quality was/is browser-dependent, but it worked well in overall.

I'm not sure what people want to achieve. So, how well works Scalable Vector
Graphics for you?

~~~
jheriko
you need to render the SVG data somehow and the problem being discussed is how
to achieve that.

the format in which the strokes or shapes are stored is not relevant.

