Renderer very slow on Graphic.clear()

[SnakeDrak]

Hello,

 

I have been doing tests with PixiJS because I have seen good results in the examples. When I have make a code with 400 objects, the renderer is very slow.

 

These are the lines:

            graphics.mousedown = graphics.touchstart = function(evt) {                this.clear();                renderer.render(stage); // slooooowww            };

I have uploaded a JsFiddle example of the code: http://jsfiddle.net/rnr8277a/. I think I am doing something bad.

 

Very thanks!

[hubert]

Is it slow in webGl context or in 2d canvas context. This example works swell in webgl Context.

 

Have you tried to replace the primitives with a texture and use a spritebatch?! 

 

http://www.sevenative.com

[xerver]

Graphics wasn't meant for drawing tons of items like that. What you should do is draw one of those to a canvas, create a texture from it, and create sprites in a sprite batch and draw those.

 

That being said, I do not experience any slowness on Chrome 37 (for either renderer).

[SnakeDrak]

First, thanks you very much for the answer.

 

I have seen in other computer and it works correctly. I use autoDetectRenderer which launches WebGLRenderer. It's fine but in the bad computer with 400 objects is very slow, in the good computer around 2500 ~ is slow too.

 

Then, do you suggest use textures? I thought that Graphics was the more fastest.

 

For other hand, with WebGL the lines are pixelated, why?:

 

WebGL:

 

Canvas:

 

Thanks for the help!

[hubert]

yes you should use spritebatch. it can handle thousands sprites of the same type with almost none performance deterioration.

 

This is the example: http://www.goodboydigital.com/pixijs/bunnymark/

 

How to use it: http://www.goodboydigital.com/webgl-spritebatching-arrives/

 

I hope this helps!

 

http://www.sevenative.com

[xerver]

> Then, do you suggest use textures? I thought that Graphics was the more fastest.

 

Nope, drawing shapes is way slower than just blitting bitmaps

 

> For other hand, with WebGL the lines are pixelated, why?:

 

​Because graphics are drawn via the stencil buffer which does not use anti-aliasing.