Hero Image

Access modern GPU features with WebGPU

Access modern GPU features with WebGPU

WebGPU enables high-performance 3D graphics and data-parallel computation on
the web.


What is WebGPU? #

WebGPU is a new web API that exposes modern computer graphics capabilities, specifically Direct3D 12, Metal, and Vulkan, for performing rendering and computation operations on a graphics processing unit (GPU).

Architecture diagram showing WebGPUs connection between OS APIs and Direct3D 12, Metal, and Vulkan.
WebGPU architecture diagram

This goal is similar to the WebGL family of APIs, but WebGPU enables access to more advanced features of GPUs. Whereas WebGL is mostly for drawing images but can be repurposed with great effort for other kinds of computations, WebGPU provides first-class support for performing general computations on the GPU.

After four years of development in the W3C's "GPU for the Web" Community Group, WebGPU is now ready for developers to try in Chrome and give feedback on the API and the shading language.

"After a decade of WebGL bringing 3D graphics to the web and enabling all sorts of new experiences, it's now time to upgrade the stack and help web developers take full advantage of modern graphics cards. WebGPU arrives just in time!"

Mr.doob, Creator of Three.js

WebGPU gets us closer to the metal and it also unlocks the power of compute shader for Web developers. New 3D experiences can be built today on Babylon.js Playground.

David Catuhe, Creator of Babylon.js

A Babylon.js demo of a rough sea being simulated using WebGPU's compute shader capability.

Current status #

1. Create explainerComplete
2. Create initial draft of specificationIn progress
3. Gather feedback & iterate on designIn progress
4. Origin trialIn progress
5. LaunchNot started

How to use WebGPU #

Enabling via about://flags #

To experiment with WebGPU locally, without an origin trial token, enable the #enable-unsafe-webgpu flag in about://flags.

Enabling support during the origin trial phase #

Starting in Chrome 94, WebGPU is available as an origin trial in Chrome. The origin trial is expected to end in Chrome 97 (Jan 26, 2022).

Caution: Server-side A/B testing will be used to progressively rollout WebGPU in Chrome.

Origin trials allow you to try new features and give feedback on their usability, practicality, and effectiveness to the web standards community. For more information, see the Origin Trials Guide for Web Developers. To sign up for this or another origin trial, visit the registration page.

Register for the origin trial #

  1. Request a token for your origin.
  2. Add the token to your pages. There are two ways to do that:
    • Add an origin-trial <meta> tag to the head of each page. For example, this may look something like:
      <meta http-equiv="origin-trial" content="TOKEN_GOES_HERE">
    • If you can configure your server, you can also add the token using an Origin-Trial HTTP header. The resulting response header should look something like:
      Origin-Trial: TOKEN_GOES_HERE

Feature detection #

To check if WebGPU is supported, use:

if ("gpu" in navigator) {
// WebGPU is supported! 🎉

Caution: The GPU adapter returned by navigator.gpu.requestAdapter() may be null.

Get started #

WebGPU is a low-level API, like WebGL. It is very powerful, quite verbose, and requires understanding key concepts before diving into it. That's why I'll link to existing high-quality content in this article for you to get started with WebGPU.

Browser support #

WebGPU is available on select devices on Chrome OS, macOS, and Windows 10 in Chrome 94 with more devices being supported in the future. Linux experimental support is available by running Chrome with --enable-features=Vulkan. More support for more platforms will follow.

The full list of known issues is available in the Origin Trial Caveats document.

At the time of writing, WebGPU support is in progress in Safari and Firefox.

Platform support #

As in WebGL's world, some libraries implement WebGPU as well:

  • Dawn is a C++ implementation of WebGPU used in Chromium. It can be used to target WebGPU in C and C++ applications that can then be ported to WebAssembly using Emscripten and automatically take advantage of WebGPU in the browser.
  • Wgpu is a Rust implementation of WebGPU used in Firefox. It is used by various GPU applications in the Rust ecosystem, for example Veloren, a multiplayer voxel RPG.

Demos #

Security and privacy #

To ensure a web page can only work with its own data, all the commands are strictly validated before they reach the GPU. Check out the Malicious use considerations section of the WebGPU spec to learn more about the security tradeoffs regarding driver bugs for instance.

Feedback #

The Chrome team wants to hear about your experiences with WebGPU.

Tell us about the API design #

Is there something about the API or the shading language that does not work like you expected? Or are there missing methods or properties that you need to implement your idea? Have a question or comment on the security model? File a spec issue on the corresponding GitHub repo, or add your thoughts to an existing issue.

Report a problem with the implementation #

Did you find a bug with Chrome's implementation? Or is the implementation different from the spec? File a bug at new.crbug.com. Be sure to include as much detail as you can like the content of the internal about:gpu page, simple instructions for reproducing, and enter Blink>WebGPU in the Components box. Glitch works great for sharing quick and easy repros.

Show support for WebGPU #

Are you planning to use WebGPU? Your public support helps the Chrome team prioritize features and show other browser vendors how critical it is to support them.

Send a tweet to @ChromiumDev using the hashtag #WebGPU and let us know where and how you are using it. Ask a question on StackOverflow with the hashtag #webgpu.

Helpful links #

Acknowledgements #

Hero image via Maxime Rossignol on Unsplash.

Have a question about using this feature? You can get help by asking a question on Stack Overflow, or browsing a list of questions asked by other developers.
Last updated: Improve article