Efficient WebGL stroking
labs.hyperandroid.com
Efficient WebGL stroking
1–10 of 10 posts
Re: Efficient WebGL stroking
#2Nice 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...
Re: Efficient WebGL stroking
#3Just for reference, "Drawing lines is hard"
Re: Efficient WebGL stroking
#4Just for reference, "Drawing lines is hard" > http://mattdesl.svbtle.com/drawing-lines-is-hard > https://news.ycombinator.com/item?id=9179336
Further reference, here's an NSLondon talk on drawing lines quickly in OpenGL ES on iOS:
http://vimeopro.com/user20904333/nslondon/video/98274186
Nigel's written a GL based vector lib:
Re: Efficient WebGL stroking
#5For 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/
Re: Efficient WebGL stroking
#6Any 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.
Re: Efficient WebGL stroking
#7Not 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.
Re: Efficient WebGL stroking
#8Please 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;
float xy[8]; int j = 0;
for (int i = 0; i
Re: Efficient WebGL stroking
#9Please 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; float xy[8]; int j = 0; for (int i = 0; i
Other Stroke test (OpenVG API, but it's equivalent to Canvas2D) available here:
http://www.mazatech.com/amanithvg/testsuite/amanithvg_sre/ht...
Re: Efficient WebGL stroking
#10Any 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.
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.