workshop: einführung in die 3d-computergrafikcfroehli/workshop_cg.pdf · • inverse matrix: 13....
TRANSCRIPT
![Page 1: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/1.jpg)
Workshop: Einführung in die 3D-Computergrafik
Julia TolksdorfThies PfeifferChristian FröhlichNikita Mattar
1
![Page 2: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/2.jpg)
Organisatorisches
• Tagesablauf:
• Vormittags: Theoretische Grundlagen
• Nachmittags: Bearbeitung der Übungsaufgaben
• 15.30 Uhr: Abschließendes Treffen
2
![Page 3: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/3.jpg)
Organisatorisches
• Übungsaufgaben:
• Pflicht- und Bonusaufgaben
• Bearbeitung erfolgt alleine
• Pflichtaufgaben müssen (bis zum ersten Seminartermin) bearbeitet werden
• Rückmeldung an euren Betreuer vor dem ersten Treffen!
• Bonusaufgaben dienen der Vertiefung der erlangten Kenntnisse
3
![Page 4: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/4.jpg)
Inhalt
• Intro
• Mathematische Grundlagen
• Rendering Pipeline
• Transformationen
• Lighting / Shading
• OpenGL & GLUT
• Szenengraphen
4
![Page 5: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/5.jpg)
Was ist 3D-Computergrafik?
• Repräsentation und Modellierung von 3D-Objekten
• Erstellen von 3D-Szenen mit Beleuchtung
• Rendern von 3D-Szenen
• 3D Computergrafik vs. Virtual Reality
3D CG VR
einfache visuelle DarstellungMultimodale Präsentation
(visuell, akustisch, haptisch
keine Zeitanforderungen Echtzeit!!
statische Szenen oder definierte Animationen
Echtzeit Interaktion und Simulation
2D Interaktion (Maus, Tastatur)3D Interaktion mit speziellen
Eingabegeräten 5
![Page 6: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/6.jpg)
Mathematische Grundlagen
• Skalar:
• reelle Zahl
• Vektor:
• Richtung und Länge
• Punkte:
• Position im Raum
• Matrix:
• m x n Array von Zahlen
6
![Page 7: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/7.jpg)
• Vektoren:
• haben Länge und Richtung aber keine Position!
• Vektoren als Differenz von 2 Punkten: x = p2 - p1
• Länge:
• 3D Vektor: (xx, xy, xz)
Mathematische Grundlagen
p1
p2
p2 - p1
7
![Page 8: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/8.jpg)
Mathematische Grundlagen
• Vektor Operationen:
• skalar ⋅ vektor = vektor
• vektor ⋅ vektor = skalar
• auch Skalarprodukt, inneres Produkt, Punktprodukt
• vektor x vektor = vektor
• auch Kreuzprodukt
8
![Page 9: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/9.jpg)
Mathematische Grundlagen
• Punkte
• Positionen im n-dimensionalen Raum
• 3D-Punkt: p = (px, py, pz)
• Punkt = Punkt + Vektor
p
p + v
v
9
![Page 10: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/10.jpg)
Mathematische Grundlagen
• mögliche Operationen:
• vektor + vektor =
• punkt - punkt =
• punkt + vektor =
• punkt + punkt =
10
![Page 11: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/11.jpg)
Mathematische Grundlagen
• mögliche Operationen:
• vektor + vektor = vektor
• punkt - punkt = vektor
• punkt + vektor = punkt
• punkt + punkt = ???
11
![Page 12: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/12.jpg)
Mathematische Grundlagen
• Matrizen
• Matrizenaddition:
• Skalarmultiplikation:
• Matrizenmultiplikation:
12
![Page 13: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/13.jpg)
Mathematische Grundlagen
• Matrizen
• Identitäts- oder Einheitsmatrixmatrix:
• transponierte Matrix:
• inverse Matrix:
13
![Page 14: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/14.jpg)
Rendering Pipline
Geometrie LightingTransformation
ImageShading
Rasterization ClippingProjektion
![Page 15: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/15.jpg)
Transformationen
• Was ist eine Transformation?
• Rotation
• Skalierung
• Schärung
• Translation
• Warum sind Tranformationen wichtig?
• Ein Objekt in der Welt bewegen
• Beziehungen von Objekten spezifizieren
• ...
15
![Page 16: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/16.jpg)
Transformationen
• Problem:
• Wie können wir Punkte und Vektoren unterscheiden?
• Wie lassen sich alle Transformationen als Matrixoperationen darstellen?
• Lösung: Homogene Koordinaten:
• 3D Transformationen sind als 4x4 Matrizen darstellbar
• Kartesische Koordinaten werden in Homogene Koordinaten umgewandelt:
16
![Page 17: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/17.jpg)
Homogene Koordinaten
• 3D-Darstellungen ab jetzt: (x, y, z, w)
• Punkt: (x,y,z,1)
• Vektor: (x,y,z,0)
17
![Page 18: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/18.jpg)
3D Transformationen
• Transformationen lassen sich als 4x4 Matrizen darstellen:
• Objekt im Ursprung ohne Transformation wird durch Einheitsmatrix repräsentiert
• alle weiteren Transformationen werden mit der Ausgangsmatrix multipliziert
18
![Page 19: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/19.jpg)
3D Transformationen
• Translation
• Verschiebung eines Objekts in eine Bestimmte Richtung
• Objekt ist um tx, ty, tz im Raum verschoben
![Page 20: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/20.jpg)
3D Transformationen
• Rotation (um eine Achse)
• X-Achse:
• Y-Achse:
• Z-Achse:
![Page 21: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/21.jpg)
3D Transformationen
• Skalierung
• Änderung der Größe eines Objekts
• Objekt ist um sx, sy, sz verkleinert/vergrößert
![Page 22: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/22.jpg)
• Tiefenhinweise können nur mit Licht gewonnen werden.
• Beispiel: Grüne Kugel
• besteht aus vielen Dreiecken
• jedes Dreieck wird eingefärbt
• Ergebnis: flacher Kreis
• in der Realität hätte jeder Punkt auf der Kugel einen anderen Grünton
• Lichtquelle
• Materialeigenschaften
• Standort des Betrachters
Lighting
![Page 23: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/23.jpg)
Lighting
• Ambient:
• globale Effekte (Sonne,...)
• gleiche Intensität überall
• Diffuse:
• Beleuchtung durch eine Lichtquelle
• Richtung
• Unabhängig vom Betrachter
• Spekular:
• direkte Lichteinstrahlung
• Reflektion
![Page 24: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/24.jpg)
Lighting
• Berechnung mit dem Phong Beleuchtungsmodell:
• Ia = Intesität des ambienten Lichts
• ka,d,s = Empirisch bestimmter Reflexionsfaktor (Materialkonstante)
• O = Farbe des Objekts (rgb) (d = diffuse, s = spekular)
• Ip = Intesität der einfallenden Lichtquelle
• L = Vektor in die Richtung der Lichtquelle (Einfallsvektor)
• N = Normale des Objekts
• R = Ausfallsvektor
• V = Vektor zu Kamera
![Page 25: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/25.jpg)
Shading
• Schattierungsverfahren (wie wird ein Objekt eingefärbt?)
• Flat Shading
• pro face wird eine Farbe berechnet
• harte Übergänge
• Gouraud Shading (Smooth Shading)
• pro Vertex wird eine Farbe berechnet
• Interpolation zwischen den Farben
• Phong Shading
• Berechnung pro Pixel
• Lineare Interpolation der Normalen
![Page 26: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/26.jpg)
OpenGL
• OpenGL = Open Graphics Library
• Graphics rendering API
• Vorteil:
• Unabhängig bezüglich Betriebssystem, Hardware, Window system
![Page 27: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/27.jpg)
OpenGL
• Verwandte APIs
• AGL, GLX, WGL
• Verbindung von OpenGL und Window system
• GLU (OpenGL Utility Library)
• Teil von OpenGL
• GLUT (OpenGL Utility Toolkit)
• Portable windowing API
• Tastaturein- und -ausgaben
• Würfel, Zylinder, Kugel, Teapot,...
![Page 28: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/28.jpg)
OpenGL
• Konventionen
• Funktionen starten mit gl (glColor( ), ...)
• glu Funktionen sind Utility Funktionen (gluLookAt( ), gluPerspective( ), ...)
• Variablen in CAPS geschrieben (GLUT_RGB,...) sind Konstanten
![Page 29: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/29.jpg)
OpenGL
• Basic OpenGL Template
![Page 30: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/30.jpg)
OpenGL
• OpenGL Primitive
![Page 31: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/31.jpg)
OpenGL
• GLUT Callbacks
![Page 32: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/32.jpg)
OpenGL
• In der Display passiert alles wichtige!!
![Page 33: Workshop: Einführung in die 3D-Computergrafikcfroehli/Workshop_CG.pdf · • inverse Matrix: 13. Rendering Pipline Geometrie Transformation Lighting Shading Image Rasterization](https://reader034.vdocuments.pub/reader034/viewer/2022050717/5e1528f23c05a27b872b934e/html5/thumbnails/33.jpg)
Herzlichen Dank!
• Mehr Informationen findet ihr bei:
• Mario Botsch: graphics.uni-bielefeld.de
• Marc Latoschik: AG WBS (ehemalige Mitarbeiter)
• Uni Osnabrück: http://www-lehre.inf.uos.de/~cg/
• In 15 Minuten treffen auf M4-122