Efficient WebGL stroking (labs.hyperandroid.com)

Nice writeup and quite elegant code!

Curiously, the line drawing functions in Ejecta[1] (which reproduces the Canvas2D API) is one of the most complicated parts of the whole project and certainly has the ugliest code of it[2]. It's fast and works reliably, but maintaining it is a nightmare.

[1] http://impactjs.com/ejecta

[2] https://github.com/phoboslab/Ejecta/blob/master/Source/Eject...

Just for reference, "Drawing lines is hard"

> http://mattdesl.svbtle.com/drawing-lines-is-hard

> https://news.ycombinator.com/item?id=9179336

For another perspective on this, we published a pretty efficient way to draw lines without completely tessellating them: https://www.mapbox.com/blog/drawing-antialiased-lines/

Any idea on the performance compared to HTML5 canvas? We've an application drawing about 10000 lines per frame for zooming / panning and depending on the device and browser is gets a little bit laggy.

Not really efficient. The junctions have way too many vertices and that should be way slower than the simple textured pattern approach. Also, for AA you would need subsampling that is times slower than the methods that allow to draw AA lines without it.

Please take this test ( this must be the result: http://www.amanithvg.com/screenshots/stroke_hot_case.png )

STROKE_LINE_WIDTH = 200 STROKE_CAP_STYLE = CAP_BUTT; STROKE_JOIN_STYLE = JOIN_ROUND; <identity transform matrix>

float xy[8]; int j = 0;

for (int i = 0; i < 4; ++i) { // x coordinate xy[j++] = 20.0f * (float)cos((i / 4.0f) * 1.7) + 128.0f; // y coordinate xy[j++] = 20.0f * (float)sin((i / 4.0f) * 1.7) + 128.0f; }

<draw stroked polygon whose points are the xy coordinates>