g

Rendering a Shape


Lab Image Lab Image
Today's goal: Render a new triangle to the screen with OpenGL(The starter code gets you the ugly orange triangle with green background). Read all of the directions.


Description


Previously we setup a window to display on the screen. This was a key and satisfying step in moving us away from the terminal and into graphics! Today we are going to render a basic primitives using OpenGL. There is a learning curve here and more boilerplate(i.e. starter code) code, so please read the directions carefully.

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: Today, you are working individually).
  3. Download the files given in the next section titled "Files Given/Starter Code".
  4. Complete the "Rendering a shape" 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: https://classroom.github.com/a/P75g4ZMy

Rendering a shape


Our half lecture today should get us more comfortable with how graphics work. Some patience is required as additional boilerplate code to help get us setup. Take some time to investigate it. The good news is, once you learn the process the manual setup can be abstracted away.

Today your goal is to render:

  1. A smaller triangle than what is given (This requires decreasing some data values).
  2. A triangle of a different color (something other than orange)
  3. A background color different than green

Shaders Quick Glance

Remembering what Shaders are, and think about what you need to modify. They are here for your reference. Additionally, you will need to think about what data you will need to update to complete the above tasks.

Example Vertex Shader
#version 330 core in vec4 position; void main() { gl_Position = vec4(position.x, position.y, position.z, position.w); };
Example Fragement Shader
#version 330 core out vec4 color; void main() { color = vec4(1.0f, 0.5f, 0.0f, 1.0f); };

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.
  • Start writing some OpenGL 3.3 from here! https://learnopengl.com I imagine many will finish soon. This is now dedicated graphics time!
  • Look at some SDL 2 tutorial on the net.
  • Look for OpenGL 3.3 tutorials on the net.

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

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