From Cradle to Framebuffer

Before any pixels appear on the screen, our models must pass through an obstacle course called the graphics pipeline. The pipeline roughly follows these stages:

1. A geometric model is loaded or generated by the application and uploaded to the graphics card in vertex buffers.
2. The application issues a draw call.
3. The vertex shader transforms the vertices, passing each through a chain of matrix transformations.
4. Primitives that extend outside of the viewport are clipped so only their visible portions continue on through the pipeline.
5. The positions of the clipped vertices are transformed into pixel coordinates.
6. The fragment shader computes the color of each fragment that falls between the pixels of the clipped vertices. It is passed any interpolated vertex attributes.
7. Fragments are tested to see if their colors should be written to the framebuffer. One common test discards a fragment if it is behind other geometry.
8. The colors of the surviving fragments either overwrite or blend with colors already written to the framebuffer.

We explored some of these stages in earlier chapters. For example, we've seen how to issue draw calls and write shaders for simple models defined in the unit cube coordinate system. In this chapter, we open up all of space so that we can render complex 3D scenes containing many models. By the chapter's end, we'll be able to answer the following questions:

• What coordinate systems does a model pass through on its way to being rasterized and what operations do we perform in each system?
• How can we render mini-maps and split-screens, which do not fill the entire window?
• Which color should be assigned to a pixel if more than fragment tries to write to it?
• How do we push animated or moving geometry through the pipeline?

Programs there merely emit text to standard output have it easy. We issue a print statement, and the new text magically shows up right at the cursor. In graphics programs, the magic is on us. We have to think about position, size, color, depth, overlap, rendering style, and time. WebGL helps with storage and rasterization, but we'll be there at every stage of the pipeline.