recursal/MDN huggingface dataset:
GPURenderPassEncoder: endOcclusionQuery() method
================================================

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

 The **`endOcclusionQuery()`** method of the
 `GPURenderPassEncoder` interface ends an active occlusion query previously started with `beginOcclusionQuery()`.

Syntax
------


```js
endOcclusionQuery()
```

### Parameters

None.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`endOcclusionQuery()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* An occlusion query is active for this render pass (i.e. via a previous `beginOcclusionQuery()` call).
Examples
--------


```js
// ...

// Create a query set to hold the occlusion queries
const querySet = device.createQuerySet({
  type: "occlusion",
  count: 32,
});

// Render pass descriptor object, including the querySet
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
  occlusionQuerySet: querySet,
};

// Begin the render pass
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Begin an occlusion query at index 0
passEncoder.beginOcclusionQuery(0);

// Run some rendering commands
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the occlusion query
passEncoder.endOcclusionQuery();

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurenderpassencoder-endocclusionquery |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: popDebugGroup() method
============================================

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

 The **`popDebugGroup()`** method of the
 `GPURenderPassEncoder` interface ends a render pass debug group, which is begun with a `pushDebugGroup()` call.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
popDebugGroup()
```

### Parameters

None.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`popDebugGroup()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* The render pass encoder's debug stack is not empty (i.e. at least one render pass debug group was previously started with `pushDebugGroup()`).
Examples
--------


```js
// ...

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

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

passEncoder.popDebugGroup();

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-popdebuggroup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: draw() method
===================================

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

 The **`draw()`** method of the
 `GPURenderPassEncoder` interface draws primitives based on the vertex buffers provided by `setVertexBuffer()`.

Syntax
------


```js
draw(vertexCount)
draw(vertexCount, instanceCount)
draw(vertexCount, instanceCount, firstVertex)
draw(vertexCount, instanceCount, firstVertex, firstInstance)
```

### Parameters

`vertexCount`

A number defining the number of vertices to draw.

`instanceCount` Optional

A number defining the number of instances to draw. If omitted, `instanceCount` defaults to 1.

`firstVertex` Optional

A number defining the offset into the vertex buffers, in vertices, to begin drawing from. If omitted, `firstVertex` defaults to 0.

`firstInstance` Optional

A number defining the first instance to draw. If omitted, `firstInstance` defaults to 0.

### Return value

None (`Undefined`).

Examples
--------

In our basic render demo, several commands are recorded via a `GPUCommandEncoder`. Most of these commands originate from the `GPURenderPassEncoder` created via `GPUCommandEncoder.beginRenderPass()`. `draw()` is used to specify that three vertices should be drawn to create our triangle.


```js
// ...

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 pass
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw the triangle
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass
passEncoder.end();

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-draw |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: drawIndirect() method
===========================================

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

 The **`drawIndirect()`** method of the
 `GPURenderPassEncoder` interface draws primitives using parameters read from a `GPUBuffer`.

Syntax
------


```js
drawIndirect(indirectBuffer, indirectOffset)
```

### Parameters

`indirectBuffer`

A `GPUBuffer` containing the `vertexCount`, `instanceCount`, `firstVertex`, and `firstInstance` values needed to carry out the drawing operation. The buffer must contain a tightly packed block of four 32-bit unsigned integer values representing the values (16 bytes total), given in the same order as the arguments for `GPURenderPassEncoder.draw()`. So for example:


```js
const uint32 = new Uint32Array(4);
uint32[0] = 3; // The vertexCount value
uint32[1] = 1; // The instanceCount value
uint32[2] = 0; // The firstVertex value
uint32[3] = 0; // The firstInstance value

// Write values into a GPUBuffer
device.queue.writeBuffer(buffer, 0, uint32, 0, uint32.length);
```


`indirectOffset`

The offset, in bytes, into `indirectBuffer` where the value data begins.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`drawIndirect()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* `indirectBuffer`'s `GPUBuffer.usage` contains the `GPUBufferUsage.INDIRECT` flag.
* `indirectOffset` + the total size specified by the value parameters in the `indirectBuffer` is less than or equal to the `indirectBuffer`'s `GPUBuffer.size`.
* `indirectOffset` is a multiple of 4.
Examples
--------


```js
// ...

// Create GPURenderPassEncoder
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Set pipeline and vertex buffer
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);

// Create drawIndirect values
const uint32 = new Uint32Array(4);
uint32[0] = 3;
uint32[1] = 1;
uint32[2] = 0;
uint32[3] = 0;

// Create a GPUBuffer and write the draw values into it
const drawValues = device.createBuffer({
  size: 16,
  usage: GPUBufferUsage.COPY\_DST | GPUBufferUsage.INDIRECT,
});
device.queue.writeBuffer(drawValues, 0, uint32, 0, uint32.length);

// Draw the vertices
passEncoder.drawIndirect(drawValues, 0);

// End the render pass
passEncoder.end();

// End frame by passing array of GPUCommandBuffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurendercommandsmixin-drawindirect |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: insertDebugMarker() method
================================================

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

 The **`insertDebugMarker()`** method of the
 `GPURenderPassEncoder` interface marks a specific point in a series of encoded render pass commands with a label.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
insertDebugMarker(markerLabel)
```

### Parameters

`markerLabel`

A string representing the label to insert.

### Return value

None (`Undefined`).

Examples
--------


```js
// ...

passEncoder.insertDebugMarker("mymarker");

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-insertdebugmarker |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: label property
====================================

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

 The **`label`** read-only property of the
 `GPURenderPassEncoder` interface is a string providing a label that can be used to identify the object, for example in `GPUError` messages or console warnings.

This can be set by providing a `label` property in the descriptor object passed into the originating `GPUCommandEncoder.beginRenderPass()` call, or you can get and set it directly on the `GPURenderPassEncoder` object.

Value
-----

A string. If no label value has previously been set, getting the label returns an empty string.

Examples
--------

Setting and getting a label via `GPURenderPassEncoder.label`:


```js
const commandEncoder = device.createCommandEncoder();

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

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);
passEncoder.label = "myrenderpassencoder";

console.log(passEncoder.label); // "myrenderpassencoder"
```


Setting a label via the originating `GPUCommandEncoder.beginRenderPass()` call, and then getting it via `GPURenderPassEncoder.label`:


```js
const commandEncoder = device.createCommandEncoder();

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

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

console.log(passEncoder.label); // "myrenderpassencoder"
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpuobjectbase-label |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: setScissorRect() method
=============================================

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

 The **`setScissorRect()`** method of the
 `GPURenderPassEncoder` interface 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.

Syntax
------


```js
setScissorRect(x, y, width, height)
```

### Parameters

`x`

A number representing the minimum X value of the scissor rectangle, in pixels.

`y`

A number representing the minimum Y value of the scissor rectangle, in pixels.

`width`

A number representing the width of the scissor rectangle, in pixels.

`height`

A number representing the height of the scissor rectangle, in pixels.


**Note:** If a `setScissorRect()` call is not made, the default values are `(0, 0, attachment width, attachment height)` for each render pass.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`setViewport()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* `x` + `width` is less than or equal to the width of the render pass's render attachments (see note below).
* `y` + `height` is less than or equal to the height of the render pass's render attachments (see note below).

**Note:** See the color and depth/stencil attachments specified in the descriptor of `GPUCommandEncoder.beginRenderPass()`; the width and height are based on that of the `GPUTexture` that their `view`s originate from.

Examples
--------

### Basic snippet

In a typical canvas render, the following could be used to discard any rendering outside of the top-left quarter of the canvas:


```js
passEncoder.setScissorRect(0, 0, canvas.width / 2, canvas.height / 2);
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurenderpassencoder-setscissorrect |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: end() method
==================================

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

 The **`end()`** method of the
 `GPURenderPassEncoder` interface completes recording of the current render pass command sequence.

Syntax
------


```js
end()
```

### Parameters

None.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`end()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* The `GPURenderPassEncoder` is open (i.e. not already ended via an `end()` call).
* There is no occlusion query (i.e. started via `beginOcclusionQuery()`) active on the current render pass.
* The debug stack for the current render pass is empty (i.e. no render pass debug group is currently open, as opened by `pushDebugGroup()`).
* The number of draw commands encoded in this render pass is less than or equal to the `maxDrawCount` property set in the `GPUCommandEncoder.beginRenderPass()` descriptor.
Examples
--------

In our basic render demo, several commands are recorded via a `GPUCommandEncoder`. Most of these commands originate from the `GPURenderPassEncoder` created via `GPUCommandEncoder.beginRenderPass()`. `end()` is called in an appropriate place to end the render pass.


```js
// ...

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 pass
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
};

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Draw the triangle
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the render pass
passEncoder.end();

// End frame by passing array of command buffers to command queue for execution
device.queue.submit([commandEncoder.finish()]);

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurenderpassencoder-end |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: pushDebugGroup() method
=============================================

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

 The **`pushDebugGroup()`** method of the
 `GPURenderPassEncoder` interface begins a render pass debug group, which is marked with a specified label, and will contain all subsequent encoded commands up until a `popDebugGroup()` method is invoked.

This could be used for telemetry, or may be utilized in `GPUError` messages, browser dev tools, or other services in the future to help with debugging.

Syntax
------


```js
pushDebugGroup(groupLabel)
```

### Parameters

`groupLabel`

A string representing the label for the debug group.

### Return value

None (`Undefined`).

Examples
--------


```js
// ...

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

passEncoder.pushDebugGroup("mygroupmarker"); // Start labeled debug group

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

passEncoder.popDebugGroup();

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpudebugcommandsmixin-pushdebuggroup |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: beginOcclusionQuery() method
==================================================

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

 The **`beginOcclusionQuery()`** method of the
 `GPURenderPassEncoder` interface begins an occlusion query at the specified index of the relevant `GPUQuerySet` (provided as the value of the `occlusionQuerySet` descriptor property when invoking `GPUCommandEncoder.beginRenderPass()` to run the render pass).

Syntax
------


```js
beginOcclusionQuery(queryIndex)
```

### Parameters

`queryIndex`

The index in the `GPUQuerySet` to begin the occlusion query at.

### Return value

None (`Undefined`).

### Validation

The following criteria must be met when calling **`beginOcclusionQuery()`**, otherwise a `GPUValidationError` is generated and the `GPURenderPassEncoder` becomes invalid:

* A `GPUQuerySet` was specified in the `occlusionQuerySet` descriptor property when invoking the originating `GPUCommandEncoder.beginRenderPass()`.
* `queryIndex` is smaller than `GPUQuerySet.count`.
* The `queryIndex` has not already been written to in the same render pass.
* An occlusion query is not already active for this render pass (i.e. via a previous `beginOcclusionQuery()` call).
Examples
--------


```js
// ...

// Create a query set to hold the occlusion queries
const querySet = device.createQuerySet({
  type: "occlusion",
  count: 32,
});

// Render pass descriptor object, including the querySet
const renderPassDescriptor = {
  colorAttachments: [
    {
      clearValue: clearColor,
      loadOp: "clear",
      storeOp: "store",
      view: context.getCurrentTexture().createView(),
    },
  ],
  occlusionQuerySet: querySet,
};

// Begin the render pass
const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

// Begin an occlusion query at index 0
passEncoder.beginOcclusionQuery(0);

// Run some rendering commands
passEncoder.setPipeline(renderPipeline);
passEncoder.setVertexBuffer(0, vertexBuffer);
passEncoder.draw(3);

// End the occlusion query
passEncoder.endOcclusionQuery();

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurenderpassencoder-beginocclusionquery |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API
GPURenderPassEncoder: setStencilReference() method
==================================================

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

 The **`setStencilReference()`** method of the
 `GPURenderPassEncoder` interface sets the stencil reference value using during stencil tests with the `"replace"` stencil operation (as set in the descriptor of the `GPUDevice.createRenderPipeline()` method, in the properties defining the various stencil operations).

Syntax
------


```js
setStencilReference(reference)
```

### Parameters

`reference`

A number representing the new stencil reference value to set for the render pass.


**Note:** If a `setStencilReference()` call is not made, the stencil reference value defaults to 0 for each render pass.

### Return value

None (`Undefined`).

Examples
--------


```js
// ...

const passEncoder = commandEncoder.beginRenderPass(renderPassDescriptor);

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

passEncoder.end();

// ...
```

Specifications
--------------

| Specification |
| --- |
| WebGPU # dom-gpurenderpassencoder-setstencilreference |

Browser compatibility
---------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The WebGPU API