PIXI.js Super Fast Rendering with SpriteBatch

[Mat Groves]

Hey pixi peeps!

 

Good news I just added the SpriteBatch class to the pixi.js dev branch!

 

See it in action here: http://www.goodboydigital.com/pixijs/bunnymark/

 

For all intents and purposes it’s basically a turbo-charged displayObjectContainer.  You add sprites to it as you normally would and it will render them really fast.  This container type is especially useful for when you want to render tonnes of sprites per frame. You know like particles / bullets / tilemaps or er… bunnies? In sweatbands?

 

 

100,000s of bunnys

 

More info can be found here: http://www.goodboydigital.com/webgl-spritebatching-arrives/

 

Enjoy!

[Alvin]

Yeaahhh, great work Mat

[cubiq]

couldn't resist and tried it with proton particle system. Those are 20/40k sprites with physics and all

 

 

sorry for the bad quality, don't know why youtube compressed it that much. Can't share the demo because it's part of a bigger project but I can post a stand alone demo when I get 2 mins

[agmcleod]

Working on a javascript html5 games talk. Mind if I use that youtube video to show the sprite batch perf?

[cubiq]

help yourself

 

I'll try to post a demo asap, but really, it's just a standard proton demo + SpriteBatch

[Mat Groves]

Wow! Thats great to see! sooo many particles

[Firanolfind]

First of all, thank you for that project!

SpriteBatch is amazing feature!

But I catch strange warning — WebGL: INVALID_VALUE: uniformMatrix3fv:invalid size.

Canvas stays clear.

I've just replaced DisplayObjectContainer

//this.layer[layerName] = new PIXI.DisplayObjectContainer(); // was working previouslythis.layer[layerName] = new PIXI.SpriteBatch();

Could you please help me with digging my bug.

Cheers!

[xerver]

Are you adding children to the SpriteBatch that are not sprites (e.g. other containers)? Can we see your full code?

[Firanolfind]

It is difficult to show all code, cause it sepparated in different classes. But I'll try.

I used DisplayObjectContainer as layers with z-index. Childs are - sprites. Childs adds and removes from layer each step, and some layers could be empty.

 

Creating layer

//this.layer[layerName] = new PIXI.DisplayObjectContainer();this.layer[layerName] = new PIXI.SpriteBatch();

Emptying layers

/*__ emptying layers __*/	for(var l in this.layerStack){		var layer = this._game.display.layer[this.layerStack[l]];		//console.log(this.layerStack);		//this._game.display.layer[this.layerStack[l]] = [];		for (var i = layer.children.length - 1; i >= 0; i--) {			//console.log(this.layerStack);			layer.removeChild(layer.children[i]);		};	}

Adding child sprites.

if(this.__settings__.useCache){    if(!this.bufferStack[modelId]){//if buffer exists        console.log('new dom')        var canvas = document.createElement('canvas');        canvas.width = draw_obj._abs_Size.x  * PhysiVals.RATIO;            canvas.height = draw_obj._abs_Size.y  * PhysiVals.RATIO;        var o_ctx = canvas.getContext('2d');        //complex drawing to ctx        this.drawObject(draw_obj,o_ctx,0,0);        //cache result        this.bufferStack[modelId] = PIXI.Texture.fromCanvas(canvas);    }}if(!draw_obj._sprite){    this.sprites_count++;    input5.val(this.sprites_count);    draw_obj._sprite = new PIXI.Sprite(this.bufferStack[modelId]);    draw_obj._sprite._lifetime = 30;    this.spriteStack.push(draw_obj);}//incr life of spritedraw_obj._sprite._lifetime++;//positiondraw_obj._sprite.position.x = drawX;draw_obj._sprite.position.y = drawY;//add sprite to layerlayer.addChild(draw_obj._sprite);

Sorry for such big code fragment

Thank you

[cubiq]

Okay, I promised a demo, so here it is

 

http://lab.cubiq.org/pixi-proton/

 

enjoy

 

you can comment line 55 and uncomment 56 to see the difference between SpriteBatch and standard renderer.

 

On my PC

SpriteBatch: 36 FPS

Standard: 32 FPS

 

The particle system emits 1000 particles every 0.2s, particles have a variable lifespan of 1 to 2 seconds. So it should be an average of 7500 particles on screen at any given moment with rotation, translation and alpha.

 

I'm not a pixi expert, so I might do something wrong. I would really like to test it with a simpler particle system, not a huge proton fan.

[Hugeen]

It works great on Chrome, but 2 fps on Firefox .

[Mat Groves]

It works great on Chrome, but 2 fps on Firefox .

 

how interesting! is that the bunnymark? pc or mac? thanks!

[cubiq]

bunnymark works flawlessly on firefox (all platforms). My demo with proton is unbearable on firefox (all platforms).

 

I don't know if it's a proton issue or just the sum of alpha+rotation+translation. I had a look to other proton demos and firefox seems to be slower anyway, so I tend to believe it's a proton thing.

 

Do you know any other particle system I could hook pixi to?

[Mat Groves]

Interesting! - as a sanity check could you test the demo pulling in the bunnymark pixi.js file? 

 

http://www.goodboydigital.com/pixijs/bunnymark/js/pixi.js

 

would be good to confirm if we may haven't tweaked something in the class that has caused some kind of slow down!

 

Cheers!

[cubiq]

sure, no problem.

 

I updated to your pixi.js but the result is more or less the same.

[Mat Groves]

Cool - Thanks for testing! Have you tried profiling it in FF? would be good to see if its pixi or proton is sucking up all the power?

[cubiq]

the spikes are mostly on removeChild and WebGLFastSpriteBatch.renderSprite actually (both on pixi side)

[xerver]

Interesting, I will try to change the implementation to not remove/add children and see how that goes.

[xerver]

I have confirmed that this is not due to addChild/removeChild. Those spikes were resulting from a large number of objects in non-sprite batch containers.