We're thrilled to offer an exclusive preview of the future of 2D web graphics with the Beta release of PixiJS v8. Although not yet finalized, this Beta iteration is packed with killer performance improvements and features we're eager for you to start playing with!
Over the course of a decade—yes, you read that right, ten years!—we've implemented significant changes to the PixiJS engine. But the advancements in this new release are among the most monumental we've ever made!
Two driving factors catalysed our approach to re-engineering the codebase and rendering pipeline in v8:
1. 😍 Embracing WebGPU
The newcomer WebGPU offers a substantial performance improvement over its predecessor, WebGL. It propels web computations and graphics into a new era, providing a more efficient and robust API. Soon, it will be the go-to method for rendering most GPU-powered content on the web.
This shift is reminiscent of PixiJS's initial launch. At that time, WebGL was new and only available in a handful of desktop browsers, while Canvas was ubiquitous. PixiJS's standout feature was its ability to first attempt rendering with WebGL and then fall back to Canvas as a Plan B. This approach allowed PixiJS content to immediately benefit as WebGL gained traction. Fast forward to today, and WebGL is now available on 95% of browsers.
History is repeating itself with WebGPU, currently supported in only a few desktop browsers and roughly 27% of the market. However, it's only a matter of time before it becomes universally supported. PixiJS aims to execute the same fallback strategy, allowing you to always leverage the best technology available without needing to rewrite your code. This is precisely what version 8 achieves and will future proof everything we make for another ten years :D
2. 🚀 Turbocharging Performance
PixiJS has always been synonymous with speed and high-performance graphics. With v8, we've revisited our architecture to optimize both static and dynamic rendering. While v7 is fast, it operates as a somewhat ‘naïve’ renderer.
v7 approach:
- Traverse the scene graph and make sure all the transforms are correct
- Traverse the scene graph a second time and do the following
- Build batches to render
- Upload the data to the GPU
- Draw the batch to the screen.
v8 approach
- Update the transform of only things that changed
- Traverse the scene graph and construct a set of instructions.
- Upload all scene data to GPU in one go.
- Execute rendering based on the instructions.
There are three key changes to this loop that give us a performance bump.
- First, we update only the elements that have changed. If nothing has moved, no code is executed, optimizing computational overhead.
- Second, if the scene graph remains unchanged in subsequent frames, we reuse the existing rendering instructions. This avoids the overhead of reconstructing these instructions for each frame.
- Third, if no elements in the scene change position, the data upload step (Step 3) is entirely skipped, thereby saving bandwidth and further reducing computational work.
The net effect of these improvements? A decent performance leap across varying use-cases:
CPU = time spent by the cpu rendering a single frame GPU = time spend by the gpu rendering a single frame
| Bunny Situation | V7 CPU | V8 CPU | CPU Dif | V7 GPU | V8 GPU | GPU dif |
|---|---|---|---|---|---|---|
| 100k sprites all moving | ~50ms | ~15ms | 233% | ~9ms | ~2ms | 350% |
| 100k sprites not moving | ~21ms | ~0.12ms | 17417% | ~9ms | ~0.5ms | 1700% |
| 100k sprites (changing scene structure) | ~50ms | ~24ms | 108% | ~9ms | ~2ms | 350% |
These benchmark numbers are based on this Bunnymark test that you can try yourself!
Please have a play, you can fiddle with the parameters in the url to change the number of bunnies. Curious to see what numbers all of you get!
Best of all, these improvements apply to WebGPU and the WebGL renderer. As with all of PixiJs’s party tricks, this all happens automatically :D
But Wait, There's More!
While the two key drivers behind this overhaul were performance and usability, we didn't stop there. We've seized this opportunity to enhance the API and introduce a plethora of new features to the engine—far too many to encapsulate in a single post!
Stay tuned for upcoming blog posts where we'll delve deeper into these additional improvements and API refinements, empowering you to create even more remarkable projects. For a comprehensive overview of what's new, don't miss the release notes.
As a crucial note, PixiJS v8 retains much of the familiar API despite undergoing significant internal updates. Our changes are geared toward making PixiJS more robust and user-friendly. When you encounter modifications, rest assured that the v7 methodology will continue to work—you'll simply see a deprecation warning, guiding you towards optimal practices.
Over to you!
As we progress toward the release candidate, now is the perfect time for you to dive in and explore v8. Your feedback at this stage is invaluable for fine-tuning our engine. We invite you to share your thoughts—the good, the bad, and the ugly—report bugs, and even contribute code. Together, we can elevate PixiJS to unprecedented heights.
👇 Don't wait—dive right in! Explore the PixiJS v8 Codebase on GitHub
Steps to install:
via npm you can install the beta version like so:
npm install pixi.js@prerelease-v8
then you can create the most appropriate renderer using the new autoDetectRenderer function:
import { autoDetectRenderer } from "pixi.js";
async function init()
{
const renderer = await autoDetectRenderer({
// any settings
}); // will return a WebGL or WebGPU renderer
}
Start experimenting with PixiJS v8 Beta today and join us in shaping the future of 2D web graphics! 🎉
Keep in touch!
"To stay in the loop, we invite you to follow Doormat23 and PixiJS on social media, where we'll be unveiling more exciting updates shortly. Alternatively, you can join our vibrant community on Discord for direct engagement and real-time conversations.