The viewport

So far, all vertices where defined in such a way, that they are directly put onto the screen with pixel coordinates, either directly in coordinates or with transforms.

This isn't the nicest way generally, even in the 2D case. For example, if our screen changes resolution, we have to redefine all the vertices or transforms. With the definition of the perspective matrix and the visible volume we have a sensible way to specify points. We use an abstract drawing surface which is specified in the range $[-1,1]^2$. We then additionally specify a viewport, a region of our actual drawing surface (window, canvas, ...) and transform all vertices from $[-1,1]^2$ to $[x_0,y_0]\times[x_0+w,y_0+h]$. That way, we can easily change resolutions and even draw subimages onto our drawing surface by specifying the viewport origin ($x_0,y_0$) and the size ($w,h$). It isn't really necessary, but in like in OpenGL, we will transform the depth ($z$) values as well, but just from $[-1,1]$ to $[0,1]$.

Now these transformations aren't that complicated. Here is how to get the $x$ coordinate transform as a sequence of transformations: $[-1,1] * \frac{1}{2} \Rightarrow [-\frac{1}{2},\frac{1}{2}] + \frac{1}{2} \Rightarrow [0,1] * w \Rightarrow [0,w] + x_0 \Rightarrow [x_0, x_0 + w]$.

The full transformations from normalized device coordinates (NDC) to window coordinates (W) are thus given by:

$$x_W = (\frac{1}{2} x_{\text{NDC}} + \frac{1}{2})w + x_0 \\ y_W = (\frac{1}{2} y_{\text{NDC}} + \frac{1}{2})h + y_0 \\ z_W = \frac{1}{2} z_{\text{NDC}} + \frac{1}{2}$$

You can put that transform in a matrix or just write out the equations. And with that we have defined our viewport!