DOCSEARCHbyAlgolia
Submit Docs

WebGPU API Documentation

website·Indexed 31 days ago

https://webgpu.net

A next-generation Web graphics API providing modern GPU access for high-performance graphics rendering and general-purpose computation. This documentation covers core concepts, rendering pipelines, compute shader fundamentals, and key interfaces such as Navigator.gpu and GPUAdapter.

Tokens
6.3K
Snippets
29
Records
41
Agent score
46%

What's inside WebGPU

  1. Overview of WebGPU capabilities

    WebGPU is a modern Web standard API designed for high-performance graphics rendering and general-purpose computing (GPGPU). It is based on modern native graphics APIs such as Vulkan, Metal, and Direct3D 12, providing direct access to GPU hardware capabilities and support for compute shaders across desktop and mobile devices.

  2. Overview of WebGPU capabilities

    WebGPU is a modern Web standard API that provides high-performance graphics rendering and general-purpose computing (GPGPU) by allowing direct access to GPU hardware. It is designed based on modern graphics APIs such as Vulkan, Metal, and Direct3D 12, ensuring cross-platform compatibility across desktop and mobile devices.

  3. Inspect GPU hardware capabilities with GPUAdapter

    The GPUAdapter object provides information about the user's hardware capabilities. The info property contains details like vendor, architecture, and device description. Additionally, features and limits can be used to determine supported GPU features and the maximum/minimum operation parameters the hardware can handle.
    const info = adapter.info;
if (info) {
  console.log("Vendor: " + info.vendor);
  console.log("Architecture: " + info.architecture);
  console.log("Device: " + info.device);
  console.log("Description: " + info.description);
}

  4. Use GPUAdapter to inspect hardware capabilities

    The GPUAdapter represents the physical GPU hardware. It provides information about the vendor, architecture, and device, as well as supported features and limits (maximum/minimum operational parameters).
    const adapter = await navigator.gpu.requestAdapter();

// Access hardware information
const info = adapter.info;
if (info) {
  console.log("Vendor: " + info.vendor);
  console.log("Architecture: " + info.architecture);
  console.log("Device: " + info.device);
  console.log("Description: " + info.description);
}

// Check supported features and limits
console.log(adapter.features);
console.log(adapter.limits);

  5. Execute a render pass in WebGPU

    To draw to the screen, you must create a command encoder, begin a render pass with a descriptor that defines the target texture view and clear color, set the active pipeline, and call draw(). Finally, the encoded commands must be submitted to the device queue.
    const textureView = context.getCurrentTexture().createView();
const renderPassDescriptor = {
  colorAttachments: [
    {
      view: textureView,
      clearValue: { r: 0.3, g: 0.3, b: 0.3, a: 1.0 },
      loadOp: "clear",
      storeOp: "store",
    },
  ],
};

const encoder = device.createCommandEncoder();
const pass = encoder.beginRenderPass(renderPassDescriptor);
pass.setPipeline(renderPipeline);
pass.draw(3);
pass.end();

device.queue.submit([encoder.finish()]);

  6. Use WebGPU with 3D rendering frameworks

    Several high-level frameworks provide WebGPU support to simplify rendering: Babylon.js (supported since v5.0) and Three.js (which provides various WebGPU-specific examples).

  7. Use WebGPU with 3D rendering frameworks

    Several high-level rendering engines support WebGPU to simplify graphics development: Babylon.js (supported since v5.0) and Three.js (which provides various WebGPU-specific examples).

  8. Initialize WebGPU device and canvas context

    To start using WebGPU, you must first verify browser support via navigator.gpu, request a GPU adapter, and then request a device from that adapter. To output graphics, obtain the webgpu context from a canvas element and configure it using the device and the browser's preferred canvas format.
    // Initialize GPU
if (!navigator.gpu) throw new Error("WebGPU not supported");
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

// Configure Canvas
const canvas = document.getElementById("webgpu-canvas");
const context = canvas.getContext("webgpu");
const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
  device: device,
  format: canvasFormat,
});

  9. Initialize WebGPU and obtain a GPUDevice

    To interact with the GPU in WebGPU, you must follow a specific sequence of object acquisition: check for browser support via navigator.gpu, request a GPUAdapter (which represents the physical GPU hardware), and then request a GPUDevice (which serves as the logical connection to the GPU).
    if (!navigator.gpu) {
  throw new Error("WebGPU not supported.");
}

// Obtain the physical GPU adapter
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  throw new Error("No appropriate GPUAdapter found.");
}

// Obtain the logical device connection
const device = await adapter.requestDevice();

  10. Configure a Canvas for WebGPU rendering

    To render graphics to a web page, you must bind a GPUDevice to an HTML <canvas> element. This involves retrieving the webgpu context from the canvas and configuring it with the device and the browser's preferred canvas format (obtained via navigator.gpu.getPreferredCanvasFormat()).
    const canvas = document.getElementById("mycanvas");
const context = canvas.getContext("webgpu");

const canvasFormat = navigator.gpu.getPreferredCanvasFormat();
context.configure({
  device: device,
  format: canvasFormat,
});

  11. Initialize a WebGPU device

    To start using WebGPU, you must first verify browser support via navigator.gpu, request a GPUAdapter (which represents the physical GPU), and then request a GPUDevice (the logical connection to the GPU) from that adapter.
    // Check if the browser supports WebGPU
if (!navigator.gpu) {
  throw new Error('WebGPU is not supported by the current browser');
}

// Request a GPU adapter
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  throw new Error('Failed to get WebGPU adapter');
}

// Request a GPU device
const device = await adapter.requestDevice();

console.log('WebGPU device initialized successfully!');

  12. Initialize WebGPU and set up the rendering pipeline

    To develop with WebGPU, you must follow a specific sequence of object creation to send command buffers to the GPU queue. The basic workflow consists of 6 core steps for general GPU operations and 3 additional steps for graphics rendering to a canvas.
    // 1. Check for WebGPU support
if (!navigator.gpu) {
  throw new Error("WebGPU not supported.");
}

// 2. Request the GPUAdapter
const adapter = await navigator.gpu.requestAdapter();
if (!adapter) {
  throw new Error("No appropriate GPUAdapter found.");
}

// 3. Request the GPUDevice (the logical connection to the GPU)
const device = await adapter.requestDevice();

// 4. Create a GPUCommandEncoder to record commands
const encoder = device.createCommandEncoder();

// 5. Record commands (e.g., using beginRenderPass or beginComputePass)
// ... encoder configuration ...

// 6. Submit the command buffer to the GPUQueue
const commandBuffer = encoder.finish();
device.queue.submit([commandBuffer]);