viewport state

content/Graphics/Resources/GraphicsPipeline/VertexInputState.md

@@ -1,7 +1,7 @@
 ---
 title: "Vertex Input State"
 date: 2021-01-28T12:55:51-08:00
-weight: 8
+weight: 9
 ---
 
 Our vertex input state will tell the graphics pipeline how to interpret the vertex data in a buffer so that it can pass this data to the vertex shader.

content/Graphics/Resources/GraphicsPipeline/ViewportState.md

@@ -0,0 +1,53 @@
+---
+title: "ViewportState"
+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;
+}
+```