Hauptinhalt

Grafikprogrammierung (WS 2024/2025)

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. 08:30 - 10:00 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: TBA

Gliederung der Vorlesung

Einführung
Grafische Benutzerschnittstellen
Repräsentation und Darstellung von 2D Objekten
OpenGL Pipeline
Objekttransformationen
Kameras
Texturen
Buffer Objects
OpenGL Shading Language (GLSL)
Licht und Materialien
Schatten
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

Übungen

Die Aus- und Abgabe der wöchentlichen Übungseinheiten erfolgt über die Lernplattform ILIAS.

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.

What are Shaders? A Hands-on Introduction [Shaders Monthly #1, 11/2021]
Perspective Projection in GLSL [Shaders Monthly #2, 12/2021]
OpenGL Modelview Matrix and 3D Transformations [Shaders Monthly #3, 01/2022]
Blinn Phong Shading: Theory and Implementation [Shaders Monthly #4, 02/2022]
Texture Mapping in GLSL [Shaders Monthly #5, 03/2022]
What are Mipmaps? Texture Filtering in GLSL [Shaders Monthly #6, 04/2022]
Procedural Textures: A Practical Introduction [Shaders Monthly #7, 05/2022]
Procedural Noise: Value and Gradient Noise in GLSL [Shaders Monthly #8, 06/2022]
Microfacet BRDF: Theory and Implementation of Basic PBR Materials [Shaders Monthly #9, 07/2022]
Importance Sampling: Image-based Lighting of a Lambertian Diffuse BRDF [Shaders Monthly #10, 09/2022]
Image-based Lighting (IBL) of PBR Materials [Shaders Monthly #11, 01/2023]
Halton Low-Discrepancy Sequence [Shaders Monthly #12, 05/2023]
Sampling of Environment Maps for Image-based Lighting [Shaders Monthly #13, 9/2023]
Deferred Shading [Shaders Monthly #14, 3/2024]

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.

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)