Welcome to Computer Graphics! This course serves as an introduction to the area of graphics. We will learn many of the basics of modeling and rendering from a modern OpenGL approach. This course will feature lots of programming, and lots of math, but the math is not super complex. We will design many interesting projects, and you will have a chance to explore your own final project, but if you are expecting to design a full fledged 3D game, or the next CGI movie, this course will not meet your expectations. This course is designed around understanding core concepts and preparing you to explore more advanced topics in computer graphics.
An Overview of Computer Graphics
- Modeling: representing 3D objects with geometric primitives: points, lines, triangles
- Scene Creation: arranging objects in the 'world' using transformations
- Projections: setting up a viewpoint from which to visualize the world
and converting a 3D scene to 2D
- Rendering: Transforming the 3D model into a 2D image on the computer screen (pixels/fragments)
Connections to other Courses
- Vision: Images->models
- Animation/Game design: Building applications on top of core
- A Boy and a Buffer graphics: Build OpenGL from C and 2D arrays
Software Tools for this course
- OpenGL : graphics framework
- C++ : our language of choice
- CMake : for building/compiling complex software projects
- Git : for managing source code, sharing
- Qt : for designing interactive graphical applications
- qtcreator: mainly for UI design, but can use it as an IDE too
- CUDA : GPGPU programming
- Linear Algebra
- Matrices (4x4)
- Vectors (4x1)
- Dot product
- Cross product
- Matrix/Vector product
- Affine Transformation
- Frames, Orthogonal Bases
- optimized for vector math
- highly parallel
- programmable (shaders/CUDA)
- 3D Displays
- 3D Printing
We'll be using
to submit code electronically. Follow the instructions
for setting up your Swarthmore Github Enterprise account.
git clone firstname.lastname@example.org:CS40-F18/examples-YOURUSERNAME.git examples
git remote add upstream email@example.com:CS40-F18/examples.git
git fetch upstream
Once you have a copy of the code, Build the examples with
[examples]$ mkdir build
[examples]$ cd build/
[build]$ cmake ../
[build]$ make -j8
[build]$ cd w01-intro
[w01-intro]$ cd simpletests
Try running the other examples in the w01-intro folder
, and test
programs in the build
directory. You edit
source files outside of the build
directory. You may want to have one terminal window open for running programs, and a separate terminal for editing.
You can use the Git overview
page to review basic git usage. If you have questions, chances are other students do too. Please post in Piazza
to start a discussion. You can post anonymously to the rest of the class (but not to the instructor).
OpenGL is the primary language for creating images from 3D models, but OpenGL is primarly focused on just that: image creation. Often we want more interactive applications, perhaps with buttons, menus, and key bindings. To get those features, and additionally an OpenGL context, we will be using the Qt (cute) framework to develop Graphical User Interfaces (GUIs). Keep in mind the focus of this course is on the graphics aspects, but having a basic working GUI is nice too. We won't be UX experts by the end of this course, but Qt is modern and actually used by some companies.
Let's walk through the creation of simple Qt application and demonstrate
qtcreator. For more details, see the qt demo page.
- See piazza about edit in
- Skim the Overview of Modern OpenGL.
- Read the LearnOpenGL sections on Hello Triangle and Shaders. You can skip the sections on Creating a Window and Hello Window as this tutorial uses GLFW as the GUI, and we are using Qt5. Qt5 also provides some shortcuts for creating VBOs and compiling shaders, so don't worry too much about the code in this tutorial. Instead, focus on the concepts which are the same as CS40.
Up late wondering how the signals and slots mechanism in Qt5 is actually implemented and can't fall asleep? These readings might not answer all your questions, but they should help you sleep better. These readings are entirely optional.
QT and OpenGL
The class QOpenGLWidget
creates an OpenGL context inside QT. OpenGL functions
are called within this context. Additionally, QT has some OpenGL wrapper classes
beginning with the prefix
Creating a QT OpenGL application
- Create a new class, e.g.,
MyPanelOpenGL which inherits from
- Add a widget in the UI Designer and a promote it to
- Implement the methods
resizeGL ( int width, int height ) in your
- Add additional methods, slots, signals, widgets as needed.
- MyPanelOpenGL inherits from QOpenGLWidget; provides OpenGL context in QT
- clip coordinates 2x2x2 box
- geomety -> vertex shader -> clip -> rasterize -> fragment shader -> framebuffer
- framebuffer squished into viewport
- Copying CPU data to GPU memory using Vertex Buffer Objects (VBOs)
We store the vertices of a triangle in a VBO in GPU memory. The next step is to define, create, load, and compile shaders
. The vertex shader
runs first and takes vertex data from the VBO and outputs geometry in clip coordinates. This geometry is then clipped, rasterized, and fed to the fragment shader
which runs on each fragmenet, or potential output pixel. The output of the fragment shader is written to a framebuffer and displayed in the viewport.
Once each shader is compiled, we define, create, and link a shader program
, which is the combination of a vertex shader and a fragment shader.
Finally, we are ready to draw. The main steps are:
- clear the display
- bind buffers, programs
- connect shader parameters to data
- repeat as needed using
Once the geometric data are copied to GPU memory, almost everything else happens on the GPU.
is just issuing commands to the GPU. The GPU itself will process those commands.