Index Buffers

Lab Image
Today's goal: Render a square and a triangle to the screen to understand the more efficient Index Buffer. Read all of the directions.


Last lab we rendered a triangle to the screen! There was a bit of setup code involved with SDL and OpenGL to prepare. As a recap:

  • We had to initialize SDL and get window and OpenGL Graphics Context
  • We had to setup a buffer that contained data for our vertices
  • We had a minimal vertex and fragment shader that told OpenGL what to do with that data
  • Finally, we use glDrawArrays to output our data to the screen.
Today we want to render some data in a slightly more efficient way, using what is called an "Index Buffer". Index buffers allow us to select which vertices we want to draw through an index. You will also get some exposure to detecting keyboard input from a user with SDL.

Your Task(s)

  1. Half Lecture with Mike: Slides
  2. Find your partner in the spreadsheet here. It is your responsibility for the two of you to complete the lab by the beginning of the next lab
    • Note: If your partner is missing, you will be reassigned, and your partner will have to complete the lab individually.
    • Note: If you know you will miss class, arrange to have your lab checked off before the next lab is out!
  3. Download the files given in the next section titled "Files Given/Starter Code".
  4. Complete the "Index Buffers" Section
  5. Complete the "C++ Refresh" section
  6. (Optional) Complete any optional "Going Further" suggested tasks.

Files Provided/Starter Code

  • Clicking the following link gives you immediate access to your personal private github repository.
    • You may use your personal or Northeastern github account. I do not care, but please be consistent with what you choose.
    • I do look at your repositories, make sure you commit and push your final changes to repositories!
    • Please do not click until class starts. Occasionally I make changes until a few minutes before class (usually spelling corrections and other small typos).
    • Click now to get the lab starter code: Github Repository

Index Buffers

You will find in the code "TODO" sections in the SDLGraphicsProgram.cpp.

Today your goal is to render:

  1. A triangle or a square depending on which indicies are selected to render
  2. Use of SDL_Input
    • If a user presses 'left' a triangle appears
    • If a user presses 'right' a square appears

Buffers Quick Glance

See Lab 2 or the slides for examples!

Example Vertex Shader

Vertex Shader Quick Glance

// ================================================================== #version 330 core layout(location=0)in vec3 position; // We explicitly state which is the vertex information (The first 3 floats are positional data, we are putting in our vector) layout(location=1)in vec3 vertexColor; // Our second attribute which is the color. // Do not forget this! out vec3 theColor; void main() { // gl_Position is a special glsl variable that tells us what // postiion to put things in. // It takes in exactly 4 things. // Note that 'w' (the 4th dimension) should be 1. gl_Position = vec4(position.x, position.y, position.z, 1.0f); // Store the vertex color that we take in as what we will output // to the next stage in the graphics pipeline. theColor = vertexColor; } // ==================================================================

Fragment Shader Quick Glance

// ================================================================== #version 330 core out vec4 color; in vec3 theColor; void main() { // color is a vec4 representing color. Because we are in a fragment // shader, we are expecting in our pipeline a color output. // That is essentially the job of the fragment shader! color = vec4(theColor, 1.0); } // ==================================================================

C++ Refresh

While this is not a C++ course, each lab I am going to provide an additional C++ code snippet so you can get up to speed (or perhaps just learn something cool and relevant to the course).
  • Code Sample 1
  • Type out(i.e. DO NOT just copy and paste) the file so you learn the commands. Then save it with an appropriate name (e.g. example.cpp)
  • Compile and run with the following on the terminal:
    • Linux Option 1: clang++ -std=c++14 example.cpp -o example
    • Linux Option 2: g++ -std=c++14 example.cpp -o example
    • Mac Option 1:   clang++ -std=c++14 example.cpp -o example
    • Mac Option 2:   g++ -std=c++14 example.cpp -o example
    • Mac Option 3:   Create a console-based XCode project
    • Windows Option 1: Create a console-based Visual Studio C++ project
  • Finally, add this C++ code snippet to your repository to practice working with git.

Going Further

What is that, you finished Early? Did you enjoy this lab? Here are some (optional) ways to further this assignment.
  • Add colors to your shapes! We will work on this next week, and figure out how to add attributes! Note that the provided shaders will work with color as is if you move ahead.


  • You and your partner will receive the same grade from a scale of 0-2.
    • 0 for no work completed.
    • 1 for some work completed, but something is not working properly
    • 2 for a completed assignment (with possible 'going further' options completed)
  • You must complete this lab by next class. You will run your lab in front of me at the start of the next lab when class starts.

More Resources

Some additional resources to help you through this lab assignment

Found a bug?

If you found a mistake (big or small, including spelling mistakes) in this lab, kindly send me an e-mail. It is not seen as nitpicky, but appreciated! (Or rather, future generations of students will appreciate it!)
  • Fun fact: The famous computer scientist Donald Knuth would pay folks one $2.56 for errors in his published works. [source]
  • Unfortunately, there is no monetary reward in this course :)