Einführung in die Computergrafik und Bildverarbeitung

Dr. Raphael Wimmer Sommersemester 2023

Konzept

Dieser Kurs ist ein Experiment. Manches wird gut klappen, manches weniger gut. Feedback nehme ich gerne an. Manche Details passe ich während des Semesters an.

Anstelle einer klassischen Vorlesung mit Übung gibt es:

• einen interaktiven Präsenztermin (Di, 12:15 - 15:45 Uhr, H25 und _DE.113)
• eine Sammlung an Lehrmaterial
• einen Abhängigkeitsgraph, der zeigt, welche Themen man in welcher Reihenfolge lernen sollte
• vier Milestones/Studienleistungen (2D-Bitmapgrafik, 2D-Vektorgrafik, 3D-Grafik, Computer Vision), zu denen Sie eine kleine Übungsaufgabe bearbeiten müssen/sollten.
• eine Klausur (Präsenz), in der Sie am Rechner mehrere Programmieraufgaben bearbeiten

Organisatorisches

• Anfangs gibt es einige Präsenz-Termine, in denen ich die Grundlagen frontal-interaktiv bespreche
• Dann kriegen Sie eine Art Lernlandkarte / Abhängigkeitsgraph / Mindmap der Themen des Kurses inkl. Material und Aufgaben. Ca. 70% der Themen sind Kerninhalte. Diese können Sie in ihrer eigenen Geschwindigkeit bearbeiten. Aus den restlichen Themen wählen Sie dann diejenigen, die Sie am meisten interessieren und vertiefen diese.
• Als Programmiersprache werden wir Python verwenden (zusätzlich: Jupyter Notebooks, OpenGL, GLSL, OpenCV).
• Während der Präsenztermine schauen wir uns gemeinsam wichtige Themen und Anwendungen an. Das wird dann eher eine interaktive Übung als eine klassische Vorlesung (“Flipped Classroom”). Außerdem nutzen wir den Termin als Ort für Pair-Programming, Sprechstunde für Probleme, und um Feedback zu geben.

Leistungsnachweis

• Es gibt einige Milestones zu festen Terminen im Semester, die sie einhalten sollten. Da müssen Sie dann jeweils eine kleine Studienleistung abgeben. Je früher Sie abgeben, und je besser Ihre Lösung, umso mehr Bonuspunkte für die Klausur erhalten Sie.
• Am Ende des Semesters findet eine Klausur in Präsenz statt. Diese wird vermutlich zwei bis drei Stunden dauern. Sie entwickeln dort eine Anwendung zu einem vorgegebenem Thema. Dabei können Sie natürlich auf allen Code zurückgreifen, den Sie im Laufe des Kurses schon geschrieben haben. Außerdem kommen noch ein paar Theoriefragen dazu. Das Format “Klausur” ist in der Prüfungsordnung vorgegeben. Es dient in diesem Fall auch dazu, sicherzustellen, dass Sie selbst die ganzen Aufgaben während des Semesters bearbeitet haben. Die Klausur wird auf jeden Fall am Rechner stattfinden, nicht auf Papier. Für die Klausur gibt es 100 Punkte. Eine Notenstufe entspricht 5 Punkten, d.h. ab 50 Punkten bekommen Sie eine 4.0.
• Bonuspunkte gibt es für:
• Abgeben der Studienleistungen (max. 20 Punkte insgesamt)
• Bug Bounty: pro sachlichem Fehler in meinen Materialien 1 Punkt (FCFS)
• Teilen von guten Quellen (je 1 Punkt, max. 5 Punkte insgesamt)

Materialien

Sie erhalten von mir:

• nicht: komplette Foliensätze für jeden Termin, aber:
• Überblicksdokumente
• einen interaktiven Abhängigkeitsgraphen der Inhalte der Vorlesung
• Links und Tipps zu Material
• Foliensätze zu bestimmten Themen
• Screenshots / Fotos von wichtigen Zeichnungen

Feedback vom letzten Mal

Aufwendiger Kurs, aber sehr praktisch weswegen es auch Spaß macht und die Zeit die man dafür aufwendet auch schnell verfliegt.

Interessante Vorlesung, die mir neue Themen und Anwendungsmöglichkeiten beigebracht hat. Die Einführungen in die OpenGL und OpenCV waren spannend und mir davor nur vom hören bekannt. Die Studienleistungen ließen sich auch gut bearbeiten. Waren am Anfang etwas überfordernd (da es bei mir kaum/kein Vorwissen gab), aber ließen sich meistens doch ganz gut durcharbeiten.

Sehr interessante Vorlesung, die viel praktisches Wissen mit sich bringt

Sehr interessant, aber man muss am Ball bleiben

Die Studienleistungen waren sehr interessant und anspruchsvoll, haben aber auch Spaß gemacht. Hab mir teilweise etwas schwer getan, auch weil mir die Erfahrung mit Python gefehlt hat. Vor allem bei Modern Opengl für Python (also mit GLSL) gab es einige Schwierigkeiten, da [...] Mit OpenGL Immediate Mode war die SL jedoch mit den vorhandenen Mitteln gut zu bearbeiten. Die Aufzeichnungen der Vorlesung waren teils etwas spät. Ansonsten sehr interessante und coole Veranstaltung, bei der man auch viel selber herumprobieren durfte (v.a. bei Studienleistungen) und gut erklärte Beispiele bekommen hat.

Zeitplan

18. April 2023 - Einführung, Überblick

Klassische frontale Vorlesung zum Einstieg.

Themen heute:

• Überblick über das Kurskonzept
• Organisatorisches
• Advance Organizer / Überblick über die Themen des Kurses

Danach eine Übung mit:

• Grundlagen Python
• Grundlagen Jupyter Notebooks
• ein bisschen Lineare Algebra (falls wir noch Zeit haben)

Ausblick: 25. April 2023 (asynchron) - Wiederholung Grundlagen, Praxis Rastergrafik

• Grundlagen Farbräume, Rastergrafik
• Welche Python-IDE soll ich verwenden?
• apt, pip, conda, virtualeenv, docker - Environments und Paketmanager für Python
• Bilder laden und modifizieren

Advance Organizer

(kommt noch)

Einführung Python

Material:

• python_basics.ipynb
• python_classes_exceptions.ipynb
• python_quiz_exercises.ipynb

Python IDEs

• jeder beliebige Text-Editor
• vim (Anleitungen: 1, 2)
• Jetbrains PyCharm (umfangreiche IDE speziell für Python)
• VisualStudio Code (Tutorial)
• repl.it (kollaborative browser-basierte IDE)

PEP 8 - Style Guide für Python

• PEP: Python Enhancement Proposal - ein Vorschlag, wie die Sprache weiterentwickelt werden soll
• PEP 8 – Style Guide for Python Code](https://www.python.org/dev/peps/pep-0008/)
• pep8: Kommandozeilentool, das Code auf PEP-8-Konformität prüft
• Hier im Kurs: PEP-8-Regeln bitte einhalten (zwingend für Studienleistung), bis auf Regel zu max. Zeilenlänge
• Link-Tipp: Vortrag von Raymond Hettinger: Beyond PEP 8 -- Best practices for beautiful intelligible code

Paketmanagement in Python

Es gibt drei verbreitete Möglichkeiten, Python-Module zu installieren:

• Paketmanagement des Betriebssystems (z.B. apt unter Debian/Ubuntu Linux)
• pip - Pythons Paketmanager
• conda - Paketmanagement der Anaconda-Distribution

Um für jede Anwendung separate Module zu installieren: virtual environments

Paketmanagement durch Betriebssystem

• Primär bei Linux-Distributionen, z.B. Debian/Ubuntu
• apt install python3-matplotlib
• Vorteile: global verfügbar, sicher, vorkompilierte Binaries
• Nachteile: nicht immer aktuell, nicht alle Python-Pakete verfügbar, immer nur eine Paketversion installierbar

Paketmanagement mit pip

• Pakete werden aus dem Python Package Index (PyPI) installiert (PyPI enthält quasi alle Pakete)
• pip3 install matplotlib
• pip3 install -r requirements.txt: Textdatei mit Paketnamen und ggf. Versionen.
• Vorteile: global oder (default) lokal installierbar, immer aktuellste Version, quasi alle Pakete verfügbar.
• Nachteile: nicht zwingend robust/sicher, Kompilierungsschritt bei C-Erweiterungen notwendig

Paketmanagement mit conda

• Anaconda: Python-Distribution für Scientific Computing (multi-platform)
• Minimale Distribution: miniconda
• conda: package manager für Anaconda (Intro)
• pip und conda können parallel eingesetzt werden (1, 2)
• Alternative: Mamba
• Vorteile: sicher, robust, vorkompilierte Binaries, integrierte Unterstützung von virtual environments
• Nachteile: nicht immer aktuell, wenige Python-Pakete verfügbar, fügt Overhead (Ressourcen, Debugging) hinzu

Virtual Environments

• Grundidee: für jedes Projekt eine eigene Python-Installation
• Funktionsweise: Überschreiben der Pfade zu Binaries, Bibliotheken in der aktuellen Shell
• Virtualenv im Unterverzeichnis .env anlegen: python3 -m venv .env
• Virtualenv aktivieren: source .env/bin/activate (deaktivieren durch Beenden der Shell)
• Viele IDEs unterstützen venv (VS Code, PyCharm)
• Conda: conda create --name myenv / conda activate myenv

2. Mai 2023 - Grauwerttransformationen, Filter, Studienleistung 1

• Recap: Bildfilter, Bilder (live)
• Praktische Übung: Grauwerttransformationen
• Studienleistung 1: ein simpler Bildeditor
• Praktische Übung: Morphologische Operationen, Faltungen
• Beratung: Python

Studienleistung 1: Bitmap-Grafik (1)

Entwickeln Sie eine Anwendung Mini-Gimp, mit der man (destruktiv) Bilder bearbeiten kann. Bilder liegen als RGB- oder Graustufenbild vor und können mit Pillow eingelesen und geschrieben werden. Ansonsten sollen alle Bildoperationen selbst geschrieben werden.

Abgabe: Di, 16. Mai 2023 (5 Bonuspunkte - pro angefangener weiterer Woche 1 Punkt weniger)

Studienleistung 1: Bitmap-Grafik (2)

Verpflichtende Features:

• Batch-Kommandozeilenbetrieb (python3 minigimp.py --threshold 90 --blur 3 --edges image.jpg)
• Standardfilter (selbst implementiert)
  • Threshold
  • Brightness
  • Contrast
  • Blur
  • Sharpen

Studienleistung 1: Bitmap-Grafik (3)

Wahlpflichtfeatures (3 Features):

• sinnvolle grafische Anzeige des Ergebnisses (Empfehlung: Tk)
• interaktive Auswahl der Filter
• Linien zeichnen mittels Bresenham-Algorithmus
• Canny Edge Detection
• Erode/Dilate
• Entfernen von Störungen durch Inpainting
• (eigenes Feature vorschlagen)

Studienleistung 1: Bitmap-Grafik (4)

• bei Verwendung fremder Code-Beispiele: Quellenangabe im Quelltext
• bei Verwendung von ChatGPT o.ä: formlose Angabe im Quelltext
• keine weiteren (Grafik) Bibliotheken verwenden
• Abgabe von Quellcode und kurzer Video-Demo (ca. 1 Minute) über GRIPS

Ausblick 9. Mai - Vektorgrafik

• Einführung Abhängigkeitsgraph
• Grundlagen Vektorgrafik
• Bezierkurven
• Matrixtransformationen

Voraussetzungen für Teilnahme am nächsten Termin

• Lauffähige lokale Python-Installation und IDE
• (optional) lokale JupyterLab-Installation
• Alle Notebooks in GRIPS bearbeitet
• Feedback vorbereitet: wo gibt es Probleme, welche Hilfestellung wäre gut?
• Laptop dabei, um einige der gezeigten Dinge mal selbst auszuprobieren

9. Mai - Vektorgrafik

Einführung Abhängigkeitsgraph

Siehe https://graphit.ur.de/wiki/Courses/CGBV

Wiederholung: Vektorgrafik / Matrixoperationen

Siehe GRIPS

16. Mai - Vektorgrafik

• Vektorgrafik in Python
• Bezierkurven
• Bresenham-Algorithmus
• Support Studienleistung 1

23. Mai - entfällt krankheitsbedingt

30. Mai - entfällt wegen Pfingstmontag

6. Juni - Wrap-Up Vektorgrafik, Studienleistung 2

Überblick

• Unser Graph für heute: https://graphit.ur.de/wiki/Item:Q248
• Info: alles Material auch über GitHub: https://github.com/PDA-UR/cgbv
• Themen heute (VL):
  • Studienleistung 2 - und Konzepte, die Ihr dafür braucht
  • Flood Fill
  • Szenengraphen
• Themen heute (Ü):
  • Feedback Studienleistung 1
  • Hands-on: Viewports, Dragging, Zooming

Graph heute

Ziele heute

• Ihr kennt verschiedene Flood-Fill-Algorithmen
• Ihr wisst, wie Ihr diese implementieren könnt
• Ihr habt etwas mehr Erfahrung darin, wie man fremden Code liest
• Ihr könnt einen Canvas mit Viewport implementieren

Ausblick

• 13.6.: 3D-Grafik: Rendering Pipeline
• 20.6.: Gastvortrag Jakob Troidl
• 27.6.: 3D-Grafik: OpenGL
• 04.7.: 3D-Grafik: Shaders
• 11.7.: Computer Vision: Intro, OpenCV
• 18.7.: Computer Vision: Object Recognition, Wrap-up

Studienleistung 2: Vektor-Grafik

Aufgabenstellung

Entwickeln Sie eine Zeichenanwendung mini-draw.py, mit der man Vektorgrafiken erstellen und bearbeiten kann. Die Funktionsweise soll gängigen Vektorgrafikprogrammen wie z.B. Inkscape ähneln. Die Anwendung soll einen tkinter.Canvas verwenden, in dem über die create_rect()-Methode einzelne Pixel gesetzt werden. Alle weiteren Zeichenoperationen sollen auf dieser Basis implementiert werden. Abgabe: Di, 20.6. 2023 (5 Bonuspunkte - pro angefangener weiterer Woche 1 Punkt weniger)

Verpflichtende Features

• Zeichnen von geraden Linien mit der linken Maustaste
• Zeichnen von quadratischen Bezier-Kurven, indem für jede gezeichnete Linie in der Mitte ein Kontrollpunkt gezeichnet wird, der gezogen werden kann
• Zeichnen von gefüllten Polygonen (selbst implementiert)
• Alle End-/Eck-/Kontrollpunkte sollen als kleine Rechtecke (z.B. 5×5 px) dargestellt werden und mit der Maus verschoben werden können
• Mittels der Taste 'x' kann man die End-/Eck-/Kontrollpunkte ein-/ausblenden
• Mittels der Taste 'c' kann man den Canvas leeren
• Mit der mittleren Maustaste kann der gesamte Canvas verschoben werden

Wahlpflichtfeatures (3 Features)

• Zoomen mit dem Scrollrad (Liniendicke bleibt konstant 1 px)
• Zeichnen mit Farben (Auswahldialog von tkinter verwenden)
• Füllen mit Mustern / Schraffuren
• Speichern und Laden der Grafik
• Zeichnen von Rechtecken oder Kreisen mit der rechten Maustaste
• effizientes Neuzeichnen des Bildschirms nur dort, wo sich etwas verändert hat
• Antialiasing der Linien
• (eigenes Feature vorschlagen)

3D-Grafik: Rendering-Pipeline (13.6.2023)

Folien dieses Mal als PDF in GRIPS

Gastvortrag Jakob Troidl (20.6.2023)

3D-Grafik: OpenGL (27.6.2023)

Folien in GRIPS

Studienleistung 3: 3D-Grafik

Aufgabe 3a: 3D-Szenegraph

Entwickeln Sie eine Anwendung, die eine 3D-Welt, organisiert in einem Szenengraph, darstellt. Sie können zur Implementierung den OpenGL Immediate Mode verwenden.

Verpflichtende Features

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

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
• Animation mindestens eines Objekts (abschaltbar)
• Selektion von Objekten mit der Maus möglich (dann z.B. Farbänderung, Animation)
• Laden von Modellen mittels externer Bibliothek, etc.

Aufgabe 3b: GLSL

Entwickeln Sie eine Anwendung, die ein non-triviales 3D-Objekt darstellt (z.B. eine Vase). Verwenden Sie zur Implementierung GLSL in Python.

Verpflichtende Features

• Färbung / Texturierung des Objekts mittels Shader
• animierte Rotation des Objekts
• mindestens ein zuschaltbarer Bildfilter (fragment shader), z.B. Weichzeichner

Wahlpflichtfeatures: keine

Regeln

• bei Verwendung fremder Code-Beispiele oder von LLM-Output: Quellenangabe im Text
• als Framework PyOpenGL, glfw, glumpy, pyglet oder moderngl verwenden
• Abgabe von Quellcode und kurzer Video-Demo (ca. 1 Minute) bis Dienstag, 11. Juli 2023, 23:59 Uhr um die volle Punktzahl zu erhalten

3D-Grafik: SDFs und Shader (4.7.2023)

Heute

• NeRFs
• Signed Distance Functions
• Shader Basics
• GLSL
• Studienleistung 3

Graph heute

Signed Distance Functions

• allgemeine Idee: finde eine Funktion, die eine geometrische Form definiert
• Parameter: Koordinaten eines Punktes p (x- und y-Wert bei 2D)
• Rückgabewert: 0, wenn Punkt auf Form, < 0 wenn innerhalb der Form > 0 wenn außerhalb
• Beispiel Kreis an Position q mit Radius r: f(p) => length(p-q) - r
• Tolle Eigenschaften:
  • SDFs existieren für viele 2D- und 3D-Formen
  • Affine Transformationen einfach implementierbar
  • Boolesche Operationen auf SDFs anwendbar (z.B. Schnittmenge)
    - Ggf. Umwandlung in Mesh durch Sampling und Marching-Cubes-Algorithmus
• Python library

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, Tastatur, Zeit, weitere Buffer/Bilder als weitere (globale) Parameter (Beispiel: Tastatur)
• 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 11. Juli 2023

• Einführung Computer Vision
• Einführung OpenCV
• Infos zu Studienleistung 4