Double Buffering

In the previous lesson, we described a typical game loop:

1. Get input
2. Update all our objects
3. Render the frame

The transition from step 2 to step 3 warrants some further explanation. There is some theory here that is very important to understanding how SDL, and real-time graphics in general, works.

In computer graphics, movement is simulated by quickly showing a sequence of still images, typically called "frames".

A lot of complexity and clever algorithms can go into generating these frames. After all the processing, we are left with a collection of pixel colors that we want to display to the user.

Buffers

A buffer is an area of memory where data is stored for a short period. Frames are buffers - we can think of them as big arrays of pixels. Each pixel represents a color by combining integers representing the red, green, and blue components:

1struct Pixel {
2  int Red;
3  int Green;
4  int Blue;
5}
6
7std::vector<Pixel> Buffer;

The fundamental goal of computer graphics is to determine which color each pixel needs to be, and to write those values into the buffer.

However, this process takes time. It can take many statements, function calls, and calculations to determine the color of a single pixel, and a typical buffer can have millions of such pixels.

That presents a problem: we don’t want users to witness the frame being constructed. That would break the illusion, so instead, we came up with double buffering.

Double Buffering

With double buffering, as expected, there are two buffers. There’s the buffer the user is seeing, and the one we’re building to show to them next.

The buffer the user is seeing is called the front buffer, and the one we’re building is the back buffer. When we’ve finished building the back buffer, we swap them around.

The back buffer becomes the front buffer and is shown to our users. The front buffer becomes the back buffer, and we start creating our next frame in it.

This is typically managed on the GPU but, were we to create the effect in C++, we could imagine it being something like this:

1using Buffer = std::vector<Pixel>;
2Buffer A;
3Buffer B;
4
5Buffer* Front { &A };
6Buffer* Back { &B };
7
8while(true) {
9  DrawEnvironment(Back);
10  DrawCharacters(Back);
11  DrawUI(Back);
12  Swap(Front, Back);
13}

Double Buffering in SDL2

In SDL2, the double buffering is mostly handled for us. When we use commands like SDL_FillRect(), SDL ensures this is being done on the back buffer.

However, we do need to tell SDL when it needs to swap buffers. When we’re working with window surfaces, that command is SDL_UpdateWindowSurface(), which we’ve been using in our Window class in previous lessons.

If we’re making changes in our application, and those changes do not seem to be appearing, the first thing we should do is make sure we’re calling SDL_UpdateWindowSurface() at the appropriate times.

In our example application loop from the previous lesson, we were calling this on every iteration of our loop.

Screen Tearing and VSync

These two topics are generally beyond the scope of this course, but they closely relate to the concept of graphics buffers, and may be of interest to those who want some more context on what they are.

Once our software implements double buffering, there’s an additional layer of complexity introduced by hardware constraints. Computer monitors also don’t update their display all at once.

If we trigger our buffer swap at the same time the monitor is updating, content from two or more frames can be shown on the screen at once. This is commonly called "screen tearing".

There are various options for dealing with this, a popular one being synchronizing the application’s refresh rate with the monitor’s refresh rate. Variations of this idea are commonly called vertical sync (VSync).

Summary

This lesson provides an overview of double buffering - the key mechanism that allows for real-time graphics. Double buffering involves two images, or buffers: a front buffer for display and a back buffer for rendering the next frame. Here are the key points covered:

• Double Buffering Basics: Double buffering involves using a visible front buffer and a hidden back buffer to prepare the next frame.
• Implementation in C++: We explore a simulated C++ environment using type aliases for buffer management and illustrate how to swap buffers.
• SDL2 Application: Double buffering in SDL2 is automated, but requires explicit calls to SDL_UpdateWindowSurface() to manage buffer swaps.
• Screen Tearing and VSync: Screen tearing occurs when buffer swaps align poorly with monitor refreshes, which can be mitigated using vertical sync (VSync).
• Triple Buffering: Triple buffering adds a third buffer to reduce input latency and manage timing issues between user inputs and screen updates.

Next Lesson

Handling Mouse Input

Learn how to detect and handle mouse input events in SDL, including mouse motion, button clicks, and window entry/exit.

ContinueView Course