5 ms·

Efficient WebGL stroking

71 points by karliky 12y ago

phoboslab 12y ago
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/Ejecta/EJCanvas/2D/EJPath.mm#L520 https://github.com/phoboslab/Ejecta/blob/master/Source/Eject...
rlx0x 12y ago
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 12y ago
  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
tmcw 12y ago
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/
paddi91 12y ago
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 12y ago
  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.
perdunov 12y ago
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.
mfabbri77 12y ago
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 12y ago
  Other Stroke test (OpenVG API, but it's equivalent to Canvas2D) available here: http://www.mazatech.com/amanithvg/testsuite/amanithvg_sre/html/45_test_draw_stroke.html http://www.mazatech.com/amanithvg/testsuite/amanithvg_sre/ht...

71 points by karliky 12y ago

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/Ejecta/EJCanvas/2D/EJPath.mm#L520 https://github.com/phoboslab/Ejecta/blob/master/Source/Eject...

rlx0x 12y ago

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 12y ago
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

tmcw 12y ago

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/

paddi91 12y ago

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 12y ago
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.

perdunov 12y ago

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.

mfabbri77 12y ago

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 12y ago
Other Stroke test (OpenVG API, but it's equivalent to Canvas2D) available here: http://www.mazatech.com/amanithvg/testsuite/amanithvg_sre/html/45_test_draw_stroke.html http://www.mazatech.com/amanithvg/testsuite/amanithvg_sre/ht...