FPS (performance) in pixi v3

[pauser]

Hello,

I just wanted to ask what is your best FPS score with PIXI?
First, sorry for bothering you. Its not an off topic but I made a test with 200 Rectangles and in Amazon Kindle HD 8.9 (Canvas) I get only 12-15 FPS and with this thing here: http://www.amazon.de/LG-Quad-Core-Prozessor-interner-Speicher/dp/B00FOM40S2 (WebGl) 35 FPS. 
 

var rect = new PIXI.Graphics();

        rect.beginFill(color);

        rect.drawRect(0, 0, 100, 700);

        rect.endFill();

 

var texture:PIXI.Texture = rect.generateTexture(renderer, 1, resolution);

var sprite = new PIXI.Sprite(texture);

var container = new PIXI.Container();

container.addChild(sprite);

 

and than the container is added to root container(stage).

I also tried without texture and setting container.cacheAsBitmap = true but the result is not very different. I was strongly hoping to get 55-60 FPS with webgl. Until now I had to convince my team to switch to pixijs from createjs because of android but It really does not look different until now .

Am I doing something wrong?

 

PS. I'm using crosswalk cordova!

Thanks in advance!

[xerver]

How do you create the 200 rectangles? Using a single texture? Multiple Graphics objects?

Depending on how you do the textures, your sprites/graphics objects may not be batched which will result in poor performance.

[pauser]

The code from above will be called 200 times, that means there will be 200 graphic objects and 200 textues.

That is an extreme case maybe but I will need 100+ different images rendered including ~5 MovieClips. And sometimes 500+ images from the same source also with ~5-15 MovieClips.

[xerver]

Having so many images is going to perform badly, you will be texture swapping on the GPU constantly which is really expensive. Combine as many images as you can into sheets. Drawing many objects that share a texture is cheap. They don't even have to draw the same thing, just all come from the same source image.

Take a look at TexturePacker which can automate creating sheets for you, and pixi supports loading the json and image that it outputs. That will be more optimal for your user's download times, and much more efficient for runtime drawing.

[pauser]

The idea is good but I need to generate images from SVGs 'on fly' so its not pixelated. So its not going to work with pixi as well I guess. I'm going to think about a possible solution. 

[xerver]

The idea is good but I need to generate images from SVGs 'on fly' so its not pixelated. So its not going to work with pixi as well I guess. I'm going to think about a possible solution. 

 

If you are using SVGs, you can probably just use SVG. Browsers support it natively, and pixi has poor SVG support anyway.

[pauser]

If you are using SVGs, you can probably just use SVG. Browsers support it natively, and pixi has poor SVG support anyway.

 

We tried Raphael, it was  unplayable slow.