Main Content

Graphics Programming (Winter term 2020/2021)

3D Lamp
Grafik: Aaron Beller

Lecturer: Prof. Dr. Thorsten Thormählen
Module Name: CS 581

Qualification objectives

The lecture Graphics Programming teaches how to create interactive computer graphics applications. This includes the general concepts of computer graphics, which are independent of the programming environment, such as the mathematical description of 2D and 3D objects, lights and cameras, the representation of the 3D scene in a hierarchical scene graph, or a mathematical description of materials and their reflectance properties. By programming examples in a practice-oriented programming environment, the participants learn all the techniques necessary to independently implement their own computer graphics project in the future. To this end, also basics for creating graphical user interfaces are taught. In addition, the course aims at improving the overall ability of the participants to perform scientific work, to solve problems, and to communicate.

Programming environment

The course puts a strong focus on the modern rasterization pipeline and uses OpenGL as a graphic library and GLSL as the shader language. Basic knowledge of object-oriented programming is required. Programming exercises and the examples shown in the lecture are presented in Java. Alternatively, all implementations are also given in C++ and several interactive demonstrations in WebGL/JavaScript are provided.

Organisation

The course consists of a lecture (4 hours per week) and exercises (2 hours per week).
Lecture: Mon 14h00 - 15h30, Fri 10h15 - 11h45 via Live-Stream
Exercise: Mondays after the lecture via Live-Stream

Tutors: Sebastian Lieb, Ibrahim Keser

Course structure

  1. Introduction
  2. Graphical user interfaces
  3. Representation and rendering of 2D objects
  4. OpenGL pipeline
  5. Object transformations
  6. Cameras
  7. Textures
  8. Buffer Objects
  9. OpenGL Shading Language (GLSL)
  10. Light and materials
  11. Shadows and reflections
  12. Game Programming

Lecture slides

The lecture slides are available as HTML5 websites. It is recommended to use a modern browser (such as Google Chrome, Mozilla Firefox). In Google Chrome, the browser's print function can be used to create a PDF file of the slides.

Currently, only a subset of slides is translated to English (see below). All slides and more details can be found at the German version of this page.

There are two versions of the slides: internal and external. The internal version comprises additional slides that are only available to the students of the University of Marburg. The login will be announced in the lecture.

Part Chapter Link
1. Introduction 1.1 Introduction external, internal
1.2 Organization external, internal
2. GUIs 2.1 Graphical User Interfaces external, internal
2.2 GUIs with Java external, internal
2.3 GUIs with Java (Android) external, internal
2.4 GUIs with C++ and Qt external, internal
3. 2D Objects 3.1 Vector and Raster Graphics external, internal
3.2 Raster Conversion external, internal
3.3 Clipping
4. OpenGL Pipeline 4.1 OpenGL Pipeline external, internal
5. Object Transformations 5.1 2D Transformations external, internal
5.2 3D Transformations external, internal
6. Cameras 6.1 Perspective Projection external, internal
6.2 Parallel Projection external, internal
7. Textures 7.1 Textures external, internal
8. Buffer Objects 8.1 Buffer Objects external, internal
9. OpenGL Shading Language 9.1 OpenGL Shading Language (GLSL) external, internal
10. Light and Material 10.1 Light and Material
11. Shadows and Reflections 11.1 Shadows
12.2 Ambient Occlusion
12.3 Reflections
12. Game Programming 13.1 Graphics Engine
13.2 Shader Effects

Code Examples

The lecture slides contain several code examples. These are listed here:

4.1   FirstTriangle (Java, Qt, Glut)
5.1   TriangleTransform (Java, Qt, Glut)
5.2   GimbalLock (Java, Qt, Glut)
5.2   RotationInterpolation (Java, Qt, Glut)
6.1   Dolly Zoom  (Java, Qt, Glut)
6.1   LookAt (Java, Qt, Glut)
6.1   LookAtLocalTrans (Java, Qt, Glut)
6.1   Viewport (Java, Qt, Glut)
6.1   ZFighting (Java, Qt, Glut)
6.2   Axonometric (Java, Qt, Glut)
6.2   Oblique (Java, Qt, Glut)
7.1   Texture (Java, Qt, Glut)
7.1   TextureParameter (Java, Qt, Glut)
7.1   TextureBlend (Java, Qt)
7.1   Texture3D (Java, Qt, Glut)
7.1   Fbo (Java, Qt, Glut)
7.1   FboDepth (Java, Qt, Glut)
8.1   VboDrawArrays (Java, Android, Qt, Glut)
8.1   VboDrawElements (Java, Android, Qt, Glut)
8.1   VboUpdate (Java, Android, Qt, Glut)
8.1   VboStride (Java, Android, Qt, Glut)
8.1   Vao (Java, Qt, Glut)
8.1   ObjToVboExample (Java, Android, Qt, Glut)
8.1   FirstForwardCompatible (Java, Qt, Glut)
9.1   FirstShader (Java, Android, Qt, Glut, WebGL, GSN Composer)
9.1   ShaderUniform (Java, Android, Qt, Glut, WebGL, GSN Composer)
9.1   ShaderNormalTrans (Java, Android, Qt, Glut, WebGL, GSN Composer)
9.1   ShaderTexture (Java, Android, Qt, Glut, WebGL, GSN Composer)
10.1   ShaderLightMat (Java, Android, Qt, Glut, WebGL, GSN Composer)
10.1   ShaderPhongPointLight (GSN Composer)
10.1   ShaderPhongSpot (Java, Qt, Glut)
10.1   ImageBasedLighting (GSN Composer)
10.2   PlanarShadow (GSN Composer)
10.2   PlanarShadowAmbient (GSN Composer)
10.2   ShadowMap (GSN Composer)

Note: This list is currently incomplete and will be updated.

For some code examples the tool ObjToVbo.cpp is required, which converts a 3D model in Wavefront OBJ format into an array of floats and saves it into a text or binary file. Such a float array can be read with high speed and with little programming effort and can be passed directly to a VBO in OpenGL.

Interactive demonstrations

3.2  Polygon Rasterization (demo)
10.1   Phong / Blinn Phong Shading (demo)
11.2   Screen Space Ambient Occlusion (demo)
12.1   Ear Cutting (demo)