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 prepare you to explore more advanced topics in computer Graphics.

Reading

Please get the text book and read over Chapters 1 and 2. Be sure to read 1.2.1, 1.2.2 and 1.3-1.9. You can skim/skip the rest of Chapter 1. Don't worry about programming details or the actual Sierpinski Gasket in Chapter 2. Read for concepts and ideas, not code fragments. While the book uses WebGL and JavaScript as the primary environment, we will be using OpenGL, Qt, and C++, which has similar functionality but completely different syntax.

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)

Software Tools

• OpenGL : graphics framework
  • glsl : shading language
• C++ : our language of choice
• CMake : for building/compiling complex software projects
• Git : for managing source code, sharing
• Qt : for designing interactive graphical applications
  • widgets
  • qtcreator
• CUDA : GPGPU programming

Math Concepts

• Linear Algebra
  • Matrices (4x4)
  • Vectors (4x1)
  • Dot product
  • Cross product
  • Matrix/Vector product
  • Affine Transformation
  • Frames, Orthogonal Bases
• Trigonometry
  • Sin
  • Cos
  • radians/degrees

Hardware

• GPU
  • optimized for vector math
  • highly parallel
  • SIMD
  • programmable (shaders/CUDA)
• Displays
• 3D Displays
• 3D Printing

Getting Started

We'll be using git to submit code electronically, but there is a setup script similar to the update and handin scripts of other CS courses. Start by running

[~]$ setup40 examples
...
[~]$ cd cs40/
[cs40]$ ls
examples/
[cs40]$ cp -r ~adanner/public/cs40/examples/* examples/
[cs40]$ cd examples/

Commit the starting point code to git

[examples]$ git status
[examples]$ git add .
[examples]$ git commit -m "w01-intro"
[examples]$ git push

Build the examples with CMake

[examples]$ mkdir build
[examples]$ cd build/
[build]$ cmake ../
[build]$ make -j8

Run an example

[build]$ cd w01-intro/
[w01-intro]$ ls
CMakeFiles/  cmake_install.cmake  qtTestOGL/   simpletests/
Makefile     qtImage/             sierpinski/
[w01-intro]$ cd simpletests/
[simpletests]$ ./helloCS40 
Hello CS40!

With CMake you compile, run, 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.

C++ concepts

• namespaces: test_rgb.cpp
• try/catch
• structs as public classes: common/RGBColor.h
• const and pass by (const) reference
• operator overloading RGBImage.h
• reference return types
• building/linking libraries with cmake

Using Qt

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.

[~]$ cd ~/cs40/examples/w01-intro
[w01-intro]$ cp -r ~adanner/public/cs40/examples/w01-intro/qtogl/ ./
[w01-intro]$ git add qtogl
[w01-intro]$ git commit -m "qt demo with opengl"
[w01-intro]$ git push

Edit CMakeLists.txt in the w01-intro directory and add the subdirectory qtogl

[w01-intro]$ cd ../build/
[build]$ cd w01-intro/
[w01-intro]$ make -j8
[w01-intro]$ cd qtogl
[qtogl]$ ./qtogl

Remember, you could open this in qtcreator too and build the project there. Remember to select qtogl as the target after opening the ~/cs40/examples/CMakeLists.txt project.

QT and OpenGL

The class QGLWidget creates an OpenGL context inside QT. OpenGL functions are called within this context. Additionally, QT has some OpenGL wrapper classes beginning with the prefix QGL.

Creating a QT OpenGL application

• Create a new class, e.g., MyPanelOpenGL which inherits from QGLWidget
• Add a widget in the UI Designer and a promote it to MyPanelOpenGL
• Implement the methods initializeGL(), paintGL() and resizeGL ( int width, int height ) in your MyPanelOpenGL class.
• Add additional methods, slots, signals, widgets as needed.

• ~/cs40/examples/w01-intro/qtogl
• MyPanelOpenGL inherits from QGLWidget; 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
• glDraw...
• glFlush
• repeat as needed using updateGL()

Once the geometric data are copied to GPU memory, almost everything else happens on the GPU. paintGL is just issuing commands to the GPU. The GPU itself will process those commands.

Shaders, GLSL

• keywords: in, out, uniform
• types: vec3, mat4
• variables: gl_Position, gl_FragColor;

Modifying Shaders

• Making gl_FragColor a uniform value
• modifying geometry
• uniform time variable
• QTimer
• updateGL -> Animation!

Home Page

Last updated: Tuesday, September 22, 2020 at 09:07:43 AM