Section 7: Frame Buffer and Final Output

The Big Picture: The Picture Lives in Memory First

The GPU does not paint straight onto the screen. It paints into a block of memory. Only afterwards does a separate part of the GPU read that memory and send it to the monitor. This section explains that hand-over.

7.1 The Frame Buffer: The "Final Image" in VRAM

What it is: The frame buffer is a block of memory (usually in VRAM, Section 1) that holds one complete picture: the colour of every pixel on the screen. One frame is one complete picture.

How big is it? Each pixel needs a few bytes for its colour. A common format uses 4 bytes per pixel (one each for red, green, blue, and one extra).

 1920 x 1080 pixels = 2,073,600 pixels
 x 4 bytes per pixel = 8,294,400 bytes = about 8 MB per frame

 3840 x 2160 pixels = 8,294,400 pixels
 x 4 bytes per pixel = 33,177,600 bytes = about 32 MB per frame

Not large for a modern GPU, but it is rewritten 60 or more times every second.

Where is a pixel in memory? Pixels are stored row by row. The first row of the picture comes first, then the second row, and so on. Pixel number x in row number y sits at: (y × width + x) × bytes per pixel.

 Frame buffer in memory (each cell = one pixel's colour)

 row 0: [p0,0 ][p1,0 ][p2,0 ] ... [p1919,0 ]
 row 1: [p0,1 ][p1,1 ][p2,1 ] ... [p1919,1 ]
 row 2: [p0,2 ][p1,2 ][p2,2 ] ... [p1919,2 ]
  ...
 row 1079:                         [p1919,1079]

Double Buffering: Why There Are Two Pictures

Imagine the GPU draws a frame directly into the buffer the monitor is reading. The monitor would show half-drawn pictures: you would see objects appear piece by piece. Instead, the GPU uses two buffers:

When the back buffer is complete, the two swap roles: the back buffer becomes the front buffer, and the old front buffer becomes the next place to draw. A set of buffers that take turns like this is called a swap chain. (In Direct3D, the swap chain is created through DXGI, Section 3.)

 Frame 1:  GPU draws into  [Buffer A]      display shows  [Buffer B]
                               |  swap  |
 Frame 2:  GPU draws into  [Buffer B]      display shows  [Buffer A]
                               |  swap  |
 Frame 3:  GPU draws into  [Buffer A]      display shows  [Buffer B]

Analogy: A painter works on a canvas hidden behind a curtain. When it is finished, the curtain is pulled back (swap). While the audience looks at it, the painter starts the next picture on a second canvas.

Many games use three buffers (triple buffering), so that the GPU never has to stop and wait.

Swap and VSync (continued from Section 6.3). When can the swap happen?

• VSync on: the swap waits for the gap between two redraws of the monitor. Never mid-picture, so there is no tearing. The GPU may have to wait.
• VSync off: the swap happens immediately, perhaps in the middle of a redraw. The monitor then shows the top of the old frame and the bottom of the new one: a tear.

 Tearing (VSync off)                 No tearing (VSync on)

 ┌───────────────────────┐          ┌───────────────────────┐
 │  old frame (top part) │          │                       │
 │                       │          │  one whole frame      │
 │ ~~~~~~~ tear ~~~~~~~~ │          │  only                 │
 │  new frame (bottom)   │          │                       │
 └───────────────────────┘          └───────────────────────┘

7.2 Scanout to the Monitor

What it is: Scanout is the process of reading the front buffer, pixel by pixel, and sending the pixels down the cable. The part of the GPU that does this is the display engine (you saw "Display Control Logic" in Figure 32.1).

How scanout works:

1. Start at the top-left pixel of the picture.
2. Send the pixels of the first row, left to right.
3. Move to the second row, and so on, down to the last row at the bottom-right.
4. A short pause (the vertical blanking interval) while the scan returns to the top.
5. Start again, 60 (or more) times every second.

 Scan direction

 ─────────────────────────▶ row 0   (sent first)
 ─────────────────────────▶ row 1
 ─────────────────────────▶ row 2
          ...
 ─────────────────────────▶ row 1079 (sent last)
 then a short pause, and back to the top

This idea comes from old cathode-ray tube (CRT) televisions, where an electron beam really did sweep across the screen line by line. Modern LCD and OLED screens have no beam, but the signal still arrives in the same order, row by row.

The timing at 60 Hz. At 60 Hz, one redraw takes about 16.7 ms (1000 ÷ 60). The GPU therefore has about 16.7 ms to make each frame if it wants to keep up. If a frame takes 25 ms, the display will show the old frame once more (you perceive a stutter).

 Time  0 ms        16.7 ms        33.3 ms        50 ms
       |-------------|--------------|--------------|
       scan frame 1   scan frame 2   scan frame 3
       ^ swap here     ^ swap here    ^ swap here   (VSync on)

The pixel clock. The display engine sends pixels at a steady rate called the pixel clock (how many pixels per second). It equals about: width × height × refresh rate (plus the small pauses). For 1080p at 60 Hz that is about 150 million pixels per second. This is where the cable bandwidth in Section 5 comes from.

Check your own refresh rate. Open Settings → System → Display → Advanced display. It shows the display name, the current resolution and the refresh rate. A drop-down lets you choose other refresh rates that your monitor supports (changing it is safe and can be undone from the same page, but this chapter's lab only looks).

Summary