What's New in WebGPU (Chrome 116)

François Beaufort
François Beaufort
GitHub

WebCodecs integration

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 color model data.

However, the initial WebGPU specification did 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. WebCodecs integration adds support for using a VideoFrame as the source for a GPUExternalTexture and a copyExternalImageToTexture() call. See the following example, and the chromestatus entry.

// 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);

// Create texture from VideoFrame.
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.

Lost device returned by GPUAdapter requestDevice()

If the requestDevice() method on GPUAdapter fails because it has been already used to create a GPUDevice, it now fulfills with a GPUDevice immediately marked as lost, rather than returning a promise that rejects with null. See issue chromium:1234617.

const adapter = await navigator.gpu.requestAdapter();
const device1 = await adapter.requestDevice();

// New! The promise is not rejected anymore with null.
const device2 = await adapter.requestDevice();
// And the device is immediately marked as lost.
const info = await device2.lost;

Keep video playback smooth if importExternalTexture() is called

When importExternalTexture() is called with an HTMLVideoElement, the associated video playback is not throttled anymore when the video is not visible in the viewport. See issue chromium:1425252.

Spec conformance

The message argument in the GPUPipelineError() constructor is optional. See change chromium:4613967.

An error is fired when calling createShaderModule() if the WGSL source code contains contains \0. See issue dawn:1345.

The default maximum level of detail (lodMaxClamp) used when sampling a texture with createSampler() is 32. See change chromium:4608063.

Improving developer experience

A message is displayed in the DevTools JavaScript console to remind developers when they are using WebGPU on an unsupported platform. See change chromium:4589369.

Buffer validation error messages are instantly shown in DevTools JavaScript console when getMappedRange() fails without forcing developers to send commands to the queue. See change chromium:4597950.

Screenshot of DevTools JavaScript console featuring buffer validation error message.
Buffer validation error message in DevTools JavaScript console.

Dawn updates

The disallow_unsafe_apis debug toggle has been renamed to allow_unsafe_apis and made its default to disabled. This toggle suppresses validation errors on API entry points or parameter combinations that aren't considered secure yet. It can be useful for debugging. See issue dawn:1685.

The wgpu::ShaderModuleWGSLDescriptor deprecated source attribute is removed in favor of code. See change dawn:130321.

The missing wgpu::RenderBundle::SetLabel() method has been implemented. See change dawn:134502.

Applications can request a particular backend when getting an adapter with the wgpu::RequestAdapterOptionsBackendType option. See an example below and issue dawn:1875.

wgpu::RequestAdapterOptionsBackendType backendTypeOptions = {};
backendTypeOptions.backendType = wgpu::BackendType::D3D12;

wgpu::RequestAdapterOptions options = {};
options.nextInChain = &backendTypeOptions;

// Request D3D12 adapter.
myInstance.RequestAdapter(&options, myCallback, myUserData);

A new SwapChain::GetCurrentTexture() method has been added with additional usages for swapchain textures so that the return wgpu::Texture can be used in copies. See an example below and issue dawn:1551.

wgpu::SwapChain swapchain = myDevice.CreateSwapChain(mySurface, &myDesc);
swapchain.GetCurrentTexture();
swapchain.Present();

This covers only some of the key highlights. Check out the exhaustive list of commits.

What's New in WebGPU

A list of everything that has been covered in the What's New in WebGPU series.

Chrome 131

Chrome 130

Chrome 129

Chrome 128

Chrome 127

Chrome 126

Chrome 125

Chrome 124

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113