Jump to content

PIXI.js Super Fast Rendering with SpriteBatch

Mat Groves

Recommended Posts

Hey pixi peeps!


Good news :D 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 :D


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



Link to comment
Share on other sites

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.



Link to comment
Share on other sites

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 :wacko:

Thank you

Link to comment
Share on other sites

Okay, I promised a demo, so here it is




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.

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...