What's New in WebGPU (Chrome 113)

François Beaufort

After years of development, the Chrome team announces that the first release of WebGPU is now available by default in Chrome on ChromeOS, macOS, and Windows. Check out Chrome ships WebGPU to learn more.

We've also started adding comprehensive documentation for WebGPU on MDN.

And there's more.

Use WebCodecs `VideoFrame` source in `importExternalTexture()`

WebGPU exposes an API to create opaque "external texture" objects from HTMLVideoElement through importExternalTexture(). You can use these objects to sample the video frames efficiently, potentially in a 0-copy way directly from the source YUV data.

However, the initial WebGPU specification does not allow creating GPUExternalTexture objects from WebCodecs VideoFrame objects. This capability is important for advanced video processing apps that already use WebCodecs and would like to integrate WebGPU in the video processing pipeline. Discussion is currently happening in the gpuweb/gpuweb#1380 issue.

Enable the feature

By default, this feature is not enabled in Chrome, but it can be experimented with in Chrome 113 by explicitly enabling the functionality. You can activate it locally by enabling the "WebGPU Developer Features" flag at chrome://flags/#enable-webgpu-developer-features.

To enable it for all visitors to your app, an origin trial is currently underway and set to end in Chrome 118 (December 8, 2023). To participate in the trial, sign up and include a meta element with the origin trial token in either the HTML or HTTP header. For more information, refer to the Get started with origin trials post.

Sample code

// Access the GPU device.
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Create VideoFrame from HTMLVideoElement.
const video = document.querySelector("video");
const videoFrame = new VideoFrame(video);

const texture = device.importExternalTexture({ source: videoFrame });
// TODO: Use texture in bind group creation.

Check out the Video Uploading with WebCodecs experimental sample to play with it.

What's New in WebGPU (Chrome 113)

Use WebCodecs `VideoFrame` source in `importExternalTexture()`

Enable the feature

Sample code