After years of work, we're proud to finally start wider testing for Construct's all-new WebGPU renderer! This is a major technology upgrade for Construct, with lots of under-the-hood improvements and some big performance results compared to the existing WebGL renderer. In this blog we'll cover what's new, some of the technical differences, and look at performance.
Background
WebGPU is a brand-new web technology for computer graphics that supersedes WebGL. It's based on the modern graphics APIs Vulkan, Metal and DirectX 12 that aim to replace the legacy decades-old APIs like OpenGL that preceded them. After years in development WebGPU has just begun to roll out in browsers, starting with Chrome and Edge on desktop.
For more background see the blog posts A brief history of graphics on the web and WebGPU, and From WebGL to WebGPU in Construct, both written back in 2020 when we started work on WebGPU.
Technical improvements
WebGPU is more powerful than WebGL 2, being more like WebGL 3 in terms of capabilities. We were able to take advantage of these new capabilities to make some big internal improvements to how the WebGPU renderer works. Better still, we were able to do this upgrade in a backwards compatible way, avoiding the need for us (and third-party developers) to rewrite large amounts of code interacting with the renderer. Here's a run-down of some of the more significant improvements we made with a ground-up rewrite of Construct's renderer using WebGPU's capabilities.
No more batch queue
Due to the way Construct dynamically renders content, the WebGL renderer has to build a queue of commands while rendering. Then at the end of the frame it submits buffer data and then runs through all the queued commands. However WebGPU can reorder commands, meaning there is no need to build a queue of commands in the WebGPU renderer: instead it can issue commands directly while rendering, at the end of the frame it can insert a command to submit buffer data at the start. This is a major architectural simplifaction to the renderer and improves overall general performance too. There's a bit more detail on this improvement in the blog post From WebGL to WebGPU in Construct.
14x multitexturing
The WebGL renderer can only render from a single texture at a time. Changing texture interrupts the flow of rendering with an instruction to change the current texture, also known as a "texture swap".
Spritesheeting (also known as texture atlases) is a common technique which amongst other benefits, helps mitigate texture swaps: if lots of images are on the same texture, then any of them can be drawn without changing texture. A texture swap is then only needed to switch to an entirely different spritesheet. However other considerations like memory use, the maximum texture size, and other technical restrictions, often mean games have to render from several different textures anyway.
To mitigate this even further, Construct's WebGPU renderer takes advantage of multitexturing. This means instead of only being able to render one texture at a time, it can set a group of 14 textures to render from at once - with no need for texture swaps between those 14 textures! This is done by moving the texture selection to the GPU. Now texture swaps are only needed to switch to another group of 14 textures, far reducing the need for switches. In fact if the game renders from 14 or fewer textures - which is reasonable given most content is likely to be on spritesheets - then no texture swaps are needed at all during rendering!
To demonstrate the potential performance benefit, we built a benchmark that thrashes texture swaps: it renders as many sprites as possible, with every sprite alternating between different spritesheets. In the WebGL renderer this forces a texture swap per sprite. However WebGPU's multitexturing allows it to render from both without any texture swaps. Here are the results for number of sprites at 60 FPS in each renderer.
WebGPU achieves over 17x as many sprites on this test! This is an artificial benchmark and real-world projects will see smaller benefits, but it demonstrates the efficiency improvement of multitexturing. You can run the WebGL and WebGPU benchmarks to see for yourself.
Why 14? WebGPU guarantees the ability to use 16 textures, but Construct reserves two slots for internal purposes.
Batched opacity and colors
In the WebGL renderer, drawing a sprite with a different opacity or color filter to the previous one also interrupted the flow of rendering with an instruction to change the opacity or color, much like a texture swap. (This did not affect particles though, as they use a special rendering mode.)
The WebGPU renderer is now able to efficiently send the current opacity or color with every sprite (or "quad", internally) entirely avoiding the need for opacity or color swaps. Similar to multitexturing, this entirely removes the overhead of such swaps from rendering. We built another benchmark that renders as many sprites as possible all with different opacity, and another one rendering all with different colors, to stress-test this case too, and here are the results.
In both cases WebGPU achieves about 10x as many sprites! As before this is an artificial benchmark and real-world projects will see smaller benefits, but it demonstrates the efficiency improvement in the new WebGPU renderer. You can run the WebGL opacity, WebGPU opacity, WebGL color and WebGPU color benchmarks to see for yourself.
Improved fullscreen copies
Sometimes the renderer needs to copy a texture the size of the screen, such as to process layer effects. These are improved in the WebGPU renderer with the aim of improving GPU performance:
- More efficient fullscreen copies with optimized rasterization and working in the same render pass with no buffer updates
- Fewer fullscreen copies using WebGPU's ability to do things like sample the display texture directly (whereas WebGL needs a separate framebuffer)
Effect compositor improvements
The WebGPU renderer uses a new and improved effect compositor, essentially a third-generation compositor that goes beyond the rewritten WebGL compositor. This features:
- Background blending effects can now sample directly from the backbuffer, avoiding the need for an extra copy
- Background blending effects can in some cases now render directly to the display on a new fast path
- Rotation, mirror, flip, and spritesheet rotation, are now all more efficiently handled with background blending effects, no longer needing the "pre-draw" step
- The whole effect chain runs in a special co-ordinates mode that avoids the need for changing transforms and updating buffers throughout
- Effect parameters are stored in their own per-instance buffers, allowing switching between different object's effects parameters without uploading any buffer data
Better API
OpenGL's API design was never exactly popular, and WebGL inherited the same design that dates all the way back to the 90s. WebGPU has taken the much-needed opportunity to break from the old and completely redesign the API with modern principles. It's much nicer to work with and less error prone!
Modern technology
WebGPU is based on the latest graphics technologies, essentially forming a cross-platform version of Vulkan, Metal and DirectX 12, and is designed for modern graphics hardware. This allows us to take advantage of more extensive minimum capabilities, such as for multitexturing, shader features, texture size limits, and more. It also allows for much simpler graphics drivers, which hopefully also means they are more reliable. Finally it puts us in a good place to benefit from future improvements as WebGPU continues to advance further ahead of WebGL.
Editor support
One of the great things about Construct being fully browser-based is we can share all our code between both the editor and the runtime. We've also been working on WebGPU support for Construct's Layout View, so all these benefits improve the editing experience within Construct as well! This will help ensure smooth performance while editing even the most ambitious projects.
Construct Animate support
Full support for WebGPU is also in Construct Animate, helping ensure your animations are flawlessly smooth even under demanding circumstances - especially since WebGPU is also fully supported in worker mode, running all Construct's logic off the main thread, protecting it from any jank caused by the browser or other web content. Support for WebGPU is the same in both Construct 3 and Construct Animate, so everything noted here and in any documentation applies to both.
Try WebGPU today
We're already trialling WebGPU support in our latest beta releases of Construct, so you can give it a spin today! While in future we expect WebGPU to be enabled by default and supported in all major browsers and platforms, for the time being we are being appropriately cautious with the roll-out of such a big technology upgrade. The status of WebGPU in Construct will change over time, so keep an eye on the Construct WebGPU status forum thread for the latest details. However at time of writing you can use WebGPU in Chrome or Edge on Windows, macOS or ChromeOS, in the latest Construct beta release, with preview and web and desktop exports, and opt-in your project by changing the Use WebGPU project setting to Yes.
Work in progress
We're expecting a fair bit more work to fix any bugs or compatibility issues, as well as gradually rolling out support for other platforms as support widens, and making sure third-party developers have caught up with porting their effects to WGSL. However as mentioned, we're expecting WebGPU to be widely supported and enabled by default in future. We're even working with Google to try to further optimize WebGPU in cases where we think it could be doing even better!
Conclusion
Construct already had outstanding performance, but that's not enough for us! Construct's new WebGPU support pushes its performance and capabilities further still. We've always believed that the web platform is the future, and we've always been right at the leading edge of web technology, being an early adopter of WebGL itself way back in 2011, and taking advantage of the latest improvements from optimizing exports with WebP images to the latest WebGPU support, all working robustly and predictably cross-platform. Combined with powerful JavaScript coding that far outclasses competitors, integrated HTML and CSS capabilities, advanced features like sub-layers, meshes, scene graph, 3D and much much more, Construct is the most advanced game development tool that is still easy to use - so get started with Construct today!