M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 12018-10-11

Advanced Computer Graphics0. Übung

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 22018-10-11

1. Voraussetzungen

2. Übungsablauf und Ziele

3. Inhalt und Zeitplan

4. Bonuspunktsystem

5. Einschub: C++

6. Einschub: WebGL

7. Einführung in OpenGL 3.x

Gliederung

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 32018-10-11

• Inhalt der Vorlesung „Computergrafik I“:− GPU-Rendering− Transformationen− Projektive Abbildungen− Licht und Farbmodelle− Z-Buffering / Tiefentest

• Mathematik:− Vektorgeometrie− Matrizenrechnung− Trigonometrie

• Programmierung:− Basiskonzepte wie Funktionen, Methoden, Variablen, Schleifen, usw.− C++/Java Syntax− Optional: HTML/JavaScript für WebGL

Voraussetzungen

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 42018-10-11

Ablauf

• Wechselseitige Einführung in benötigte OpenGL Konzepte und Aufgaben zur Implementierung von Verfahren

• Sowohl Konzepte als auch Implementierungen werden live in Visual Studio / Windows gezeigt

• Visual Studio 2017 Startprojekt inklusive benötigte Bibliotheken können auf der Homepage heruntergeladen werden

• Eigene Implementierungen können auch auf anderen IDEs/OSs oder mit WebGLerfolgen

Übungsablauf und Ziele

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 52018-10-11

Ziele

• Einblick in praktische Seite der Computergrafik

• Beleuchtung ausgewählter Verfahren der Interaktiven Computergrafik

• Anwendung bisher nur theoretisch behandelter Konzepte (Computergrafik I)

• Starthilfe für weiterführende Computergrafikprogrammierung

Übungsablauf und Ziele

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 62018-10-11

Inhalt und Zeitplan

Einführung in OpenGL 3.x

• Initialisierung•Clearing•Farb und Tiefenpuffer•Double Buffering

Geometrie in OpenGL

•Hochladen von Vertexdaten

•Primitivdefinitionen•Zeichnen im Screen Space

•Vertex Attribute

1. Übungsblatt

•Anwendung der eingeführten Konzepte aus Übung 0 und 1

2. Übungsblatt

•Performanzanalysenverschiedener Renderingmethoden

Shader

• Erzeugung von OpenGL Shadern

• GLSL Programmierung

3. Übungsblatt

• Vertex/Fragment Manipulation

• Einfache Farbeffekte

• Beleuchtung• Kontrollfluss

3D Rendering

• Perspektivisches Rendering

• Kamera-transformationen

• 3D-Vertex-Manipulation

4. Übungsblatt

• 3D Rendering• Kamerafahrten/

Steuerung• Culling

12.10.2018 19.10.2018 26.10.2018 02.11.2018

09.11.2018 16.11.2018 23.11.2018 30.11.2018

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 72018-10-11

Inhalt und Zeitplan

Framebuffer Objects und Texturen

•OpenGL Implementierung

•Offscreen-Rendering

•Multi-Rendertargets

5. Übungsblatt

•OffscreenRendering

•Texturen

6. Übungsblatt

•Post-Processing•Erweiterte Farbmanipulationen

•Edge-Detection•Bloom

7. Übungsblatt

•Shadow-Mapping•Soft Shadows

8. Übungsblatt

•G-Buffer•Deferred Shading

Freie Übung

•Screen Space Effects

•Screen spaceReflections

•God Rays•Ambient Occlusion

Klausurvorbereitung

07.12.2018 14.12.2018 21.12.2018 11.01.2019

18.01.2019 25.01.2019 01.02.2019

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 82018-10-11

BonuspunktsystemBonusaufgaben auf jeden Übungsblatt

• Können anhand des vorher behandelten Stoffes gelöst werden• Sind bis 24h vor der nächsten Übung zu bearbeiten und abzugeben• Bearbeiter werden stichprobenartig in der Übung befragt• Aufgaben sind in Eigenarbeit zu implementieren bei festgestelltem

Unterschleif entfällt das Bonussystem für den/die betreffenden Studenten

Bewertung

• Insgesamt können 15% der ACG Klausur als Bonus erreicht werden • Für volle Punktzahl muss jede Aufgabe richtig abgegeben werden

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 92018-10-11

Eigenschaften

• Ähnliche Syntax wie Java• Kann gemischt prozedural und objektorientiert programmiert werden• Deutlich performanter als andere Hochsprachen (Java, Python, C#)• ABER: Sehr maschinennah, d.h. Fehler im Code können weitreichende

Seiteneffekte zeigen

Verwendung in der Übung

• Rein prozedurale Programmierung mit OpenGL OpenGL ist nicht objektorientiert Zeitmangel

Einschub: C++

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 102018-10-11

Pointer

int i = 50;

int * p_i = &i; // Pointer auf i (Speicheradresse)

int j = *p_i; // schreibt Integer an Adresse p_i in j

println(“%i“, i); // gibt 50 ausprintln(“%i“, p_i); // gibt die Speicheradresse von i aus (kann !=50 sein)println(„“%i“, j); // gibt 50 aus

Einschub: C++

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 112018-10-11

Arrays

Arrays von Objekten verhalten sich wie Pointer

int i[50]; // 50 nacheinander gespeicherte Integer

int * j = i; // Arrays sind quasi Pointer

int k = *j; // setzt k auf den Wert i[0]int l = *(j + 5); // setzt l auf den Wert i[5]int m = i[5]; // m == l

Einschub: C++

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 122018-10-11

Eigenschaften

• Eingebettet in eine Webseite• Zugriff über JavaScript• Nahezu identische Syntax zu c++, etwas einfacher da dynamisch typisiert• Eingeschränkteres Feature Set :

• WebGL 1.0: OpenGL ES 1.00 ~ OpenGL 1.1• WebGL 2.0: OpenGL ES 3.00 ~ OpenGL 3.2

Verwendung in der Übung

• Kann als alternative zu C++ individuell verwendet werden• Vorgestellte Entwicklungen sind nach wie vor in C++

Einschub: WebGL

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 132018-10-11

Einschub: WebGL

C++ Code WebGL Code

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 142018-10-11

OpenGL

• Rein prozedurales Interface− Keine direkten Klassen/Objekte− Verwaltung von OpenGL-Strukturen mittels Identifier− Explizites Erzeugen und Löschen von Objekten

• Ist in Form einer Zustandsmaschine aufgebaut− Zustandsänderung durch bestimmte Funktionen

Beispiel : glBindBuffer(GL_ARRAY_BUFFER, ID);

− Beeinflussung des Verhaltens von Funktionen durch den ZustandBeispiel: glBufferData(GL_ARRAY_BUFFER, …);

− Steuerung von Drawcalls, An-/Abschaltung von GPU-Funktionen, usw.Beispiel: glEnable(GL_DEPTH_TEST);

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 152018-10-11

Aufwandsproblematik bei OpenGL

• Jeder Grafikkartenhersteller liefert eigene Implementierung Funktionen können beim Kompilieren nicht fest verlinkt werden Dynamisches Laden sämtlicher Funktionspointer vor Verwendung Jede einzelne verwendete Funktion muss eigens definiert und mittels der

Funktion „wglGetProcAddress“ gebunden werden Extensions müssen manuell auf Existenz überprüft werden

Benutzen in der Übung die Loader-Library „libepoxy“− Alle vorhandenen Funktionen und Extensions werden automatisch geladen− Simple Überprüfung von unterstützten Feature Levels und Extensions

Umgehen zusätzlich Initialisierungsaufwand (Fenster, OpenGL Kontext, usw.) mittels GLFW

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 162018-10-11

Initialisierung mit glfw

• glfwInit();Allgemeine Initialisierung

• glfwTerminate();Allgemeine Deinitialisierung

• glfwCreateWindow(int width, int height, const char* title, GLFWmonitor* monitor, GLFWwindow* share);Erzeugt Fenster zum Anzeigen der mit OpenGL gezeichneten Bilder

• glfwMakeContextCurrent(GLFWwindow* window)Aktiviert OpenGL für das gegebene Fenster

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 172018-10-11

Initialisierung mit glfw

• glfwWindowShouldClose(GLFWwindow* window);Gibt an, ob der Benutzer das Fenster geschlossen hat

• glfwPollEvents();Erlaubt glfw alle bestehenden Events abzuarbeiten

• Der Main Loop wird in glfw durch den Programmierer selbst erzeugt

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 182018-10-11

Initialisierung mit Freeglut (vorherige Semester)

• glutInit(int argc, char **argv);Allgemeine Initialisierung, übergibt Parameter der Programm-Main-Funktion

• glutInitWindowSize(int width, int height);Setzt die Größe des später erzeugten Fensters

• glutInitDisplayMode(int flags);Konfiguration von Eigenschaften des erzeugten Bildpuffers

• glutInitContextVersion(int majorVersion, int minorVersion);Erwartete OpenGL-Feature-Version

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 192018-10-11

Initialisierung mit Freeglut (vorherige Semester)

• glutInitContextProfile(int profile);Compatiblity-Modus zur Verwendung von auf dem erwarteten Feature-Level bereits entfernter Funktionalität, Core-Modus sonst

• glutCreateWindow(const char *title);Erstellt ein Fenster mit einem OpenGL-Kontext und den vorher definierten Eigenschaften OpenGL Befehle ab hier verwendbar

• glutDisplayFunc(void (*callback)())Legt die bei jeder Aktualisierung des Fensters aufgerufene Renderfunktion festACHTUNG: Hat erst nach „glutCreateWindow“ Auswirkungen

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 202018-10-11

Kontinuierliche Display Updates mit Freeglut (vorherige Semester)

• Freeglut zeichnet das Fenster nur neu, wenn benötigt (Interaktionen, Größenveränderungen, Minimierung/Maximierung, usw.) Schlecht für Geschwindigkeitstests, Bilder müssen kontinuierlich erzeugt werden

Zwingen Freeglut die Renderschleife ständig aufzurufen:• Erzeugen Funktion, welche „glutPostRedisplay()“ ausführt• Setzen diese als Leerlauffunktion für Freeglut: glutIdleFunc(name)

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 212018-10-11

Start der Renderschleife in Freeglut (vorherige Semester)

glutMainLoop();

• Startet eine Program-Endlosschleife (Event Loop)• Messages (u.A. Nutzer-Interaktionen) werden abgearbeitet• Der Fensterinhalt wird wiederholt neu gezeichnet durch Aufruf der vorher

angegebenen Display-Funktion• Endet wenn das Fenster geschlossen wird (Nutzer oder programmatisch)

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 222018-10-11

Initialisieren der Bildpuffer

• Zu Beginn jedes Einzelbilds sollte der Bildpuffer zurückgesetzt werden:

glClear(GLbitfield mask);

Initialisierung des Bildspeichers mit einem Standardwert (Farbe, Tiefe)

• „mask“ gibt an, welche Puffer geleert werden sollen (oder-verknüpfte Flags), bspw. GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT

• Verwendet werden vorher eingestellte Farben:

glClearColor(GLclampf red, GLclampf green, GLclampf blue, GLclampf alpha);

glClearDepth(GLclampd depth);

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 232018-10-11

Begrenzung des Renderbereichs

• Festlegung des Zeichenbereichs unterschiedlich möglich:

• glViewport(int x, int y, int width, int height);• legt den tatsächlichen Pixelbereich des Bildraums (Thema nächste Woche)

im Bildpuffer fest, hat keine Auswirkung auf „glClear“

• glScissor(int x, int y, int width, int heigth);glEnable(GL_SCISSOR_TEST);

• begrenzt den für jeden Zeichenvorgang verfügbaren Bereich des Bildpuffers• beeinflusst den durch „glClear“ geschriebenen Bereich

Einführung in OpenGL 3.x

M.Sc. Tristan Nauber Advanced Computer Graphics: Übung 0 242018-10-11

Double Buffering

• Nach Fertigstellung des Einzelbilds Austauschen der Puffer• Explizit durch den Programmierer

glfwSwapBuffers(GLFWwindow* window);glutSwapBuffers();

• Fakt am Rande: Wenn Austausch erfolgt, während der Bildschirm gerade aktualisiert Bildverzerrung (Screen Tearing) möglich

• Beseitigung: Warten auf abgeschlossene Bildschirmaktualisierung (Vsync)

Einführung in OpenGL 3.x

FensterFramebuffer 1 Framebuffer 2Rendern Anzeigen