GPUCommandEncoder

Limited availability

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

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Note: This feature is available in Web Workers.

The GPUCommandEncoder interface of the WebGPU API represents a command encoder, used to encode commands to be issued to the GPU.

A GPUCommandEncoder object instance is created via the GPUDevice.createCommandEncoder() property.

Instance properties

label Experimental

A string providing a label that can be used to identify the object, for example in GPUError messages or console warnings.

Instance methods

beginComputePass() Experimental

Starts encoding a compute pass, returning a GPUComputePassEncoder that can be used to control computation.

beginRenderPass() Experimental

Starts encoding a render pass, returning a GPURenderPassEncoder that can be used to control rendering.

clearBuffer() Experimental

Encodes a command that fills a region of a GPUBuffer with zeroes.

copyBufferToBuffer() Experimental

Encodes a command that copies data from one GPUBuffer to another.

copyBufferToTexture() Experimental

Encodes a command that copies data from a GPUBuffer to a GPUTexture.

copyTextureToBuffer() Experimental

Encodes a command that copies data from a GPUTexture to a GPUBuffer.

copyTextureToTexture() Experimental

Encodes a command that copies data from one GPUTexture to another.

finish() Experimental

Completes recording of the command sequence encoded on this GPUCommandEncoder, returning a corresponding GPUCommandBuffer.

insertDebugMarker() Experimental

Marks a specific point in a series of encoded commands with a label.

popDebugGroup() Experimental

Ends a debug group, which is begun with a pushDebugGroup() call.

pushDebugGroup() Experimental

Begins a debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a popDebugGroup() method is invoked.

resolveQuerySet() Experimental

Encodes a command that resolves a GPUQuerySet, copying the results into a specified GPUBuffer.

writeTimestamp() Deprecated Experimental Non-standard

Encodes a command that writes a timestamp into a GPUQuerySet once the previous commands recorded into the same queued GPUCommandBuffer have been executed by the GPU.

Examples

In our basic render demo, several commands are recorded via a GPUCommandEncoder:

js
// ...

// Create GPUCommandEncoder
const commandEncoder = device.createCommandEncoder();

// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render pass

const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw a triangle

passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass

passEncoder.end();

// ...

The commands encoded by the GPUCommandEncoder are recoded into a GPUCommandBuffer using the GPUCommandEncoder.finish() method. The command buffer is then passed into the queue via a submit() call, ready to be processed by the GPU.

js
device.queue.submit([commandEncoder.finish()]);

Note: Study the WebGPU samples to find more command encoding examples.

Specifications

Specification
WebGPU
# gpucommandencoder

Browser compatibility

BCD tables only load in the browser

See also