GPUDevice: createCommandEncoder() method

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.

The createCommandEncoder() method of the GPUDevice interface creates a GPUCommandEncoder, used to encode commands to be issued to the GPU.

Syntax

js
createCommandEncoder()
createCommandEncoder(descriptor)

Parameters

descriptor Optional

An object containing the following properties:

label Optional

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

Return value

A GPUCommandEncoder object instance.

Examples

In our basic render demo, several commands are recorded via a GPUCommandEncoder created via createCommandEncoder():

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
# dom-gpudevice-createcommandencoder

Browser compatibility

BCD tables only load in the browser

See also