Hauptinhalt

Grafikprogrammierung (WS 2023/2024)

3D Lamp
Grafik: Aaron Beller

Dozent: Prof. Dr. Thorsten Thormählen
Modulbezeichnung: CS 581
Sprache der Vorlesung: Deutsch

Qualifikationsziele

In der Vorlesung werden Kenntnisse zur Erstellung von interaktiven Computergrafik-Anwendungen vermittelt. Diese umfassen allgemeine Konzepte der Computergrafik, die unabhängig von der verwendeten Programmierumgebung sind, wie z.B. die mathematische Beschreibung von 2D- und 3D-Objekten, Lichtern und Kameras, die Repräsentation der 3D-Szene in einem hierarchischen Szenengraphen oder die mathematische Beschreibung von Materialien und deren Reflektanz-Eigenschaften. Durch Programmierbeispiele in einer praxisrelevanten Programmierumgebung sollen die Studenten alle notwendigen Techniken erlernen, um zukünftig selbstständig konkrete Computergrafik-Projekte realisieren zu können. Dazu werden ebenfalls Grundlagen zur Erstellung von grafischen Benutzerschnittstellen vermittelt. Außerdem soll die allgemeine Fähigkeit zum wissenschaftlichen Arbeiten und Lösen von Problemen sowie die Kommunikationsfähigkeit der Teilnehmer verbessert werden.

Programmierumgebung

Die Veranstaltung legt einen starken Fokus auf moderne Rasterisierungsverfahren und verwendet OpenGL als Grafikbibliothek und GLSL als Shader-Sprache. Grundlegende Kenntnisse der objekt-orientierten Programmierung werden vorausgesetzt. Die Programmierübungen und die in der Vorlesung gezeigten Beispiele verwenden die Programmiersprache Java, da diese den meisten Studierenden aus dem Grundstudium vertraut ist. Alternativ werden jedoch auch immer Implementierungen in C++ und teilweise auch interaktive Demonstrationen in WebGL/JavaScript zur Verfügung gestellt.

Organisation

Die Veranstaltung besteht aus einer Vorlesung (4 SWS) und einer Übung (2 SWS).
Vorlesung: Mo. 14:00 - 15:30 Uhr, Fr. 10:15 - 11:45 Uhr, (H | 04) Hörsaal III A3
Übung: Montags im Anschluss an die Vorlesung, (H | 04) Hörsaal III A3

Tutoren: Sebastian Lieb, Lennart Uhrmacher

Gliederung der Vorlesung

  1. Einführung
  2. Grafische Benutzerschnittstellen
  3. Repräsentation und Darstellung von 2D Objekten 
  4. OpenGL Pipeline 
  5. Objekttransformationen 
  6. Kameras 
  7. Texturen 
  8. Buffer Objects 
  9. OpenGL Shading Language (GLSL)
  10. Licht und Materialien 
  11. Schatten
  12. Spieleprogrammierung

Vorlesungsfolien

Die Vorlesungsfolien werden als HTML5-Webseiten zur Verfügung gestellt. Es wird empfohlen, einen aktuellen Browser zu verwenden (wie z.B. Google Chrome, Mozilla Firefox). In Google Chrome kann die Druckfunktion des Browsers verwendet werden, um eine PDF-Datei der Folien zu erzeugen.

Es gibt zwei Versionen der Folien: intern und extern. Die internen Folien sind umfangreicher und nur für die Studierenden der Philipps-Universität Marburg zugänglich. Der Login wird in der Vorlesung bekannt gegeben.

Teil Kapitel Link
1. Einführung 1.1 Einführung extern, intern
1.2 Organisation extern, intern
2. GUIs 2.1 Grafische Benutzerschnittstellen extern, intern
2.2 GUIs mit Java extern, intern
2.3 GUIs mit Java (Android) extern, intern
2.4 GUIs mit C++ und Qt extern, intern
3. 2D Objekte 3.1 Vektor- und Rastergrafik extern, intern
3.2 Rasterkonvertierung extern, intern
4. OpenGL Pipeline 4.1 OpenGL Pipeline extern, intern
5. Objekttransformationen 5.1 2D Transformationen extern, intern
5.2 3D Transformationen extern, intern
6. Kameras 6.1 Perspektivische Projektionen extern, intern
6.2 Parallelprojektion extern, intern
7. Texturen 7.1 Texturen extern, intern
8. Buffer Objects 8.1 Buffer Objects extern, intern
9. OpenGL Shading Language 9.1 OpenGL Shading Language extern, intern
10. Licht und Materialien 10.1 Licht und Materialien extern, intern
10.2 Bildbasierte Beleuchtung extern, intern
11. Schatten 11.1 Schatten extern, pdf
11.2 Ambient Occlusion pdf
12. Spieleprogrammierung 12.1 Grafik-Engine
12.2 Shader Effekte

Übungszettel

Die Anmeldung zu den Übungsgruppen erfolgt über die Lernplattform ILIAS. Die Abgabe des Übungszettels muss bis freitags 12:00 Uhr per E-Mail (PDF oder Text bzw. Quelltexte) an den jeweiligen Tutor erfolgen. Der Login wird in der Vorlesung bekannt gegeben.

Nummer Thema Link
1 Vektor- und Rastergrafik pdf, Musterlösung
2 Einstieg OpenGL pdf, Vorlage, Musterlösung
3 Spiel Pong 2D mit OpenGL pdf, Vorlage, Musterlösung
4 Spiel Pong 3D mit OpenGL pdf, Vorlage, Musterlösung
5 Texture Mapping pdf, Vorlage, Musterlösung
6 VBOs pdf, Vorlage, Musterlösung
7 Shaderprogrammierung mit GLSL pdf, Vorlage, Musterlösung
8 Phong-Shading mit GLSL pdf, Vorlage, Musterlösung
9 PBR-Shading mit GLSL pdf, Vorlage, Musterlösung
10 Schatten pdf, Vorlage, Musterlösung
11 Shader-Effekte / Bildbasierte Beleuchtung pdf, Vorlage

Programmbeispiele

Die Vorlesungsfolien enthalten einige Programmbeispiele. Diese sind hier noch einmal separat aufgelistet:

3.1   House2D (Java)
3.1   MyBufferedImage (Java)
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   StoneDemonPhong (GSN Composer)
10.1   MicrofacetSpheres (GSN Composer)
10.1   ShaderPhongPointLight (GSN Composer)
10.1   ShaderPhongSpot (Java, Qt, Glut)
10.2   EnvmapLighting (GSN Composer)
10.2   SpheresIBLRef (GSN Composer)
10.2   SpheresIBL (GSN Composer)
10.2   ImageBasedLighting (GSN Composer)
11.1   PlanarShadow (GSN Composer)
11.1   PlanarShadowAmbient (GSN Composer)
11.1   ShadowMap (GSN Composer)

Hinweis: Diese Liste ist derzeit noch unvollständig und wird im Laufe des Semesters aktualisiert.

Für einige dieser Beispiele wird das Werkzeug ObjToVbo.cpp benötigt, das ein 3D-Modell im Wavefront OBJ Format in ein Array von Floats umwandelt und in eine Text- oder Binärdatei speichert. Ein solches Float-Array kann schnell und mit wenig Programmieraufwand gelesen und direkt an ein VBO in OpenGL übergeben werden.

Videos zur Shader-Programmierung

Im Wintersemester 2021 wurde mit der Aufzeichnung von Videos zur Shader-Programmierung begonnen. Insbesondere die ersten Videos dieser Reihe haben einen starken Bezug zum Stoff dieser Vorlesung.

Interaktive Demonstrationen

3.2   Rasterkonvertierung von Polygonen (demo)
10.1   Phong / Blinn Phong Shading (demo)
10.2   Importance Sampling einer Halbkugel (demo)
12.1   Ear Cutting (demo)