WebGPU

# 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).

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

# Current status

# 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 109 (Feb 1, 2023).

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! 🎉
}

# 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.

• WebGPU — All of the cores, none of the canvas
• Get started with GPU Compute on the web
• A Taste of WebGPU in Firefox
• WebGPU for Metal Developers, Part One
• Learn what key data structures and types are needed to draw in WebGPU
• WebGPU Explainer
• WebGPU Best Practices

# Browser support

WebGPU is available on select devices on ChromeOS, macOS, and Windows 10 in Chrome 94 with more devices being supported in the future. Android support is available on Android in Chrome 111. 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 ot-caveats.

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

• WebGPU Samples
• Metaballs rendered in WebGPU
• WebGPU Clustered Forward Shading

# 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

• Public explainer
• WebGPU API Spec
• WebGPU Shading Language (WGSL)
• Chromium tracking bug
• ChromeStatus.com entry
• Blink Component: Blink>WebGPU
• TAG Review
• Intent to Experiment
• WebGPU's matrix channel

# Acknowledgements

Hero image via Maxime Rossignol on Unsplash.