WebGPU

WebGPU API

Interesting classes («interfaces») of the WebGPU include

`GPU`	The main interface for using WebGPU (for example for requesting a `GPUAdapter` interface. Obtained with `navigator.gpu` or `WorkerNavgiator.gpu`
`GPUAdapter`	A representation of a physical GPU, used to request a `GPUDevice` or query adapter information, features and its limits (see `GPUSupportedLimits` for the latter). An adapter can be obtained with `navigator.gpu.requestAdapter()`. The logical counterpart of a `GPUAdapter` is a `GPUDevice`.
`GPUBindGroup`
`GPUBindGroupLayout`	A template used when creating `GPUBindGroup` objects. The template defines the structure and purpose a related GPU resources such as buffers that will be used in a pipeline. Created with `GPUDevice.createBindGroupLayout()`.
`GPUBuffer`	A `GPUBuffer` stores the raw data which is processed by the GPU. Created with `GPUDevice.createBuffer`.
`GPUCommandBuffer`	A pre-recorded list of GPU commands that can be submitted to a `GPUQueue`. Compare with `GPURenderBundle`
`GPUCommandEncoder`	Used to send commands to the GPU. Created with `GPUDevice.createCommandEncoder()`.
`GPUComputePassEncoder`	A `GPUComputePassEncoder` instance is obtained by calling `GPUCommandEncoder.beginComputePass()`
`GPUComputePipeline`	Representation of a pipeline that controls the compute shader stage, can be used in a `GPUComputePassEncoder`. `GPUComputePipeline` instances can be created with `GPUDevice.createComputePipeline()` or `GPUDevice.createComputePipelineAsync()`.
`GPUDevice`	A logical GPU device which exposes the bulk of WebGPU functionality and manages resources. A `GPUDevice` is obtained with `GPUAdapter.requestDevice()`. Compare with `GPUAdapter` which represents a physical GPU.
`GPUQueue`	Executes commands, obtained with `GPUDevice.queue`. See also `GPUCommandBuffer`
`GPUSupportedFeatures`	Compare with `GPUSupportedLimits`
`GPUSupportedLimits`	Obtained with `GPUAdapter.limits` (i. e. `navigator.gpu.requestAdapter().limits`). Compare with `GPUSupportedFeatures`

GPUDevice

GPUDevice.createBindGroupLayout

GPUDevice.createBindGroupLayout( {
    "entries": [
        { "binding": 0, "visibility": GPUShaderStage.COMPUTE, "buffer": { "type": "uniform" } },
        { "binding": 1, "visibility": GPUShaderStage.COMPUTE, "buffer": { "type": "storage" } }
    ]
} );

visibility is a bitwise-flag which defines in what type of shader the bind group will be used. Because they're bitwise-flags, they can be combined with |. The possible values are:

GPUShaderStage.COMPUTE
GPUShaderStage.FRAGMENT
GPUShaderStage.VERTEX

In the code fragment above, the buffer object indicates that the corresponding GPUBindGroup entry will be a GPUBufferBinding object (which contains a GPUBuffer plus offset and size values).

The type value can be one of

"read-only-storage" (buffer is created with GPUBufferUsage.STORAGE)
"storage" (buffer is created with GPUBufferUsage.STORAGE)
"uniform" (buffer is created with GPUBufferUsage.UNIFORM)

GPUDevice.createBuffer

GPUDevice.createBuffer creates a GPUBuffer.

GPUBufferUsage is a combination of

`GPUBufferUsage.COPY_SRC`	Source of a copy operation (for example the source argument of `copyBufferToBuffer()`).	0x0004	4
`GPUBufferUsage.COPY_DST`	Destination of a copy/write operation (for example the destination argument of `copyTextureToBuffer()`).	0x0008	8
`GPUBufferUsage.INDEX`	Index buffer (buffer argument passed to `setIndexBuffer()`).	0x0010	16
`GPUBufferUsage.INDIRECT`	Store indirect command arguments (`indirectBuffer` argument of `drawIndirect()` or `dispatchWorkgroupsIndirect()`)	0x0100	256
`GPUBufferUsage.MAP_READ`	Can be mapped for reading (for example when calling `mapAsync()` with a mode of `GPUMapMode.READ`). This flag may only be combined with `GPUBufferUsage.COPY_DST`.	0x0001	1
`GPUBufferUsage.MAP_WRITE`	Can be mapped for writing (for example when calling `mapAsync()` with a mode of `GPUMapMode.WRITE`). This flag may only be combined with `GPUBufferUsage.COPY_SRC`.	0x0002	2
`GPUBufferUsage.QUERY_RESOLVE`	Can be used to capture query results (`resolveQuerySet()`).	0x0200	512
`GPUBufferUsage.STORAGE`	Can be used as a storage buffer	0x0080	128
`GPUBufferUsage.UNIFORM`	Can be used as a uniform buffer	0x0040	64
`GPUBufferUsage.VERTEX`	Can be used as a vertex buffer (`setVertexBuffer()`).	0x0020	32

GPUDevice.createCommandEncoder

GPUDevice.createCommandEncoder creates a GPUCommandEncoder object which can be used to create and store commands that will be sent to the GPU.

GPUDevice.createComputePipeline

let pip = dev.createComputePipeline(
   {
     layout: this.device.createPipelineLayout({ bindGroupLayouts }), // bindGroupLayouts is created with GPUDevice.createBindGroupLayout()
     compute: {
         module: dev.createShaderModule({ code }),
         entryPoint: "main",
         constants
      },
      label
   });

GPUDevice.createShaderModule

const mod = dev.createShaderModule({ code: wgsl_code });

GPU

GPU.getPreferredCanvasFormat

GPU.getPreferredCanvasFormat returns either the string

"rgba8unorm" or
"bgra8unorm"

GPUCommandEncoder

An instance of a GPUCommandEncoder can be used to create and store commands that will be sent to the GPU.

Interesting methods of GPUCommandEncoder include

beginComputePass (used for computional tasks, which returns an instance of a GPUComputePassEncoder)
beginRenderPass (used for graphical rendering, returns an instance of a GPURenderPassEncoder)
copyBufferToBuffer (which copies data from one GPUBuffer to another)
finish (which completes the recordings of the encoded command sequence and returns a GPUCommandBuffer instance)

TODO: device.queue.submit([commandEncoder.finish()])

GPUComputePassEncoder

Interesting methods of GPUComputePassEncoder incude

setPipeline (which assigns a GPUComputePipeline instance for the compute pass)
setBindGroup (which sets the GPUBindGroup for subsequent compute commands, for a given index)
dispatchWorkgroups
end (which completes the recording of the current compute pass command sequence)

WebGPU Shading Language (WGSL)

October 2024: Trying to run a WebGPU application in a browser on Linux/Debian

The following two attempts to run a WebGPU application in a Linux/Debian environment failed in October 2024.

Chrome

chrome://flags/#enable-unsafe-webgpu

The command line option --enable-unsafe-webgpu.

Starting chrome with one of the following two flags:

--enable-features=Vulkan
--enable-features=SkiaGraphite

Or even --enable-features=Vulkan,UseSkiaRenderer

$ google-chrome --enable-unsafe-webgpu --enable-features=Vulkan

As of October 2024, Chrome 131(?), it seems that an origin trial needs to be registered to run WebGPU in Chrome. (See also HTTP header Origin-Trial).

Firefox Nightly

Trying to following these steps:

# Create /etc/apt/keyrings if it does not already exist
$ sudo install -d -m 0755 /etc/apt/keyrings

# Import the Mozilla APT repository signing key:
$ sudo wget -q https://packages.mozilla.org/apt/repo-signing-key.gpg -O /etc/apt/keyrings/packages.mozilla.org.asc

# Check if fingerprint is 35BAA0B33E9EB396F59CA838C0BA5CE6DC6315A3
$ if [ $(gpg -n -q --import --import-options import-show /etc/apt/keyrings/packages.mozilla.org.asc | awk '/pub/{getline; gsub(/^ +| +$/,""); print "\n"$0"\n"}' != 35BAA0B33E9EB396F59CA838C0BA5CE6DC6315A3 ]; then echo nok; fi

# Add the Mozilla APT repository to your sources list:
$ echo "deb [signed-by=/etc/apt/keyrings/packages.mozilla.org.asc] https://packages.mozilla.org/apt mozilla main" | sudo tee -a /etc/apt/sources.list.d/mozilla.list > /dev/null

$ sudo apt-get update
$ sudo apt-get install firefox-nightly

Chrome Canary

Chrome Canary does not run on Linux, apparently.

Downloaded from here and this one seemed actually to work.

TODO

WebGPU issues a unit of work to the GPU in the form of a GPU command.

Links

WebGPU Draft Community Report

webgpureport.org displays if WebGPU is enabled (project hosted on github).

WebGPU implementation status