GPURenderPassEncoder

Limited availability

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

Secure context: This feature is available only insecure contexts (HTTPS), in some or allsupporting browsers.

Note: This feature is available inWeb Workers.

TheGPURenderPassEncoder interface of theWebGPU API encodes commands related to controlling the vertex and fragment shader stages, as issued by aGPURenderPipeline. It forms part of the overall encoding activity of aGPUCommandEncoder.

A render pipeline renders graphics toGPUTexture attachments, typically intended for display in a<canvas> element, but it could also render to textures used for other purposes that never appear onscreen. It has two main stages:

A vertex stage, in which a vertex shader takes positioning data fed into the GPU and uses it to position a series of vertices in 3D space by applying specified effects like rotation, translation, or perspective. The vertices are then assembled into primitives such as triangles (the basic building block of rendered graphics) and rasterized by the GPU to figure out what pixels each one should cover on the drawing canvas.
A fragment stage, in which a fragment shader computes the color for each pixel covered by the primitives produced by the vertex shader. These computations frequently use inputs such as images (in the form of textures) that provide surface details and the position and color of virtual lights.

AGPURenderPassEncoder object instance is created via theGPUCommandEncoder.beginRenderPass() 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

beginOcclusionQuery(): Begins an occlusion query at the specified index of the relevantGPUQuerySet (provided as the value of theocclusionQuerySet descriptor property when invokingGPUCommandEncoder.beginRenderPass() to run the render pass).
draw(): Draw primitives based on the vertex buffers provided bysetVertexBuffer().
drawIndexed(): Draw indexed primitives based on the vertex and index buffers provided bysetVertexBuffer() andsetIndexBuffer()
drawIndirect(): Draw primitives using parameters read from aGPUBuffer.
drawIndexedIndirect(): Draw indexed primitives using parameters read from aGPUBuffer.
end(): Completes recording of the current render pass command sequence.
endOcclusionQuery(): Ends an active occlusion query previously started withbeginOcclusionQuery().
executeBundles(): Executes commands previously recorded into the referencedGPURenderBundles, as part of this render pass.
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.
setBindGroup(): Sets theGPUBindGroup to use for subsequent render commands, for a given index.
setBlendConstant(): Sets the constant blend color and alpha values used with"constant" and"one-minus-constant" blend factors (as set in the descriptor of theGPUDevice.createRenderPipeline() method, in theblend property).
setIndexBuffer(): Sets the currentGPUBuffer that will provide index data for subsequent drawing commands.
setPipeline(): Sets theGPURenderPipeline to use for this render pass.
setScissorRect(): Sets the scissor rectangle used during the rasterization stage. After transformation into viewport coordinates any fragments that fall outside the scissor rectangle will be discarded.
setStencilReference(): Sets the stencil reference value using during stencil tests with the"replace" stencil operation (as set in the descriptor of theGPUDevice.createRenderPipeline() method, in the properties defining the various stencil operations).
setVertexBuffer(): Sets or unsets the currentGPUBuffer that will provide vertex data for subsequent drawing commands.
setViewport(): Sets the viewport used during the rasterization stage to linearly map from normalized device coordinates to viewport coordinates.

Examples

In ourbasic render demo, several commands are recorded via aGPUCommandEncoder. Most of these commands originate from theGPURenderPassEncoder created viaGPUCommandEncoder.beginRenderPass().

// …const renderPipeline = device.createRenderPipeline(pipelineDescriptor);// Create GPUCommandEncoder to issue commands to the GPU// Note: render pass descriptor, command encoder, etc. are destroyed after use, fresh one needed for each frame.const 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 the trianglepassEncoder.setPipeline(renderPipeline);passEncoder.setVertexBuffer(0, vertexBuffer);passEncoder.draw(3);// End the render passpassEncoder.end();// End frame by passing array of command buffers to command queue for executiondevice.queue.submit([commandEncoder.finish()]);// …