GPU

Limited availability

This feature is not Baseline because it does not work in some of the most widely-used browsers.

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheGPU interface of theWebGPU API is the starting point for using WebGPU. It can be used to return aGPUAdapter from which you can request devices, configure features and limits, and more.

TheGPU object for the current context is accessed via theNavigator.gpu orWorkerNavigator.gpu properties.

Instance properties

wgslLanguageFeaturesRead only: AWGSLLanguageFeatures object that reports theWGSL language extensions supported by the WebGPU implementation.

Instance methods

requestAdapter(): Returns aPromise that fulfills with aGPUAdapter object instance. From this you can request aGPUDevice, which is the primary interface for using WebGPU functionality.
getPreferredCanvasFormat(): Returns the optimal canvas texture format for displaying 8-bit depth, standard dynamic range content on the current system.

Examples

Requesting an adapter and a device

async function init() {  if (!navigator.gpu) {    throw Error("WebGPU not supported.");  }  const adapter = await navigator.gpu.requestAdapter();  if (!adapter) {    throw Error("Couldn't request WebGPU adapter.");  }  const device = await adapter.requestDevice();  // …}

Configuring a GPUCanvasContext with the optimal texture format

const canvas = document.querySelector("#gpuCanvas");const context = canvas.getContext("webgpu");context.configure({  device,  format: navigator.gpu.getPreferredCanvasFormat(),  alphaMode: "premultiplied",});