---
title: "Viewport State"
date: 2021-01-28T13:20:55-08:00
weight: 8
---

The viewport state describes the dimensions of the viewport, which is an area of the framebuffer that will be rendered to.

You define a viewport array like so:

```cs
var myViewport = new Viewport
{
    X = 0,
    Y = 0,
    W = 1280,
    H = 720,
    MinDepth = 0,
    MaxDepth = 1
};

var myViewports = new Viewport[] { myViewport };
```

This creates a 1280x720 viewport originating at the top-left corner with depth ranging from 0 to 1.

You may provide multiple viewports. This can be handy for cases like, for example, rendering a picture-in-picture style mode. Postmodern!

You also need to provide a "scissor rectangle". This is another way to reduce the number of pixels that will be rendered. When you define a scissor rectangle, any pixels outside of the rectangle are discarded.

In this example, we want to render to the entire viewport, so we define a scissor rectangle with the same dimensions as the viewport.

```cs
var myScissorRectangle = new Rect
{
    X = 0,
    Y = 0,
    W = 1280,
    H = 720
};

var myScissors = new Rect[] { myScissorRectangle };
```

Finally we hand off these arrays to the ViewportState struct:

```cs
var myViewportState = new ViewportState
{
    Viewports = myViewports,
    Scissors = myScissors;
}
```