Direkt zum Inhalt

Graphics Programming (Winter term 2018/2019)

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.


The course consists of a lecture (4 hours per week) and exercises (2 hours per week)

Lecture: Mon 14h00 - 15h30, Fri 10h15 - 11h45, MZ 6 HS III A3
Exercise: Mondays after the lecture, MZ 6 HS III A3
Tutors: Sebastian Lieb, Ilya Volkov

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  Title Link
1. Introduction  1 Introduction external, internal
2 Organization external, internal
2. GUIs 1 Graphical User Interfaces external, internal
2 GUIs with Java external, internal
3 GUIs with Java (Android) external, internal
4 GUIs with C++ and Qt external, internal
3. 2D Objects 1 Vector and Raster Graphics external, internal
2 Raster Conversion external, internal
3 Clipping
4. OpenGL Pipeline  1 OpenGL Pipeline external, internal
5. Object Transformations 1 2D Transformations external, internal
2 3D Transformations external, internal
6. Cameras 1 Perspective Projection external, internal
2 Parallel Projection external, internal
7. Textures 1 Textures external, internal
8. Buffer Objects  1 Buffer Objects external, internal
9. OpenGL Shading Language 1 OpenGL Shading Language (GLSL) external, internal
10. Light and Material 1 Light and Material
11. Shadows and Reflections 1 Shadows
2 Ambient Occlusion
3 Reflections
12. Game Programming 1 Graphics Engine
2 Shader Effects

Code Examples

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

Chapter Name Java (Desktop) Java (Android) C++ (Qt) C++ (glut) WebGL GSN Composer
2.x HelloGUI Code Code Code      
2.x MyMenuBar Code Code Code      
2.x MyButton Code Code, XML-Version Code      
2.x ActionButton Code Code Code      
2.x MyActionMenu Code Code Code      
2.x MyTouchEvent Code Code Code      
2.x MyBorderLayout Code      
2.x HorizontalLayout
2.x MyGridLayout Code Code      
2.x MySpringLayout Code      
2.x NestedLayouts Code      
2.x MyProgressBar Code      
2.x PausedActivity Code      
2.x LineRectCircle Code Code Code      
2.x MyGeneralPath Code Code Code      
3.1 House2D Code      
3.1 MyBufferedImage Code      
4.1 FirstTriangle Code Code Code    
5.1 TriangleTransform Code Code Code    
5.2 GimbalLock Code Code Code    
5.2 RotationInterpolation Code Code Code    
6.1 Dolly Zoom Code Code Code    
6.1 LookAt Code Code Code    
6.1 LookAtLocalTrans Code Code Code    
6.1 Viewport Code Code Code    
6.1 ZFighting Code Code Code    
6.2 Axonometric Code Code Code    
6.2 Oblique Code Code Code    
7.1 Texture Code Code Code    
7.1 TextureParameter Code Code Code    
7.1 TextureBlend Code Code    
7.1 Texture3D Code Code Code    
7.1 Fbo Code Code Code    
7.1 FboDepth Code Code Code    
8.1 VboDrawArrays Code Code Code Code    
8.1 VboDrawElements Code Code Code Code    
8.1 VboUpdate Code Code Code Code    
8.1 VboStride Code Code Code Code    
8.1 Vao Code Code Code    
8.1 ObjToVboExample Code Code Code Code    
8.1 FirstForwardCompatible Code Code Code    
9.1 FirstShader Code Code Code Code Code Code
9.1 ShaderUniform Code Code Code Code Code Code
9.1 ShaderNormalTrans Code Code Code Code Code Code
9.1 ShaderTexture Code Code Code Code Code Code
10.1 ShaderLightMat Code Code Code Code Code Code

For some of the 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.

An app with the Android code examples is available on Google Play: http://play.google.com/store/apps/details?id=de.unimarburg.gpapp

Interactive demonstrations

Chapter Title Link
3.2 Polygon Rasterization demo
10.1 Phong / Blinn Phong Shading demo
11.1 Shadow Maps demo (intern)
11.2 Screen Space Ambient Occlusion (SSAO) demo (intern)
12.1 Ear Cutting demo

Zuletzt aktualisiert: 07.11.2018 · thormaeh

Fb. 12 - Mathematik und Informatik

Graphics and Mulitmedia, Hans-Meerwein-Straße 6, D-35032 Marburg
Tel. +49 6421/28-21514, Fax +49 6421/28-25466, E-Mail: dekanatfb12@mathematik.uni-marburg.de


URL dieser Seite: https://www.uni-marburg.de/fb12/en/researchgroups/grafikmultimedia/lectures/graphics

Impressum | Datenschutz