Pixi.JS v4 Arrives
Mat Groves has some big news for you all!
PixiJS v4 is here!
Hello everyone! I am pleased to announce that after months of refactoring we are now ready to share the new v4 of Pixi with the community!
I guess the best place to start is to explain what the goals of v4 have been. There are three main areas we looked to improve on:
- Optimise the WebGL renderer, especially for mobiles.
- Make it easier for more seasoned WebGL devs to customise it
- Maintain the API: if it ain’t broke, don’t fix it!
First thing I would like to mention is the API is 99% the same as v3.
In instances where this has changed we have made sure to add a deprecation layer so it will still work. Backwards compatibility is important to us as we don’t think that each major release should bring a radical API change. So with that in mind, unless you do some really custom stuff, v4 should just work for you!
Behind the scenes it’s a different matter. We have re-tooled the WebGL renderer to be even faster and more flexible for the developers who want to go off-piste and create something a bit more bespoke.
Here’s a quick overview of of all the exciting new features and changes that have made their way into the v4 WebGL refactor:
Say hello to the pixi-gl-core.
Following the new trends and taking advice from the stack.gl community, we created a set of standalone building blocks to help you manipulate the WebGL api.
Open-source and free to use with or without Pixi, they make working with WebGL much easier and wrap up many of its complexities. Think of them as WebGL lego bricks :
Texture
FrameBuffer
Shader
Buffer
VertexArrayObject
This set of objects are used by v4 and are the beating heart of the renderer. They are also exposed to you so that you can use them to create custom WebGL code with ease.
Expect some tutorials for this to come up soon!
If you are interested in exploring them more check out the repo here: https://github.com/pixijs/pixi-gl-core
Multi texture batching for WebGL
You may have already seen the post we wrote a few months back. But basically Pixi can now batch multiple textures into a single draw call. Less draw calls means better performance. So yeah, it’s faster!
GLSLIFY
We now uses glslify to pull in shader code. There are a few advantages here that make it a great option. The main one is that there is a rich ecosystem of shader modules out there that we can now tap into. This will be invaluable for creating custom filters. Also, glslify works with webpack, meaning that it can now be used to compile Pixi if desired.
Filter refactoring
The filters have been refactored with a few tasty new features. They now have a resolution, meaning that you can render a filter at a different resolution than the renderer itself. This can be really useful for increasing performance if required.
You no longer need to pass a uniforms object to your filter anymore. Pixi will automatically generate the object for you by inspecting your shader code.
We also introduced a caching layer to the uniforms so that they will only be set if they change, which means less redundant GPU calls.
RenderTexture refactoring
Render textures have had a full makeover. v3 broke a few rules that meant canvas rendering code and WebGL rendering code were in the same place. RenderTexture has now been abstracted so that is is renderer agnostic. This means that a small API change was required. To render a RenderTexture with v3 you would have gone:
|
1 2 |
var renderTexture = new RenderTexture(renderer, 100 ,100); renderTexture.render(mySprite); |
in v4 you now use the render function
|
1 2 |
var renderTexture = RenderTexture.create(100, 100); renderer.render(mySprite, renderTexture); |
This is actually more intuitive and makes more sense!
GPU garbage collector
Texture management for free! Filling up the GPU with lots of textures is no good for anyone. Pixi will now take care of unloading idle textures from the GPU behind the scenes. When the texture is needed again it is simply re-uploaded to the GPU. Not too complicated :) In tests this has proved really valuable, especially for mobiles of GPUs with less memory.
The Garbage collector has two modes. Manual (the default) which means it’s up to you to call it with the following line:
|
1 |
myRenderer.textureGC.run(); |
It also has an Auto mode which means that it will automatically run every 10 seconds or so. To enable this mode you simply need to set it like so:
|
1 |
PIXI.GC_MODES.DEFAULT = PIXI.GC_MODES.AUTO; |
Big boost IOS performance boost
The best thing about all the above is that Pixi is overall much faster for real world use cases. Especially on mobile! This is more apparent on IOS as state switching is now way faster. So if you upgrade to v4, you will get a free performance upgrade! Not bad, eh?
Time to play
So there we go! Pixi v4 can be found in the dev branch on github. We are using it for production code here a Goodboy Digital studios and so I would encourage you to do the same.
We are currently working on some support content for pixi v4 including a shiny new website and a new set of examples, once all this stuff is in place we can look to bump v4 into master.
Thanks all!
Massive thanks to all that helped on this new version. Especially big one to Ivan Popelyshev who has played a big part in this refactor. You guys will LOVE what he is cooking up for the next release too :)
We are so fired up right now and are already working on the next bunch of features for v4.x! Pixi is not a destination but a journey that will constantly be evolving. Exciting times.
Now go sprinkle some PixiJS v4 on your life…
https://github.com/pixijs/pixi.js/tree/dev
Oh, and a final note. If you want a job making awesome games and websites with the team who make PixiJS, we are hiring! https://goodboydigital.workable.com/j/4168626AE0
Give us a shout if you’re up for it!
Recent Comments