Transformations I & II – Ausführliche Notizen (Deutsch)

12. Transformations I

Ziele
- Einführung standardmäßiger Transformationen: Rotation, Translation, Skalierung, Scherung
- Herleitung homogener Koordinaten-Transformationen
- Aufbau beliebiger Transformationsmatrizen aus einfachen Transformationen
- Verstehen, wie Transformationen in Grafik-Pipeline umgesetzt werden (Endpunkte transformieren und Geraden dazwischen zeichnen)
Allgemeine Transformationen
- Eine Transformation ordnet Punkte zu anderen Punkten und Vektoren zu anderen Vektoren zu
- Grafische Relevanz: Abbildung von Endpunkten genügt oft
Affine Transformationen
- Linienerhaltend (line-preserving)
- Charakteristisch für viele physikalisch bedeutsame Transformationen
- Rigide Körper-Transformationen: Rotation, Translation
- Skalierung, Scherung
- In der Grafik wichtig, weil Endpunkte transformiert werden können und daraus Liniensegmente gezeichnet werden können
Pipeline-Implementierung
- Transformation → Rasterizer → Pixel/Frame Buffer
- (Anwendungs-Programm) liefert Vertexdaten; Transformations-Operatoren werden angewendet; Rasterizer zeichnet Raster basierend auf transformierten Endpunkten
Notation
- P, Q, R: Punkte in einem affine Raum (Punktkoordinaten)
- u, v, w: Vektoren in affineem Raum
- α, β, γ: Skalare
- p, q, r: Repräsentationen von Punkten
- Homogene Koordinaten:
- u, v, w: Reprs. von Vektoren
- p̃, q̃, r̃: Punktrepräsentationen als 4-Komponenten-Vektoren
Translation
- Verschiebung eines Punktes um den Vektor d
- Drei Freiheitsgrade
- P′ = P + d, d = [dx, dy, dz]^T
- In homog. Koordinaten:
- p = egin{bmatrix} x \ y \ z \ 1 \end{bmatrix}, \, p' = egin{bmatrix} x' \ y' \ z' \ 1 \end{bmatrix}, \, d = egin{bmatrix} dx \ dy \ dz \ 0 \end{bmatrix}
- Also $x' = x + dx, \ y' = y + dy, \ z' = z + dz$
- Translation ist eine reine Verschiebung; p′ = p + d
Translationsmatrix
- Translation kann auch mittels einer 4×4-Matrix in homogenen Koordinaten durchgeführt werden: $p' = T p$ , wobei
- T = T(dx, dy, dz) = \begin{bmatrix}
  1 & 0 & 0 & dx \
  0 & 1 & 0 & dy \
  0 & 0 & 1 & dz \
  0 & 0 & 0 & 1 \
  \end{bmatrix}
- Praktisch, weil sich alle affinen Transformationen so kombinieren lassen und mehrere Transformationen hintereinander angewendet werden können.
- Hinweis: Die gezeigten Folien enthalten Platzhalter/Sonderzeichen; fundamentale Matrixstruktur bleibt oben wie gegeben.
Rotation (2D)
- Rotation um die Ursprung in der Ebene: $x' = x \cos\theta - y \sin\theta, \; y' = x \sin\theta + y \cos\theta$
- Z-Achsen-Inferenz: Die z-Koordinate bleibt unverändert (3D-Rotation um z-Achse entspricht 2D-Rotation in Ebenen konstanter z-Koordinate)
Rotation um die z-Achse
- In 3D entspricht Rotation um z-Achse einer 2D-Rotation in jeder Ebene konstanter z-Koordinate
- Homogene Koordinaten: p′ = Rz(θ) p, wobei
- R_z(\theta) = \begin{bmatrix}
  \cos\theta & -\sin\theta & 0 & 0 \
  \sin\theta & \cos\theta & 0 & 0 \
  0 & 0 & 1 & 0 \
  0 & 0 & 0 & 1 \
  \end{bmatrix}
Rotation um x- und y-Achse
- Rx(θ) und Ry(θ)
- Rx(θ): \begin{bmatrix}
  1 & 0 & 0 & 0 \
  0 & \cos\theta & -\sin\theta & 0 \
  0 & \sin\theta & \cos\theta & 0 \
  0 & 0 & 0 & 1 \
  \end{bmatrix}
- Ry(θ): \begin{bmatrix}
  \cos\theta & 0 & \sin\theta & 0 \
  0 & 1 & 0 & 0 \
  -\sin\theta & 0 & \cos\theta & 0 \
  0 & 0 & 0 & 1 \
  \end{bmatrix}
Skalierung
- Maßstabsfaktoren sx, sy, sz
- $p' = S p, \quad S = \operatorname{diag}(sx, sy, s_z, 1)$
- Expandieren oder Verkleinern entlang jeder Achse (Fixpunkt Ursprung)
- S(sx, sy, sz) = \begin{bmatrix} sx & 0 & 0 & 0 \
 0 & sy & 0 & 0 \ 0 & 0 & sz & 0 \
 0 & 0 & 0 & 1 \
 \end{bmatrix}
Spiegelung (Reflektion)
- Reflektion entspricht negativen Skalierungsfaktoren (z.B. sx = -1, sy = 1) und führt zu Spiegelungen
Inverse
- Manuelle Inverse oder einfache geometrische Beobachtungen
- Translation: $T^{-1}(dx, dy, dz) = T(-dx, -dy, -dz)$
- Rotation: $R^{-1}(\theta) = R(-\theta)$
- Gilt für jede Rotationsmatrix (cos(-θ) = cos(θ), sin(-θ) = -sin(θ))
- Skalierung: $S^{-1}(sx, sy, sz) = S(1/sx, 1/sy, 1/sz)$
Verkettung (Concatenation)
- Beliebige affine Transformationen können durch Multiplikation von Matrizen konstruiert werden: $M = A B C D$
- Da dieselbe Transformation auf viele Scheitel angewendet wird, ist die Berechnung von M relativ kostengünstig im Vergleich zur Berechnung von M p für viele Punkte p
- Schwieriger Teil: Aus Spezifikationen im Anwendungsfall die gewünschte Transformation konstruieren
Reihenfolge der Transformationen
- Rechts stehende Matrix ist die zuerst angewandte
- Mathematisch: $p' = A B C p = A(B(Cp))$
- Viele Referenzen verwenden Spaltenvektoren; in dieser Notation gilt (als Transpose-Notation): $p'^T = p^T C^T B^T A^T$
Allgemeine Rotation um den Ursprung
- Rotation um eine beliebige Achse kann als Kombination der Achsenrotationen dargestellt werden (Eulerwinkel)
- $R(\theta) = Rz(\thetaz) Ry(\thetay) Rx(\thetax)$
- Die Parameter θx, θy, θ_z werden Euler-Winkel genannt; Rotationen sind nicht kommutativ
Rotation um einen festen Punkt (Fixed Point)
- Vorgehen: Punkt pf verschieben, drehen, dann zurück verschieben
- M = T(pf) R(θ) T(-pf)
Instanzierung
- In der Modellierung: Objekt liegt zentriert am Ursprung, standardisierte Größe; Transformationen anwenden, um Größe, Orientierung, Position zu ändern
- Instanztransformationen: Skalieren, Orientieren, Lokalisieren (Scale, Orient, Locate)
Scherung
- Nützlich, um Flächen gegeneinander zu ziehen
- Beispiel Luftlinien-Verformung entlang x-Achse (x′ = x + y cot θ, y′ = y, z′ = z)
Scher-Matrix (Beispiel, einfache Scherung entlang x)
- H(\theta) = \begin{bmatrix}
  1 & \cot\theta & 0 & 0 \
  0 & 1 & 0 & 0 \
  0 & 0 & 1 & 0 \
  0 & 0 & 0 & 1 \
  \end{bmatrix}
Nächste Sitzung
- Fortführung mit Transformations II

13. Transformations II

Ziele
- Erlernen von Transformationen in WebGL
- Rotation, Translation, Skalierung
- Einführung von MV.js-Transformationen
- Model-View (MV) und Projektion (Proj)
Pre 3.1 OpenGL Matrizen
- Matrizenbestandteile im Statesystem (Model-View, Projection, Texture, Color)
- Funktionen zur Matrizenmanipulation; Matrixmodus durch glMatrixMode(..) steuerbar
Warum Deprecation
- Fixed Function Pipeline wurde durch Shader- basierte Zustände ersetzt
- Model-View und Projection Matrizen werden heute im Shader verwendet; CTM konzeptionell als aktu. Transformationsmatrix im State
Current Transformation Matrix (CTM)
- Theoretisch 4×4 homogene Matrix, die Teil des States ist und allen Vertexdaten durch die Pipeline angewendet wird
- CTM wird im Nutzerprogramm definiert und in eine Transformationseinheit geladen
CTM-Operationen
- Optionen: Matrix laden oder post-multiplizieren
- Beispiel-Operationen:
- $C \leftarrow I$ (Identität)
- $C \leftarrow M$
- $C \leftarrow T$
- $C \leftarrow R$
- $C \leftarrow S$
- $C \leftarrow C M$ (Postmultiplikation)
- $C \leftarrow C T$ , $C \leftarrow C R$ , $C \leftarrow C S$
Rotation um festen Punkt (CTM-Ansatz)
- Start mit $C \leftarrow I$
- Bewegung des festen Punkt zu Ursprung: $C \leftarrow C T^{-1}$
- Rotation: $C \leftarrow C R$
- Bewegung des festen Punkt zurück: $C \leftarrow C T$
- Ergebnis: $C = T(pf) R T^{-1}(pf)$ (Wichtig: aufgrund von Postmultiplikationen erscheint eine scheinbar gegenläufige Reihenfolge)
Reihenfolge korrigieren
- Um die korrekte Reihenfolge zu erreichen: $C = T(-pf) R T(pf)$ oder durch Schrittreihenfolge in Programm:
- Start: $C \leftarrow I$
- $C \leftarrow C T^{-1}$
- $C \leftarrow C R$
- $C \leftarrow C T$
- Die letzte Operation im Programm ist die zuerst ausgeführte
CTM in WebGL
- OpenGL hatte Model-View und Projection Matrizen; CTM entsteht durch deren Verkettung
- In WebGL ist dieses Konzept separat: CTM wird in der Anwendung modelliert und in Shaders verwendet
Nutzung der ModelView-Matrix
- Modellier- und Kamerapositionierung durch MV (LookAt-Funktion in MV.js ist hilfreich)
- Projektion dient der View-Volume und Kamera-Linse
- Obwohl CTM nicht mehr im OpenGL-Staat vorhanden ist, ist es sinnvoll, sie in eigener Anwendung zu erstellen
Rotationen, Translation, Skalierung (Code-Beispiele)
- In JavaScript mit MV.js:
- $var m = mat4();$
- $var r = rotate(theta, vx, vy, vz); m = mult(m, r);$
- var s = scale(sx, sy, sz);\nvar t = translate(dx, dy, dz); m = mult(s, t);
Beispiel: Rotation um z-Achse 30° mit fester Punkt (1.0, 2.0, 3.0)
- $var m = mult(translate(1.0, 2.0, 3.0), rotate(30.0, 0.0, 0.0, 1.0));$
- $m = mult(m, translate(-1.0, -2.0, -3.0));$
- Hinweis: Die zuletzt im Programm angegebene Matrix wird zuerst angewendet
Beliebige Matrizen
- Man kann Matrizen definieren und in Programme laden; MV.js speichert Matrizen als eindimensionales Array aus 16 Elementen
- OpenGL erwartet Spaltenmajor-Daten; Function gl.uniformMatrix4f kann eine Transponierung automatisch durchführen, falls needed
- Flatten-Funktion konvertiert in Spaltenmajor-Reihenfolge
Matrizen-Stapel
- Zum Speichern von Transformationsmatriken für spätere Verwendung, z. B. bei hierarchischen Strukturen
- In Pre-3.1 OpenGL gab es Stacks; in JS eigene Implementierung mittels Array-Stack
Verwendung von Transformationen
- Beispiel: Würfel rotiert; Interaktion via Maus/Tasten, um Rotationsrichtung zu ändern
- Standard-Szenario: Würfel zentriert am Ursprung, Seitenachsen ausgerichtet
WebGL-Beispiele
- WebGL-Beispiele und Lehrmaterial verweisen auf interaktive Beispiele (Links in Folien)
Anwendung der Transformationen – Vertex Shader vs CPU
- Identische Transformationslogik kann im Vertex Shader (durch Uniform-Variablen) oder auf CPU-Seite erfolgen
- Trigonometrierechnungen können entweder pro Vertex oder einmal berechnet werden; Grafikkarten führen trigonometrische Operationen effizienter aus
Rotation-Event-Listener (Beispielcode)
- JavaScript-Event-Handler setzen Axis (x, y, z) und aktualisieren Winkel theta; Shaderq-Parameter wird aktualisiert; Render-Schleife zeichnet neue Szene
Rotation im Shader
- Vertex-Shader-Beispiel (Auszüge)
- Uniform vec3 theta; // Rotationen um x, y, z
- Berechnung der Rotationsmatrizen rx, ry, rz
- Beispiel-Matrixdarstellungen (Spaltenmajor-Notation):
- RX, RY, RZ werden erzeugt und gl_Position = RZ * RY * RX * vPosition gesetzt
Glatte Rotation
- Ziel: fließende Orientierung einer Rotation über Zeit
- Ansatz: Weg über Great Circle auf einer Sphäre; Axis-Angle-Ansatz; Virtual Trackball
Inkrementelle Rotation
- Zwei Ansätze: (1) Euler-Winkel-Rotation Ri = Rzi Ryi Rx_i; (2) Endpositionen nutzen, Achse und Winkel bestimmen und nur den Winkel inkrementieren
- Quaternions können effizienter sein
Quaternionen
- Erweiterung komplexer Zahlen auf 4D: q = q0 + q1 i + q2 j + q3 k
- Rotationen auf der Sphäre: Quaternionen ermöglichen sanfte und effiziente Rotationen
- Prozess: Modell-View-Matrix → Quaternion; Operationen mit Quaternions; Quaternionen → Modell-View-Matrix
Schnittstellen (Interfaces)
- Problem: Bedienung dreidimensionaler Objekte mit zweidimensionalen Eingabegeräten (Maus)
- Optionen zur Interaktion:
- Virtueller Trackball
- 3D-Eingabegeräte (Spaceball)
- Bildschirmbereiche als Steuerungselemente
- Abhängigkeit von Abstand von Zentrum, Achsen und Maustasten
Nächste Zeit: Building Models
Hinweis zu den Formeln in dieser Notiz:
- Alle wesentlichen Gleichungen wurden in LaTeX-Form eingefügt.
- Bei mehrzeiligen Matrizen sind die relevanten Transponationen und Spaltenmajor-/Zeilenmajor-Überlegungen implizit berücksichtigt; konkrete Implementierungen können je nach Bibliothek leicht variieren.