Week 1: Introduction

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. 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 vast field of computer graphics.

A Birds-eye view of Computer Graphics

Computer Graphics aims to compute realistic-looking representations of geometric models and scenes. The view through our eyes or the lens of a camera is a complex interaction of material surfaces, light scattering of photons, and the optics of lenses. While the underlying physics is well understood, modeling these interactions exactly on a single computer is computationally infeasible. The field of computer graphics seeks to find efficient ways to approximate these interactions and create ever more realistic scenes.

For some state of the art rendering, check out the short demo of the Marbles game unveiled during the 2020 GPU Technology Conference. Work like this requires teams of artists and engineers along with powerful hardware to produce. We’ll have considerably more modest goals, but we’ll be learning many of the core techniques used by professionals. Compare to the first Pixar film, Toy Story, which was released in 1995

We will begin our journey using a modern OpenGL approach, which consists of the following key steps.

  1. Modeling: Defining 3D objects with geometric primitives including points, lines and triangles.

  2. Scene Creation: Arranging objects in a virtual world using linear algebra transformations.

  3. Projections: Setting a viewpoint for visualizing the world, and converting the scene into a standard volume.

  4. Rasterizing: Transforming the projected 3D scene into a 2D image of pixels/fragments on the computer screen or other output device.

We will initially see how to perform these basic steps, and we will then gradually add more advanced features such as texturing, lighting, and noise to improve the realism.

Later we will explore Ray Tracing or Ray Marching as an entirely different way of modeling the interaction of light and surfaces to create a scene. Both the Triangle→Transform→Rasterize and Ray Tracing methods are widely used in modern graphics.

Connections to other Courses

Some courses explore topics related to those in this course, but approach various problems from a different perspective or starting point:

  • Computer Vision: Starts with images, ends with models

  • Animation/Game Design: Extends core concepts with advanced applications, models of motion, game AI, level design.

  • Build OpenGL: Start with C and 2D arrays, build something like OpenGL from scratch.

Tools

See Remote Tools for many of tools we’ll be using for remote learning in this course, and the Resources section for technical tools.

  • OpenGL: the primary graphics framework for understanding core low level concepts

  • GLSL: the shading language for OpenGL

  • Qt6: A cross-platform application framework for developing graphical user interfaces. Qt also provides some OpenGL utility classes to make OpenGL development easier.

  • C++: Our language for developing high-performance graphics applications on the desktop

  • CMake: Helps find third party dependencies to build our project. CMake makes Makefiles

  • Git: version control, sharing

  • CUDA: GPGPU programming

Math

Trig/Algebra/Calc

  • Sine

  • Cosine

  • Radians/Degrees

  • Polynomials mostly up to degree 3

  • Occasional derivatives of polynomials or trig functions.

Linear Algebra

  • Matrices (4x4)

  • Vectors (up to 4x1)

  • Dot product

  • Cross product

  • Matrix/Vector product

  • Affine Transformation

  • Frames, Orthogonal Bases

Hardware

This course will mostly focus on the software side of computer graphics, but realism has greatly increased since the advent of dedicated Graphics Processing Units (GPUs). These hardware devices have some notable properties compared to general purpose CPUs

  • optimized for vector math

  • highly parallel (1000-2000 cores)

  • SIMD

  • programmable via shaders or CUDA

Additionally, large format displays, multi panel displays, 3D displays, and 3D printers have connections to many computer graphics concepts

High level overview of a OpenGL pipeline

  • Modeling - setting geometry

  • CPU→GPU transfer (vertex buffer objects VBO)

  • Vertex Shading - transform our view of the world to the clip space

    • Vertex shader is programmable in GLSL

    • Highly parallel SIMD (1000 of cores)

    • Runs on GPU with data on GPU

    • Programmer is responsible for passing data to the GPU, and for writing the vertex shader

  • Rasterization - Convert geometry to (potential) pixels/fragments

  • Fragment shading - assign final color of fragments that come out of rasterization process

Reading

  • 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 Qt6. Qt6 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.