# QuadRender

Class · category: Graphics

Source: https://github.com/playcanvas/engine/blob/f059dc005842f76e052cdf44d8370c8c7ec475ac/src/scene/graphics/quad-render.js#L54

An object that renders a quad using a [Shader](https://api.playcanvas.com/engine/classes/Shader.md).

Note: QuadRender does not modify render states. Before calling [render](https://api.playcanvas.com/engine/classes/QuadRender.md#render), you should set
up the required states using [GraphicsDevice#setDrawStates](https://api.playcanvas.com/engine/classes/GraphicsDevice.md#setdrawstates), or the individual setters
([GraphicsDevice#setBlendState](https://api.playcanvas.com/engine/classes/GraphicsDevice.md#setblendstate), [GraphicsDevice#setCullMode](https://api.playcanvas.com/engine/classes/GraphicsDevice.md#setcullmode),
[GraphicsDevice#setFrontFace](https://api.playcanvas.com/engine/classes/GraphicsDevice.md#setfrontface), [GraphicsDevice#setDepthState](https://api.playcanvas.com/engine/classes/GraphicsDevice.md#setdepthstate),
[GraphicsDevice#setStencilState](https://api.playcanvas.com/engine/classes/GraphicsDevice.md#setstencilstate)). Otherwise previously set states will be used.

Example:

```javascript
const shader = ShaderUtils.createShader(app.graphicsDevice, {
    uniqueName: 'MyShader',
    attributes: { aPosition: SEMANTIC_POSITION },
    vertexGLSL: '// vertex shader code',
    fragmentGLSL: '// fragment shader code'
});
const quad = new QuadRender(shader);

// Set up render states before rendering (defaults are suitable for full-screen quads)
app.graphicsDevice.setDrawStates();

quad.render();
quad.destroy();
```

## Constructors

### constructor

```ts
new QuadRender(shader: Shader)
```

Create a new QuadRender instance.

**Parameters**

- `shader` ([`Shader`](https://api.playcanvas.com/engine/classes/Shader.md)): The shader to be used to render the quad.

## Methods

### destroy

```ts
destroy(): void
```

Destroys the resources associated with this instance.

### render

```ts
render(viewport?: Vec4, scissor?: Vec4, numInstances?: number): void
```

Renders the quad. If the viewport is provided, the original viewport and scissor is restored
after the rendering.

**Parameters**

- `viewport` ([`Vec4`](https://api.playcanvas.com/engine/classes/Vec4.md), optional): The viewport rectangle of the quad, in pixels. The viewport is
  not changed if not provided.
- `scissor` ([`Vec4`](https://api.playcanvas.com/engine/classes/Vec4.md), optional): The scissor rectangle of the quad, in pixels. Used only if the
  viewport is provided.
- `numInstances` (`number`, optional): Number of instances to draw. When provided, renders
  multiple quads using instanced drawing. Each instance can use the instance index
  (`gl_InstanceID` in GLSL, `pcInstanceIndex` in WGSL) to fetch per-quad data from
  a texture or buffer, allowing each quad to be parameterized independently.