Performance issue Graphics vs Bitmapdata

[symof]

I keep running into this problem and I can't figure out where it comes from. The performance between graphics and bitmapdata is just too big.

These fiddles are based off the starfield examples

http://phaser.io/examples/v2/demoscene/starfield

http://phaser.io/examples/v2/demoscene/starfield-bitmapdata

I've only added the game.time.fps to the fiddles.

https://jsfiddle.net/rf2gcfnz/ - with texture I get 34-36 fps,

https://jsfiddle.net/7a87eL9n/ - with bitmapdata i get 58-60 fps.

Why is that? I believe that texture and graphics should be faster then the bmd, as drawing to bmd involves another step as drawing to bmd and then to the screen. What am I missing?

[symof]

There is also this limitation that relates to graphics that does not appear in bitmapdata

Is it really just pixi.js or something else on how drawing in implemented?

[Fatalist]

24 minutes ago, symof said:

https://jsfiddle.net/rf2gcfnz/ - with texture I get 34-36 fps,

Because multiple renderTexture.renderXY-s per frame with WebGL is slow. Graphics is not used here...

The fastest approach is to have sprites or particles.

[symof]

14 minutes ago, Fatalist said:

Because multiple renderTexture.renderXY-s per frame with WebGL is slow. Graphics is not used here...

The fastest approach is to have sprites or particles.

Ok. But WHY is it slow? Is it just bad code from pixi or webgl? 

[eddieone]

One example is using Auto and the other Canvas. WebGL needs a strong GPU it seems. Switch that and both get 60 depending on hardware.

[symof]

8 minutes ago, eddieone said:

One example is using Auto and the other Canvas. WebGL needs a strong GPU it seems. Switch that and both get 60 depending on hardware.

I didn't notice that, thank you for pointing it out. 

After I changed to phaser.WEBGL is still have the same discrepancy. 

https://jsfiddle.net/rf2gcfnz/1/ - 34-36 with 40 fps peak.

https://jsfiddle.net/7a87eL9n/1/ -59-60 fps constant 

Using phaser.CANVAS gives me around 60 fps for both.

[Fatalist]

21 minutes ago, symof said:

Ok. But WHY is it slow? Is it just bad code from pixi or webgl? 

Performence in WebGL depends on a number of factors, like the number pixels drawn, the number of objects drawn, the number of draw calls. Every renderTexture.renderXY issues a new draw call, and that's too many draw calls. With sprites, thousands of them can be drawn with a single draw call, so that's a better approach.

These are good examples of rendering lots of sprites:

http://phaser.io/examples/v2/particles/no-rotation

http://phaser.io/examples/v2/sprites/out-of-bounds

And your second link as well.

[symof]

https://jsfiddle.net/j9kzwyqv/ - 59-60 fps - fiddle with sprites only using webgl.