bezierCurveTo artifacts

[bones]

Howdy,

 

I have noticed artefacts when drawing multiple small beziers in a row.

 

See this fiddle - https://jsfiddle.net/12h39xdg/1/

 

The artefacts disappear if you draw either curve on its own or if you do a moveTo in between each BezierCurveTo. Is there a limit to the beziers in WebGL?

 

//bones

[bones]

Sorry, figured out I had the handles in the wrong order, hence the weirdness.

Can you use pixijs to draw an animated graphic each frame, how does it perform in Webgl in comparison to canvas?

[chg]

Sorry, figured out I had the handles in the wrong order, hence the weirdness.

I think you were right before, the placement of the control points was not usual but I don't think the rendering was correct for that special case of the cubic curve.

Can you use pixijs to draw an animated graphic each frame, how does it perform in Webgl in comparison to canvas?

I don't see vectors mentioned much on the forum so I have a hunch you may have to benchmark this yourself.

I wouldn't be surprised if the hardware accelerated 2D canvases such is common on mobile outperforms Pixi's technique - I think I looked at the Chrome Skia code a while ago and saw they were using Loop-Blinn to rasterise bezier splines efficiently with the fragment shader (browsers can also use native code and can use graphics libraries free of the limitations of WebGL)... but then perhaps you might see browsers that use or fallback to software rasterisation of curves (is this still common?), or context switching overhead and other things you are drawing in your scene might shift benefits back towards a WebGL solution

[bones]

Thanks for the response, as you suggested I did a Jsperf

http://jsperf.com/canvas-library-graphics-drawing/2

 

and it confirms that native canvas > pixi canvas > pixi webgl for performance of drawing beziers.

Thanks for the pointer towards loop-blinn I found this great article that explained some of the vector options for webgl
http://mattdesl.svbtle.com/drawing-lines-is-hard

I think now I will just use native canvas drawing for the vectors and then cache any repeating animations to a texture and use a pixi movieclip. That will be my next Jsperf test!