The interest in bringing rich, dynamic and animated experiences on to the web has been around for decades. The latest innovation in heavy rendering, WebGPU, unlocks a new level of amazing performance by exposing modern hardware capabilities, prioritizing simplicity and cross-platform compatibility. Built in collaboration between companies such as Apple, Google, Mozilla, Microsoft, and Intel, the API better reflects how modern GPU hardware works, while also laying a foundation for even more advanced GPU capabilities in the future. The biggest leap forward from past APIs like WebGL is WebGPU’s compute shaders. This capability allows new classes of algorithms to be ported on the GPU rather than lowering the detail level to keep it performant on JavaScript alone. That means more dynamic details in scenes, high-fidelity physical simulations, and complex visual effects.
Render heavy graphics in the browser
TL;DR
WebGPU builds on previous graphics APIs, unlocking modern hardware potential for local GPU compute and benefiting both developers and users.
The opportunity
Unlock the power of the GPU
Benefits of WebGPU
Higher Performance
Rendering an image takes less than ten seconds with WebGPU, up to three times faster than previously possible with WebGL.
Efficient
Optimizing for modern GPUs results in significant power savings on users’ devices.
Less Crashy
Compute shaders free up the main JavaScript loop, ensuring page interactions stay responsive.
Multi-Threaded
With the ability to multi-thread rendering and compute, WebGPU significantly improves CPU-GPU parallelism compared to alternatives like WebGL.
Beyond a greatly improved user experience, WebGPU also reduces development costs. It relies on existing features of the web platform for things like image and video loading, and leans into well-known JavaScript patterns like Promises for asynchronous operations, greatly reducing the amount of boilerplate code required.
Demo
WebGPU demo by Three.js
You can use WebGPU alongside Three.js to enhance your 3D web development.
Getting started
Implementing WebGPU
As of Chrome 113 (May 2023), WebGPU is supported in Chrome across ChromeOS, macOS, and Windows, and it's set to expand to other platforms and browsers in the near future. This initial rollout lays the foundation for upcoming enhancements and updates, and developers are welcome to forward requests for additional functionalities. A number of popular WebGL libraries (including Babylon.js, Three.js and PlayCanvas) have or are in the process of embracing WebGPU support. This means that transitioning to WebGPU could be as straightforward as making a single line change in most cases.
Growing ecosystem adopting WebGPU
Was this content helpful?
