GPU multi-texture sprite batching!
First taste of Pixi.js v4 — son of a batch!
Whilst we are hard at work crafting the shiny new version of Pixi for you all, I figured it might be cool to show you a new feature that we’ve been working on.
Multi-texture batching is in the house y’all! The v4 sprite renderer can now batch more than one texture at a time. Behold the new, mighty bunny mark:
Many moons ago, we actually tried this in version 2 of Pixi but the performance hit that using multiple textures brought meant that single texture batching was the best route to go.
Now let’s fast-forward to 2016 where the WebGL shaders seem to run much faster. Faster to the point where multi-texture batching makes sense again (woop!).
So here is a sneaky peak at Pixi v4’s sprite batch renderer. In this new bunny mark, there is an important distinction between this and the previous versions (aside from the lovely new bunnies, that is). Each bunny in this demo has a separate texture. Ordinarily this would mean a single draw call for each bunny but the new Sprite Batcher can bundle up a group of textures into one. The result? Less draw calls! Which means better performance for you content… for free!
Depending on how many texture units are available to Pixi it will dynamically generate a shader that will batch that amount. For example Chrome on desktop has 16 available textures whilst iOS has 8. This means in real world situations where people often use more than one texture in their apps, Pixi v4 will be able to batch up all the sprites into one draw call. Pretty cool huh?
Expect more on the full-fat v4 update soon — it’s gonna be a monster!
