# ViewportQuad

#### new Cesium.ViewportQuad(rectangle, material)
engine/Source/Scene/ViewportQuad.js 26

A viewport aligned quad.

Name | Type | Description
--- | --- | ---
`rectangle` | BoundingRectangle | optional The `BoundingRectangle` defining the quad's position within the viewport.
`material` | Material | optional The `Material` defining the surface appearance of the viewport quad.

##### Example:

    const viewportQuad = new Cesium.ViewportQuad(new Cesium.BoundingRectangle(0, 0, 80, 40));
    viewportQuad.material.uniforms.color = new Cesium.Color(1.0, 0.0, 0.0, 1.0);

### Members

#### material : Material
engine/Source/Scene/ViewportQuad.js 73

The surface appearance of the viewport quad. This can be one of several built-in `Material` objects or a custom material, scripted with Fabric.

The default material is `Material.ColorType`.

##### Example:

    // 1. Change the color of the default material to yellow
    viewportQuad.material.uniforms.color = new Cesium.Color(1.0, 1.0, 0.0, 1.0);

    // 2. Change material to horizontal stripes
    viewportQuad.material = Cesium.Material.fromType(Cesium.Material.StripeType);

##### See:

- Fabric

#### rectangle : BoundingRectangle
engine/Source/Scene/ViewportQuad.js 47

The BoundingRectangle defining the quad's position within the viewport.

##### Example:

    viewportQuad.rectangle = new Cesium.BoundingRectangle(0, 0, 80, 40);

#### show : boolean
engine/Source/Scene/ViewportQuad.js 33

Determines if the viewport quad primitive will be shown.

Default Value: `true`

### Methods

#### destroy()
engine/Source/Scene/ViewportQuad.js 174

Destroys the WebGL resources held by this object. Destroying an object allows for deterministic release of WebGL resources, instead of relying on the garbage collector to destroy this object.
Once an object is destroyed, it should not be used; calling any function other than `isDestroyed` will result in a `DeveloperError` exception. Therefore, assign the return value (`undefined`) to the object as done in the example.

##### Throws:

- DeveloperError : This object was destroyed, i.e., destroy() was called.

##### Example:

    quad = quad && quad.destroy();

##### See:

- ViewportQuad#isDestroyed

#### isDestroyed() → boolean
engine/Source/Scene/ViewportQuad.js 154

Returns true if this object was destroyed; otherwise, false.
If this object was destroyed, it should not be used; calling any function other than `isDestroyed` will result in a `DeveloperError` exception.

##### Returns:

True if this object was destroyed; otherwise, false.

##### See:

- ViewportQuad#destroy

#### update()
engine/Source/Scene/ViewportQuad.js 91

Called when `Viewer` or `CesiumWidget` render the scene to get the draw commands needed to render this primitive.

Do not call this function directly. This is documented just to list the exceptions that may be propagated when the scene is rendered:

##### Throws:

- DeveloperError : this.material must be defined.
- DeveloperError : this.rectangle must be defined.

Need help? The fastest way to get answers is from the community and team on the Cesium Forum.