Color and Transform
Description
Last lab we rendered a triangle and a square to the screen. As a recap:
- We had to create an index buffer.
- Populate that buffer with the correct indicies
- Then use GlDrawElements to select which vertices to draw
Your Task(s)
- Half Lecture with Mike: Slides
- 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!
- Download the files given in the next section titled "Files Given/Starter Code".
- Complete the "glVertexAttribPointer" Section
- Complete the "Camera" Section
- Complete the "C++ Refresh" section
- (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
glVertexAttribPointer
You will find in the code "TODO" sections in the SDLGraphicsProgram.cpp.
The goal for this section is to render:
- A colored triangle.
In order to do this we need to store more information in our model. Currently we have 'positional' data that stores where the vertices exist. We can additionally add 'color' data as another three-tuple. That is, we need to add 'R, G, B' data to our verts.
glEnableVertexAttribArray and glVertexAttribPointer
The first thing we need to do is enable a new attribute. Once we do that, then we need to tell how OpenGL should interpret that data. You can look at an example from your previous lab(or this current lab) of how this is done. The one trick is that you will have to play with the 'stride' and 'offset' (or starting point) of the data.
Attributes quick glance
glEnableVertexAttribArray(0); // Finally pass in our vertex data glVertexAttribPointer( 0, // Attribute 0, which will match layout in shader 3, // size (Number of components (2=x,y) (3=x,y,z), etc.) GL_FLOAT, // Type of data GL_FALSE, // Is the data normalized sizeof(float)*6, // Stride - Amount of bytes between each vertex. // If we only have vertex data, then this is 0. // That means our vertices(or whatever data) is tightly packed, // one after the other. // If we add in vertex color information(3 more floats), // then this becomes 6, as we move 6*sizeof(float) // to get to the next chunk of data. // If we have normals, then we need to // jump 3*sizeof(GL_FLOAT) bytes to get // to our next vertex. 0 // Pointer to the starting point of our data. // If we are just grabbing vertices, this is 0. // But if we have some other attribute, // (stored in the same data structure), // this may vary if the very first element // is some different attribute. // If we had some data after (say normals), then // we would have an offset // of 3*sizeof(GL_FLOAT) for example );
Note: The vertex shader and fragment shader have been done for you (In a few labs this will not be the case!). Read through the descriptions and ask yourself "why" does this work.
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); } // ==================================================================
Camera
Once you haev a colored triangle, your goal is to be able to zoom in and out the camera. This means you will be using the glm library to perform matrix (using mat4()) transformations. In order to figure out how to get perspective, I recommend reading the following and going through the "putting it all together" section on Tutorial 3 matrices. You will see how the uniform is setup (note, I have done this for you, but in a slightly different way), and then how to use this in the shader to ultimately get the final position of a vertex in perspective.
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.
- Move your triangle with the arrow keys
- Try changing the colors of the triangle slowly over time.
Evaluation
- 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
- SDL API Wiki
- docs.gl useful programming resource
- Start writing some OpenGL 3.3 from here! https://learnopengl.com Use this time for graphics!
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 :)