Einführung in die Computergrafik und Bildverarbeitung

Wintersemester 2021/22

21. Dezember 2021 - Recap, Shader Basics

• Feedback Studienleistung 1
• Studienleistung 3
• Shader Basics

Studienleistung 1

• in Bewertung
• insgesamt ordentlich, gute Kommentare

Studienleistung 3 (I)

Entwickeln Sie eine Anwendung, die eine 3D-Welt, organisiert in einem Szenengraph, darstellt. Zur Implementierung können OpenGL Immediate Mode oder GLSL-Shader verwendet werden.

Abgabe: Do, 13 Januar 2022 (5 Bonuspunkte - pro angefangener weiterer Woche 1 Punkt weniger)

Verpflichtende Features:

• Anzeigen einer simplen 3D-Szene mit mindestens drei Objekten
• Rotation und Zoom der Szene mit der Tastatur
• Objekte haben unterschiedliche Farben

Studienleistung 3 (II)

Wahlpflichtfeatures (3 Features):

• Rotation/Zoom der Szene mit der Maus
• Bewegen in der Szene mittels Maus / Tastatur
• Eine Lichtquelle, entsprechendes Shading
• mehrere Lichtquellen, entsprechendes Shading
• mindestens ein Bildfilter (fragment shader), z.B. Weichzeichner
• Animation mindestens eines Objekts (abschaltbar)
• Selektion von Objekten mit der Maus möglich (dann z.B. Farbänderung, Animation)
• Laden von Modellen mittels zusätzlicher Bibliothek

Studienleistung 3 (III)

Regeln:

• bei Verwendung fremder Code-Beispiele: Quellenangabe im Text
• als Framework PyOpenGL oder moderngl verwenden
• Abgabe von Quellcode und kurzer Video-Demo (ca. 1 Minute)

ShaderToy

• https://www.shadertoy.com/new
• WebGL-Anwendung zum Experimentieren mit GLSL-Shadern
• Einstiegspunkt void mainImage( out vec4 fragColor, in vec2 fragCoord ) (= fragment shader)
• Mausposition, Zeit, weitere Buffer/Bilder als weitere (globale) Parameter
• Webcam-Bild als Eingabe möglich
• Vertex-Shader nur indirekt unterstützt
• Einsteiger-Tutorial (Englisch)
• Dekonstruktion einer komplexen Szene

Fragment Shaders

• werden einmal pro Pixel im Bild aufgerufen, geben Farbwert zurück
• Eingabeparameter: Bildposition (vec2 fragCoord)
• Ausgabewert: Pixelfarbe (vec4 fragColor, RGBA)
• Zeichnen in 2D: Kreis
• Blur-Filter (nicht Gaussscher Weichzeichner, nicht effizient): https://www.shadertoy.com/view/Xltfzj
• Halbton-Shader

Vertex Shaders

• werden einmal pro Vertex aufgerufen
• Eingabeparameter: Vertex-Koordinaten (vec3)
• Ausgabewert: Vertex-Koordinaten, indem globale Variable glPosition gesetzt wird.
• nicht direkt von ShaderToy unterstützt
• Wireframe Cube: https://www.shadertoy.com/view/4lfBWf

Beispiele Shading

• Normalenbasiertes Shading: https://www.shadertoy.com/view/3sGfzw
• Blinn-Phong-Shading: https://www.shadertoy.com/view/XlXGDj

Was wir nicht mehr behandeln

• 3D-Engines
• Mesh-Animationen
• Rotation mittels Quaternionen
• Texturierung

Ausblick 22. Dezember 2021 (online)

• GLSL in Python verwenden
• Fragestunde zur Studienleistung 2

Ausblick 11. Januar 2022 (online)

• Wrap-Up 3D
• Intro Computer Vision / OpenCV