Double Buffering

This lesson covers the fundamental graphics technique of double buffering.

Understand why directly drawing frames can lead to visual artifacts, grasp the concept of using separate front and back buffers, and see how SDL simplifies buffer swapping with SDL_UpdateWindowSurface().

We'll modify our existing code to implement a proper rendering loop with buffer clearing and swapping.

Starting Point

In this lesson, we'll be continuing to work on our main.cpp and Window.h files. Their current state is provided below.

1#include <SDL.h>
2#include "Window.h"
3
4int main(int argc, char** argv) {
5  SDL_Init(SDL_INIT_VIDEO);
6  Window GameWindow;
7
8  SDL_Event Event;
9  while (true) {
10    while (SDL_PollEvent(&Event)) {
11      if (Event.type == SDL_QUIT) {
12        SDL_Quit();
13        return 0;
14      }
15    }
16  }
17
18  return 0;
19}

1#pragma once
2#include <iostream>
3#include <SDL.h>
4
5class Window {
6public:
7  Window(){
8    SDLWindow = SDL_CreateWindow(
9      "Hello Window",
10      SDL_WINDOWPOS_UNDEFINED,
11      SDL_WINDOWPOS_UNDEFINED,
12      700, 300, 0
13    );
14
15    SDL_FillRect(
16      GetSurface(),
17      nullptr,
18      SDL_MapRGB(
19        GetSurface()->format, 50, 50, 50
20      )
21    );
22
23    SDL_UpdateWindowSurface(SDLWindow);
24  }
25
26  SDL_Surface* GetSurface() const {
27    return SDL_GetWindowSurface(SDLWindow);
28  }
29  
30  Window(const Window&) = delete;
31  Window& operator=(const Window&) = delete;
32  
33  ~Window() {
34    if (SDLWindow && SDL_WasInit(SDL_INIT_VIDEO)) {
35      SDL_DestroyWindow(SDLWindow);
36    }
37  }
38  
39private:
40  SDL_Window* SDLWindow{nullptr};
41};

Rendering

In computer graphics, we create the illusion of motion by showing a sequence of still images in quick succession. These still images are typically called "frames", and rendering a frame is the final step on each iteration of our application loop:

1#include <SDL.h>
2#include "Window.h"
3
4int main(int argc, char** argv) {
5  SDL_Init(SDL_INIT_VIDEO);
6  Window GameWindow;
7  
8  SDL_Event Event;
9  while (true) {
10    // 1. Process Events
11    while (SDL_PollEvent(&Event)) {
12      if (Event.type == SDL_QUIT) {
13        SDL_Quit();
14        return 0;
15      }
16    }
17    
18    // 2. Update Objects
19    // ...
20    
21    // 3. Render Frame 
22    // ... 
23  }
24  
25  return 0;
26}

A lot of complexity and clever algorithms can go into generating these frames. After all the processing, we are left with an image that we want to display on the player's screen.

Buffers

A buffer is another name for an area of memory where data is stored. In computer graphics contexts, buffers usually refer to frame buffers - blocks of memory that store color values that will be displayed on a screen. Conceptually, they're just big arrays of pixels, similar to an SDL_Surface.

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 pixels.

That presents a problem: we don't want users to witness the frame being constructed. That would break the illusion, so instead, we create multiple buffers.

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 SDL

When we're using SDL, the double buffering process is mostly automated. Conceptually, we can imagine our drawing operations, such as SDL_FillRect(), being performed on the back buffer.

However, we need to inform SDL when we're done rendering, so it can show our updates to the player, much like a buffer swap. To do that, we call SDL_UpdateWindowSurface(), passing the pointer to the SDL_Window.

Currently, the constructor in our Window class is rendering a gray rectangle to the entire back buffer, and then immediately swapping buffers so we can see it:

1// Window.h
2// ...
3
4class Window {
5public:
6  Window(){
7    SDLWindow = SDL_CreateWindow(
8      "Hello Window",
9      SDL_WINDOWPOS_UNDEFINED,
10      SDL_WINDOWPOS_UNDEFINED,
11      700, 300, 0
12    );
13
14    SDL_FillRect(
15      GetSurface(),
16      nullptr,
17      SDL_MapRGB(
18        GetSurface()->format, 50, 50, 50
19      )
20    );
21
22    SDL_UpdateWindowSurface(SDLWindow);
23  }
24  
25  // ...
26};

This works for now but, because this is being done in the Window constructor, it only happens a single time. To prepare for future chapters, we need to render this rectangle and swap our frame buffers on every iteration of our application loop.

And, for reasons we'll explain soon, we need to perform these two actions at different points in our application loop. So, let's move this code out of our constructor and into two public functions. We'll move the SDL_FillRect() code into a function called Render(), and the SDL_UpdateWindowSurface() will move to Update():

1// Window.h
2// ...
3
4class Window {
5public:
6  Window(){
7    SDLWindow = SDL_CreateWindow(
8      "Hello Window",
9      SDL_WINDOWPOS_UNDEFINED,
10      SDL_WINDOWPOS_UNDEFINED,
11      700, 300, 0
12    );
13
14    SDL_FillRect(
15      GetSurface(),
16      nullptr,
17      SDL_MapRGB(
18        GetSurface()->format, 50, 50, 50
19      )
20    );
21
22    SDL_UpdateWindowSurface(SDLWindow);
23  }
24  
25  void Render() {
26    SDL_FillRect(
27      GetSurface(),
28      nullptr,
29      SDL_MapRGB(
30        GetSurface()->format, 50, 50, 50
31      )
32    );
33  }
34
35  void Update() {
36    SDL_UpdateWindowSurface(SDLWindow);
37  }
38  
39  // ...
40};

Clearing and Swapping

Let's go back to our application loop and think about the rendering part a little more. The first thing we should note that the buffer we're drawing on (the back buffer) will not be empty.

It still contains the content from the previous frame, from when it was the front buffer. If we don't clear that content, our frame will end up being a mixture of content from multiple iterations of our application loop.

That's not an issue right now because we're just rendering a gray rectangle, but it will become an issue soon if we don't fix it. So, let's start each render pass by "clearing" the buffer. We do this by just filling the buffer with some solid background color.

That's exactly what our window's Render() function does, so let's call it:

1#include <SDL.h>
2#include "Window.h"
3
4int main(int argc, char** argv) {
5  SDL_Init(SDL_INIT_VIDEO);
6  Window GameWindow;
7  
8  SDL_Event Event;
9  while (true) {
10    while (SDL_PollEvent(&Event)) {
11      if (Event.type == SDL_QUIT) {
12        SDL_Quit();
13        return 0;
14      }
15    }
16    
17    // Render background color
18    GameWindow.Render();
19  }
20  
21  return 0;
22}

Now that we have a clean buffer filled with our background color, we render all of our other objects on top of this background. That is, we render our objects after we've cleared the buffer.

1#include <SDL.h>
2#include "Window.h"
3
4int main(int argc, char** argv) {
5  SDL_Init(SDL_INIT_VIDEO);
6  Window GameWindow;
7  
8  SDL_Event Event;
9  while (true) {
10    while (SDL_PollEvent(&Event)) {
11      if (Event.type == SDL_QUIT) {
12        SDL_Quit();
13        return 0;
14      }
15    }
16    
17    // Render background color
18    GameWindow.Render();
19    
20    // Render everything else
21    // ...
22  }
23  
24  return 0;
25}

We don't have any other objects yet, so, for now, let's just move on to the next step.

After we've rendered everything in our scene, our back buffer is complete and ready to become the front buffer. We trigger the swap by calling our window's Update() function.

1#include <SDL.h>
2#include "Window.h"
3
4int main(int argc, char** argv) {
5  SDL_Init(SDL_INIT_VIDEO);
6  Window GameWindow;
7  
8  SDL_Event Event;
9  while (true) {
10    while (SDL_PollEvent(&Event)) {
11      if (Event.type == SDL_QUIT) {
12        SDL_Quit();
13        return 0;
14      }
15    }
16
17    // Render background color
18    GameWindow.Render();
19    
20    // Render everything else
21    // ...
22    
23    GameWindow.Update(); // swap buffers
24  }
25  
26  return 0;
27}

Currently, we don't have anything else to render, so there's nothing between these two function calls. But, as we add objects, we'll stick to this pattern. Each render pass starts by clearing the buffer with a solid color, and it ends by swapping the buffers. All of the rendering we do will be performed between those two actions.

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).

Complete Code

Our final files, which we'll continue to use throughout the course, are provided below:

1#include <SDL.h>
2#include "Window.h"
3
4int main(int argc, char** argv) {
5  SDL_Init(SDL_INIT_VIDEO);
6  Window GameWindow;
7  
8  SDL_Event Event;
9  while (true) {
10    while (SDL_PollEvent(&Event)) {
11      if (Event.type == SDL_QUIT) {
12        SDL_Quit();
13        return 0;
14      }
15    }
16    
17    GameWindow.Render();
18    GameWindow.Update();
19  }
20  
21  SDL_Quit();
22  return 0;
23}

1#pragma once
2#include <iostream>
3#include <SDL.h>
4
5class Window {
6public:
7  Window() {
8    SDLWindow = SDL_CreateWindow(
9      "Hello Window",
10      SDL_WINDOWPOS_UNDEFINED,
11      SDL_WINDOWPOS_UNDEFINED,
12      700, 300, 0
13    );
14  }
15
16  void Render() {
17    SDL_FillRect(
18      GetSurface(),
19      nullptr,
20      SDL_MapRGB(
21        GetSurface()->format, 50, 50, 50
22      )
23    );
24  }
25
26  void Update() {
27    SDL_UpdateWindowSurface(SDLWindow);
28  }
29
30  SDL_Surface* GetSurface() const {
31    return SDL_GetWindowSurface(SDLWindow);
32  }
33
34  Window(const Window&) = delete;
35  Window& operator=(const Window&) = delete;
36  ~Window() {
37    if (SDLWindow && SDL_WasInit(SDL_INIT_VIDEO)) {
38      SDL_DestroyWindow(SDLWindow);
39    }
40  }
41
42private:
43  SDL_Window* SDLWindow{nullptr};
44};

Summary

This lesson introduced the concept of double buffering to prevent visual artifacts like flickering during rendering. We learned about the front buffer (visible to the user) and the back buffer (where the next frame is drawn).

In SDL, drawing operations modify the back buffer, and SDL_UpdateWindowSurface() swaps the buffers, making the back buffer visible. A standard rendering loop involves clearing the back buffer, drawing scene elements, and finally swapping the buffers.

Key Takeaways:

• Direct rendering can cause visual artifacts.
• Double buffering uses a front buffer (display) and a back buffer (drawing).
• Drawing happens on the back buffer.
• SDL_UpdateWindowSurface() swaps the front and back buffers.
• Render loops typically clear, draw, and then swap buffers.

Free and Unlimited Access

Professional C++

Unlock the true power of C++ by mastering complex features, optimizing performance, and learning expert workflows used in professional development

View Course