~~REVEAL~~ ====== Einführung in die Computergrafik und Bildverarbeitung ====== Dr. Raphael Wimmer Sommersemester 2024 ===== Konzept ===== Anstelle einer klassischen Vorlesung mit Übung gibt es: - einen interaktiven Präsenztermin (Di, 12:15 - 15:45 Uhr, H8) - 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 wir die Grundlagen frontal-interaktiv besprechen - 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. Sie bearbeiten dort primär Programmieraufgaben zu Themen des Kurses. 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 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 der letzten beiden Male ===== > 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. [...] 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 ===== ==== 16. April 2024 - 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 ==== Ausblick: 23. April 2024 - 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 ===== Wichtige Veranstaltungen diese Woche ===== - [Nacht schafft Wissen](https://www.nacht-schafft-wissen.de/veranstaltungsorte/universitaet-regensburg) am Freitag, 19.4.24, unter anderem mit Führungen im VR4 (TechBase) - Semester-Kickoff der FS[i] am Donnerstag, 18.4.24, Wiese zwischen PT und VG (Beginn 15:00 Uhr) ===== Advance Organizer ===== (kommt noch) ===== Einführung Python ===== Material: - {{ :courses:cgbv_23ss:python_basics.ipynb |}} - {{ :courses:cgbv_23ss:python_classes_exceptions.ipynb |}} - {{ :courses:cgbv_23ss:python_quiz_exercises.ipynb |}} ==== 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 ===== GraphIT ===== https://graphit.ur.de/wiki/Courses/CGBV_SS24 ==== Graph heute ==== ===== Überblick: 23. April 2024 - Wiederholung Grundlagen, Praxis Rastergrafik ===== - Welche Python-IDE soll ich verwenden? - apt, pip, conda, virtualeenv, docker - Environments und Paketmanager für Python - Grundlagen Farbräume, Farbmodelle, Rastergrafik - Bilder laden und modifizieren ==== Graph heute ==== ===== Python IDEs ===== - jeder beliebige Text-Editor - vim (Anleitungen: [1](https://www.vimfromscratch.com/articles/vim-for-python), [2](http://liuchengxu.org/posts/use-vim-as-a-python-ide/)) - [Jetbrains PyCharm](https://www.jetbrains.com/pycharm/) (umfangreiche IDE speziell für Python) - [VisualStudio Code](https://code.visualstudio.com/) ([Tutorial](https://code.visualstudio.com/docs/python/python-tutorial)) - [repl.it](https://replit.com/) (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](https://www.youtube.com/watch?v=wf-BqAjZb8M&t=2s) ===== 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](https://docs.conda.io/en/latest/miniconda.html) - ``conda``: package manager für Anaconda ([Intro](https://conda.io/projects/conda/en/latest/user-guide/getting-started.html)) - pip und conda können parallel eingesetzt werden ([1](https://www.anaconda.com/blog/understanding-conda-and-pip), [2](https://pythonspeed.com/articles/conda-vs-pip/)) - Alternative: [Mamba](https://github.com/mamba-org/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](https://code.visualstudio.com/docs/python/environments), [PyCharm](https://www.jetbrains.com/help/pycharm/creating-virtual-environment.html)) - Conda: ``conda create --name myenv`` / ``conda activate myenv`` ===== 30. April 2024 - Bildfilter, Studienleistung 1 ===== - Recap: Bildfilter, Bilder (live) - Praktische Übung: Bildfilter, Punktoperatoren - Praktische Übung: Morphologische Operationen, Faltungen - Python: mit Kommandozeilenparametern arbeiten - Studienleistung 1: ein simpler Bildeditor ==== Unser Graph heute ==== ==== Wiederholung: Bildfilter ==== - Überblick: Typische Bildfilter - Überblick: Punktoperatoren, Geometrische Operatoren, Lokale Operatoren, Globale Operatoren - Faltungen ===== Studienleistung 1: Bitmap-Grafik (1) ===== Entwickeln Sie eine Anwendung *filtertool*, 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, 14. Mai 2024, 23:59 Uhr** (5 Bonuspunkte - pro angefangener weiterer Woche 1 Punkt weniger) ===== Studienleistung 1: Bitmap-Grafik (2) ===== Verpflichtende Features: - Batch-Kommandozeilenbetrieb (``python3 filtertool.py --threshold 90 --blur 3 --edges image.jpg``) - sinnvolle grafische Anzeige des Ergebnisses mit tkinter - Standardfilter (selbst implementiert) - Threshold - Brightness - Contrast - Blur - Sharpen ===== Studienleistung 1: Bitmap-Grafik (3) ===== Wahlpflichtfeatures (3 Features): - interaktive Auswahl der Filter über GUI - Filter nur auf selektierbaren Bereich anwenden - Canny Edge Detection - Erode/Dilate - [Stylized Pixel Binning](https://benjdd.com/posts/stylized-image-binning-algorithm/) - [Swirl](https://scikit-image.org/docs/stable/auto_examples/transform/plot_swirl.html) - (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 (Vorsicht: ChatGPT liefert manchmal subtil falsche Lösungen!) - keine weiteren (Grafik) Bibliotheken verwenden - Abgabe von Quellcode und kurzer Video-Demo (ca. 1 Minute) über GRIPS ===== 7. Mai - Image Filters, Tk-GUIs ===== ==== Überblick ==== - Kommandozeilenprogramme - GUIs mit [tkinter](https://docs.python.org/3/library/tkinter.html) - Besprechung Studienleistung - Implementierung von Helligkeit-/Kontrastfiltern ==== Kommandozeilenparameter parsen ==== `python3 app.py --mode simple -a file.txt` Mehrere Möglichkeiten in Python: - manuell (`sys.argv[]` parsen) - [argparse](https://docs.python.org/3/library/argparse.html) - [docopt](http://docopt.org/) - [click](https://click.palletsprojects.com/) ===== 14. Mai 2024 - Vektorgrafik I ===== ==== Überblick ==== - Grundlagen Vektorgrafik (separater Foliensatz) - Vektorgrafik in Python (Notebooks) - Support Studienleistung 1 ===== 28. Mai 2024 - Vektorgrafik II ===== ==== Überblick ==== - Warum 259? (ChatGPT, Stack Overflow, Bildkontrast) - Bezierkurven ([interaktive Demo](https://www.geogebra.org/m/ek7RHvuc)) - (Bresenham-Algorithmus) - Studienleistung 2 ==== Warum 259 ==== - Übungsaufgabe: Kontrastfilter implementieren - Lösungen entweder mit ImageEnhance-Modul oder mit einer merkwürdigen Formel - Woher kommt die 259? - [ChatGPT](https://chatgpt.com/share/835d6785-3628-45e5-83f7-3cf5ae53f3cd) - kopiert ohne Angabe von - [StackOverflow](https://stackoverflow.com/questions/10521978/html5-canvas-image-contrast) - referenziert - [Blog-Post von Francis G. Loch](https://www.dfstudios.co.uk/articles/programming/image-programming-algorithms/image-processing-algorithms-part-5-contrast-adjustment/) - der erklärt nicht wirklich, woher der Wert *259* kommt. - Warum diese Formel? - Welche besseren Alternativen gibt es? ===== 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, 18.6. 2024** (5 Bonuspunkte - pro angefangener weiterer Woche 1 Punkt weniger) ==== Verpflichtende Features ==== (Wenn nichts vorgegeben ist, einfach eine sinnvolle Lösung wählen) - 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) ===== 4. Juni 2024 - Vektorgrafik ===== ==== Themen heute ==== - Linien zeichnen mit und ohne Bresenham - Computational Geometry am Beispiel *Shoelace Algorithm* - Signed Distance Functions ==== Unser Graph heute ==== ==== Signed Distance Functions ==== - (algorithmische) Funktion, die ein 2D-/3D-Objekt beschreibt - Gibt für einen Punkt/Pixel `p` die Distanz zur Objektkante zurück: - < 0, wenn er im Objekt liegt - 0, wenn er auf der Kante des Objekts liegt - > 0, wenn er außerhalb des Objekts liegt - Beispiel Kreis: circle(point, radius) → distance_to_origin(point) - radius - Kombination von individuellen SDFs über Boolsche Operationen: - Union: `min(sdf1, sdf2)` - Intersection: `max(sdf1, sdf2)` - Difference: `max(sdf1, -sdf2)` ==== Signed Distance Functions: Übung ==== Eure Aufgabe jetzt zu zweit: - implementiert gemeinsam eine Signed-Distance-Funktion `circle(p, radius)`, die für einen Pixel `p` im Bild überprüft, ob er im Kreis mit Mittelpunkt (0,0) und Radius `r` liegt. - zeichnet damit den Kreis - überlegt, wie man den Kreis in der Mitte des Bildes platzieren könnte und implementiert dies (Tipp: transformiert den zu testenden Punkt) - implementiert eine SDF, die einen Smilie mithilfe von `circle()` und union/difference/intersection zeichnet ===== 11. Juni 2024 - Einführung 3D-Grafik, OpenGL, Szenengraphen ===== ==== Themen heute ==== - Rückblick: Grundlagen 3D-Grafik - Eine minimale 3D-Engine - OpenGL - Entwicklung, Alternativen - Immediate Mode vs. Retained Mode - Intro PyOpenGL - Szenengraphen ==== Unser Graph heute ==== ==== Rückblick Grundlagen 3D-Grafik ==== - Drei Typen von Repräsentationen von 3D-Objekten: - Mesh (Echtzeit-3D-Grafik) - Voxels (primär aus bildgebenden Verfahren) - Parametrische Modellierung (siehe SDF, Raytracing, CAD) - Mesh-Rendering - Transformation von Vertices im globalen Koordinatensystem (Matrixmultiplikationen) - Projektion der Vertices in das 2D-Koordinatensystem des Bildschirms - Zeichnen der Polygone (in der Regel: Dreiecke) auf dem Bildschirm inkl. Beleuchtung (Shading), Textur ==== Eine simple 3D-Engine ==== - Hintergrund: - Effiziente 3D-Grafik erfordert komplexe Optimierungen - Bibliotheken und Frameworks nehmen uns inzwischen einen Großteil der Arbeit ab - APIs und Werkzeuge ändern sich rapide - Grundverständnis wichtig: 3D-Koordinatensysteme, Vertices, Meshes - Unser Ziel: - Nur Python / PIL / Numpy - Zeichnen von simplen Drahtgitter-Netzen - Virtuelle Kamera - gemeinsam im Jupyter-Notebook (3D-Experiments.ipynb) ==== OpenGL ==== - Offener, erweiterbarer Standard für 3D-Zeichen-API - Standardisiert durch Khronos Group - Alternativen / Konkurrenz: DirectX (nur Windows), Metal (nur macos) - OpenGL 1.0 (1992): Immediate Mode API - OpenGL 2.0 (2004): Shaders - OpenGL 3, 4 (ab 2008): Deprecation des Immediate Mode, Implementierung als Shader - Nachfolger: Vulkan (seit 2016, viel Hardware-näher als OpenGL) - Spin-Offs / Dialekte: WebGL (im Browser), EGL/GL ES (mobile Geräte) - Toolkits: GLU, GLUT/FreeGLUT, GLFW (Helferfunktionen) - Einbettung in viele Grafikframeworks (u.a. SDL, Qt, Tkinter) möglich ==== Immediate Mode vs. Retained Mode ==== - **Immediate Mode**: Anwendung ist Eigentümer der Szene und ruft für jedes Frame Zeichenoperationen über API auf - **Retained Mode**: Anwendung übergibt zu zeichnende Objekte und ggf. Verhalten an Grafikframework – dieses rendert dann eigenständig die Szene. - Vorteil Immediate Mode: Einfach zu verstehen - Vorteil Retained Mode: Deutlich bessere Performance ==== OpenGL Basics ==== - Matrixmultiplikation zur Transformation von Modell-/Kamerakoordinaten und für Projektion 3D → 2D - OpenGL 1/2: Immediate Mode Rendering, Vertices entweder in CPU- oder GPU-Speicher (DisplayLists, VBO), globaler Matrix-“Stack“ - OpenGL 3/4: Rendering über Shader (Programme, die parallel in der GPU ausgeführt werden): - Vertex Shader: transformiert Vertices (Meshes, Kamera-Transformation, Projektion) - Fragment Shader: modifiziert Pixel-Werte (Farbe, Textur, Beleuchtung, Effekte) - C-ähnliche Programmiersprache: GL Shader Language (GLSL) ==== Beispiel: Immediate Mode ==== glClear(GL_COLOR_BUFFER_BIT) glColor3f(1.0, 1.0, 1.0) glLoadIdentity() gluLookAt(0.0, 0.0, 5.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0) glScalef(1.0, 2.0, 1.0) glRotatef(45, 0, 1, 0) glBegin(GL_QUADS) glVertex3f(0.0, 0.0, 0.0) glVertex3f(0.0, 1.0, 0.0) glVertex3f(0.0, 1.0, 1.0) glVertex3f(0.0, 0.0, 1.0) glEnd() glFlush() ==== Hands-On: OpenGL zum Laufen bringen ==== → Jupyter-Notebook `simple_cube_immediate_mode.ipynb` ==== Nächste Schritte ==== - (PyOpenGL installieren) - anfangen, https://www.labri.fr/perso/nrougier/python-opengl/ zu lesen ===== 18. Juni 2024 - GLSL, Fragment-Shader, Vertex-Shader ===== ==== Themen heute ==== - Rückblick: Signed Distance Functions - Fragment Shaders - Vertex Shaders - Experiemnte in ShaderToy - Intro PyOpenGL / Shaders - Szenengraphen? ==== Recap: 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](https://en.wikipedia.org/wiki/Marching_cubes) - [Python library](https://gitlab.com/nobodyinperson/sdf) ==== GLSL ==== - OpenGL Shader Language - C-ähnliche Syntax - wird kompiliert und auf der GPU ausgeführt - Subset der GLSL (in WebGL, mobilen Geräten verwendet): OpenGL ES 3.0 SL ([Specification](https://registry.khronos.org/OpenGL/specs/es/3.0/GLSL_ES_Specification_3.00.pdf)) ==== ShaderToy ==== - https://www.shadertoy.com/new - WebGL-Anwendung zum Experimentieren mit GLSL-Shadern - Beispiel: [Shader Art Coding Introduction](https://www.shadertoy.com/view/mtyGWy) - Einstiegspunkt ``void mainImage( out vec4 fragColor, in vec2 fragCoord )`` (= fragment shader) - Mausposition, Tastatur, Zeit, weitere Buffer/Bilder als weitere (globale) Parameter ([Beispiel: Tastatur](https://www.shadertoy.com/view/lsXGzf)) - Webcam-Bild als Eingabe möglich - Vertex-Shader nur indirekt unterstützt - [Cheat sheet](https://gist.github.com/markknol/d06c0167c75ab5c6720fe9083e4319e1) - [Einsteiger-Tutorial](https://www.youtube.com/watch?v=0ifChJ0nJfM) (Englisch) - [Dekonstruktion einer komplexen Szene](https://www.youtube.com/watch?v=-pdSjBPH3zM) ==== 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](https://www.shadertoy.com/view/XsjGDt) - Blur-Filter (nicht Gaussscher Weichzeichner, nicht effizient): https://www.shadertoy.com/view/Xltfzj - [Halbton-Shader](https://weber.itn.liu.se/~stegu/webglshadertutorial/shadertutorial.html) ==== 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 ==== Geometry Shaders ==== - optional - in: einzelenes Grafik-Primitiv - out: ein oder mehrere Grafik-Primitive - [Wikipedia](https://www.khronos.org/opengl/wiki/Geometry_Shader) ==== Eure Aufgaben ==== - Öffnet ein ShaderToy-Beispiel - Recherchiert in der GLSL-Dokumentation (s.o.), was die Keywords bedeuten - Modifiziert den Code, um zu verstehen, was er macht - Fügt Interaktion und/oder Animation hinzu. ==== Beispiele Shading in GLSL==== - Normalenbasiertes Shading: https://www.shadertoy.com/view/3sGfzw - Blinn-Phong-Shading: https://www.shadertoy.com/view/XlXGDj ==== Shaders in PyOpenGL ==== gemeinsame Analyse von https://github.com/nvalis/DemoTool/ ==== Weiterführende Links ==== - [Comparison of Modern Graphics APIs](https://alain.xyz/blog/comparison-of-modern-graphics-apis) - [Review of Shader Languages](https://alain.xyz/blog/a-review-of-shader-languages) - [Vulkan High-Level Shader Language Comparison](https://docs.vulkan.org/guide/latest/high_level_shader_language_comparison.html) - [Shading the Canvas: A Beginner’s Guide to Vertex and Fragment Shaders](https://medium.com/@aghajari/shading-the-canvas-a-beginners-guide-to-vertex-and-fragment-shaders-f2a0b446294f) - [Best Practices for Modern OpenGL](https://juandiegomontoya.github.io/modern_opengl.html) - [History of OpenGL](https://www.khronos.org/opengl/wiki/History_of_OpenGL) ===== 25. Juni 2024 - 3D-Grafik III - Raytracing ===== ==== Themen heute ==== - Grundkonzepte Raytracing (siehe Notebook) - Analyse DemoTool-Implementierung - Studienleistung 3: 3D-Grafik - Vorbereitung für nächste Woche: OpenCV ==== Weiterführende Links ==== - [jamesbowman/raytrace](https://github.com/jamesbowman/raytrace) repository - [Explanation of optimizations in rt3.py](https://www.excamera.com/sphinx/article-ray.html) - [Raytracing from scratch in Python](https://omaraflak.medium.com/ray-tracing-from-scratch-in-python-41670e6a96f9) - [YouTube: Raytracing in Python: Shading, Reflection, Refraction, Fog and More!](https://www.youtube.com/watch?v=WWJgrftx6MQ) ===== Studienleistung 3: 3D-Grafik ===== ==== Aufgabe 3a: 3D-Welt ==== Entwickeln Sie eine Anwendung, die eine 3D-Welt basierend auf Meshes darstellt. Sie können zur Implementierung den OpenGL Immediate Mode oder das DemoTool verwenden. === Verpflichtende Features === - Anzeigen einer simplen 3D-Szene mit mindestens drei unterschiedlichen Objekten - Bewegen in der Szene mit Maus und Tastatur - Objekte haben unterschiedliche Farben === Wahlpflichtfeatures (3 Features) === - Animation (z.B. Rotation) mindestens eines Objekts (abschaltbar) - Selektion von Objekten mit der Maus möglich (dann z.B. Farbänderung, Animation) (→ raycasting) - Laden von Modellen mittels externer Bibliothek, etc. - spezielle Effekte (Nebel, etc.) - zuschaltbarer Bildfilter (fragment shader), z.B. Weichzeichner ==== Aufgabe 3b: WebGL / ShaderToy ==== Entwickeln Sie einen Shader in ShaderToy, der eine hübsche Animation erzeugt === Verpflichtende Features === - Färbung / Texturierung mittels Shader - Animation - Hübsch Wahlpflichtfeatures: keine ==== Aufgabe 3c: Raytracer ==== Erweitern Sie das Raytracing-Notebook um **eines** der folgenden Features: === Verpflichtende Features === - Refraktion / Brechung oder - Animation (und Speichern als Bildfolge) oder - weitere Objekttypen oder - ein anderes Material ==== 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, 9. Juli 2024, 23:59 Uhr um die volle Punktzahl zu erhalten ===== 2. Juli 2024 - Grundlagen Computer Vision ===== ==== Themen heute ==== - siehe Foliensatz ==== Material / Links ==== - https://cpvrlab.github.io/ImagePlay/ ===== 9. Juli 2024 - Praxis Computer Vision ===== ==== Themen heute ==== - Andreas Schmid stellt einige Beispiele für komplexere CV-Ansätze aus unserer Forschungspraxis vor - siehe Foliensatz in GRIPS ===== 16. Juli 2024 - Zusammenfassung, Studienleistung, Abschluss ===== ==== Themen heute ==== - Zusammenfassung - Klausur - Studienleistung 4 - Feedback Studienleistung 2 / 3 ==== Zusammenfassung CGBV ==== [[https://graphit.ur.de/w/images/thumb/Tafel-smaller.jpg/1170px-Tafel-smaller.jpg]] ==== Klausur ==== - Mittwoch, 31.7.2024, 10 - 12 Uhr - Raum wird noch bekanntgegeben - Jupyter-Notebook mit Aufgaben, die bearbeitet werden müssen - Beispielklausur in GRIPS ==== Material / Links ==== - Viele Notebooks für die Verwendung von OpenCV in Python: https://github.com/chewbacca89/OpenCV-with-Python ===== Studienleistung 4: Computer-Vision ===== ==== Aufgabenstellung (1) ==== - Ihr Ziel ist, einen Drucksensor auf Basis eines Ultraschallgeräts zu entwickeln. - Auf dem Schallkopf befindet sich ein verformbares Substrat, das sich verformt, wenn man mit dem Finger darauf drückt. - Dadurch verschiebt sich die Position von Objekten im Substrat (z.B. Luftblasen), was im Ultraschallbild sichtbar ist. - Entwickeln Sie in einem Jupyter Notebook einen Algorithmus um Konturen in einem Ultraschallbild zu erkennen und ihre Bewegung zu tracken. - **Abgabe: Mi, 31.7. 2024** (5 Bonuspunkte - pro angefangener weiterer Woche 1 Punkt weniger) ==== Aufgabenstellung (2) ==== - Datensatz in GRIPS - Der Algorithmus soll für alle Bildsequenzen im Datensatz funktionieren. Jede Bildsequenz beinhaltet drei Bilder mit unterschiedlichen Druckstufen. - Alle Bilder sind jeweils aus der gleichen Perspektive aufgenommen, d.h. eine Entzerrung kann global für alle Bilder implementiert werden. - Der Algorithmus soll immer zwei Bilder als Eingabe erhalten. - Er soll eine Liste mit den Positionen einer oder mehrerer Formen im Bild ausgeben und jeweils den Bewegungsvektor in Pixeln, um die sich die Form Objekt bewegt hat. - Das Notebook soll ein Bild erzeugen, in dem Formen und Vektoren eingezeichnet sind. ==== Verpflichtende Features ==== (Wenn nichts vorgegeben ist, einfach eine sinnvolle Lösung wählen) - Entzerrung der Bilder mit einer Homographie. - Filtern des Bildes, um relevante Konturen gut hervorzuheben - Identifikation von Formen oder Konturen im Bild. - Finden von korrespondierenden Formen in zwei Bildern mittels ORB o.ä. - Ausgabe einer Liste mit den Positionen einer oder mehrerer Formen im Bild und des Bewegungsvektors in Pixeln, um die sich die Form bewegt hat. ==== Wahlpflichtfeatures (1 Feature) ==== - Einzeichnen von Formen und Vektoren ins Bild. - Anpassen von Parametern über Slider - Dynamisches Verzerren eines Bildes anhand der Verschiebungen im Ultraschallbild - (eigenes Feature vorschlagen)