TheGPUCommandEncoder interface of theWebGPU API represents an encoder that collects a sequence of GPU commands to be issued to the GPU.

AGPUCommandEncoder object instance is created via theGPUDevice.createCommandEncoder() property.

Instance properties

label

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

Instance methods

beginComputePass()

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

beginRenderPass()

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

clearBuffer()

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

copyBufferToBuffer()

Encodes a command that copies data from oneGPUBuffer to another.

copyBufferToTexture()

Encodes a command that copies data from aGPUBuffer to aGPUTexture.

copyTextureToBuffer()

Encodes a command that copies data from aGPUTexture to aGPUBuffer.

copyTextureToTexture()

Encodes a command that copies data from oneGPUTexture to another.

finish()

Completes recording of the command sequence encoded on thisGPUCommandEncoder, returning a correspondingGPUCommandBuffer.

insertDebugMarker()

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

popDebugGroup()

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

pushDebugGroup()

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

resolveQuerySet()

Encodes a command that resolves aGPUQuerySet, copying the results into a specifiedGPUBuffer.

writeTimestamp()Non-standardDeprecated

Encodes a command that writes a timestamp into aGPUQuerySet once the previous commands recorded into the same queuedGPUCommandBuffer have been executed by the GPU.

Examples

In ourbasic render demo, several commands are recorded via aGPUCommandEncoder:

// …// Create GPUCommandEncoderconst commandEncoder = device.createCommandEncoder();// Create GPURenderPassDescriptor to tell WebGPU which texture to draw into, then initiate render passconst renderPassDescriptor = {  colorAttachments: [    {      clearValue: clearColor,      loadOp: "clear",      storeOp: "store",      view: context.getCurrentTexture().createView(),    },  ],};const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);// Draw a trianglepassEncoder.setPipeline(renderPipeline);passEncoder.setVertexBuffer(0, vertexBuffer);passEncoder.draw(3);// End the render passpassEncoder.end();// …

The commands encoded by theGPUCommandEncoder are recorded into aGPUCommandBuffer using theGPUCommandEncoder.finish() method. The command buffer is then passed into the queue via asubmit() call, ready to be processed by the GPU.

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

Specifications

Browser compatibility

See also

• TheWebGPU API