

Efficient WebGL stroking - karliky
http://labs.hyperandroid.com/efficient-webgl-stroking

======
phoboslab
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](http://impactjs.com/ejecta)

[2]
[https://github.com/phoboslab/Ejecta/blob/master/Source/Eject...](https://github.com/phoboslab/Ejecta/blob/master/Source/Ejecta/EJCanvas/2D/EJPath.mm#L520)

------
tmcw
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/](https://www.mapbox.com/blog/drawing-antialiased-lines/)

------
rlx0x
Just for reference, "Drawing lines is hard"

> [http://mattdesl.svbtle.com/drawing-lines-is-
> hard](http://mattdesl.svbtle.com/drawing-lines-is-hard)

>
> [https://news.ycombinator.com/item?id=9179336](https://news.ycombinator.com/item?id=9179336)

~~~
coob
Further reference, here's an NSLondon talk on drawing lines quickly in OpenGL
ES on iOS:

[http://vimeopro.com/user20904333/nslondon/video/98274186](http://vimeopro.com/user20904333/nslondon/video/98274186)

Nigel's written a GL based vector lib:

[https://twitter.com/Vector_GL](https://twitter.com/Vector_GL)

------
mfabbri77
Please take this test ( this must be the result:
[http://www.amanithvg.com/screenshots/stroke_hot_case.png](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>

~~~
mfabbri77
Other Stroke test (OpenVG API, but it's equivalent to Canvas2D) available
here:
[http://www.mazatech.com/amanithvg/testsuite/amanithvg_sre/ht...](http://www.mazatech.com/amanithvg/testsuite/amanithvg_sre/html/45_test_draw_stroke.html)

------
perdunov
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.

------
paddi91
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.

~~~
mattdesl
Dropping down to WebGL should almost always give you more flexibility over how
the lines are batched and rendered by the GPU, so performance should improve
if you implement it mindfully.

