Kernaussagen zu Eingaben/Interaktion, Geometrie und Repräsentation in Computergraphik

9. Input and Interaction

  • Ziele: Grundlagen der Eingabegeräte; physische/logische Geräte; Eingabemodi; ereignisgesteuerte Eingabe; Double Buffering; Programmierung von Eingaben mit WebGL.
  • Projekt-Skizze (Ivan Sutherland, MIT 1963):
    • Benutzer sieht Objekt auf dem Display; Benutzer wählt das Objekt mit einem Eingabegerät; Objekt verändert sich (Bewegung/Rotation/Transformation); Vorgang wiederholen.
  • Graphische Eingabe:
    • Geräte beschrieben durch physikalische Eigenschaften (Maus, Tastatur, Trackball, Grafiktablett, Joystick, Space Ball) oder logische Eigenschaften (was an die API zurückgegeben wird).
    • Modi: Wie und wann Eingaben erhalten werden (Request vs. Event).
  • Physische Geräte: Photodetektor, Threshold-Detektor, Trackball, Maus, Light Pen, Data Tablet, Joystick, Space Ball.
  • Inkrementelle (Relative) Geräte:
    • Data Tablet liefert direkte absolute Position; Maus/Trackball/Joystick liefern inkrementelle Eingaben oder Geschwindigkeiten.
    • Müssen zu einer absoluten Position integriert werden; z.B. Rotation von Zylindern in der Maus; Roll des Trackballs; Erzeugt variable Empfindlichkeit.
  • Logische Geräte:
    • Aus C/C++-Code nicht direkt als Gerät erkennbar; Code liefert logische Eingaben (Zahl), unabhängig vom physischen Gerät.
  • Graphische logische Geräte (PHIGS/GKS): Locator, Pick, Keyboard, Stroke, Valuator, Choice.
  • X Window Input: Client-Server-Modell; Client ist das OpenGL-Programm; Graphics Server besitzt Display, Maus, Tastatur.
  • Eingabemodi:
    • Trigger sendet Information an das OS; Maus liefert Positionswerte; Tastatur ASCII-Codes.
  • Request Mode: Eingaben werden nur beim Trigger geliefert (z.B. Tastatureingaben; Backspace, Edit, Enter).
  • Event Mode: Mehrere Eingabegeräte; Trigger jedes Mal erzeugt ein Event; Ereignisse werden in einer Warteschlange abgelegt.
  • Event-Typen: Window (Fenster-Events), Mouse, Motion, Keyboard, Idle.
  • Callbacks: Callback-Funktionen/Event-Listener für erkannte Ereignisse; Browser-Ereignisschleife; Callback wird bei Eintreten des Ereignisses ausgeführt.
  • Ausführung in einem Browser:
    • URL, Browser, Web-Server, HTML, JS; Dateien werden asynchron geladen; JS-Engine; CPU/GPU; Framebuffer; Canvas.
  • onload-Event: init()-Aufruf sicherstellen; window.onload = init;
  • Rotierendes Quadrat: vier Punkte; Animation durch Neuberechnung mit varying θ; (
    • (-
      sin(θ), cos(θ)) etc.; Werte von θ ändern das Bild.)
  • Besserer Weg: Vertex-Shader verwenden; θ als Uniform; Vertex-Shader berechnet Vertex-Koordinaten; rekursives Rendern.
  • Render-Funktion (Beispiel):
    • extthetaLoc=extgl.getUniformLocation(program,"theta");ext{theta Loc} = ext{gl.getUniformLocation(program, }"theta" );
    • extrender(){ gl.clear(gl.COLOR<em>BUFFER</em>BIT); theta+=0.1; gl.uniform1f(extthetaLoc,exttheta); gl.drawArrays(gl.TRIANGLESTRIP,0,4); render();}ext{render()} \{ \ gl.clear(gl.COLOR<em>BUFFER</em>BIT); \ theta += 0.1; \ gl.uniform1f( ext{thetaLoc}, ext{theta}); \ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); \ render(); \}
  • Vertex-Shader (Beispiel):
    • extattributevec4vPosition; extuniformfloattheta; extvoidmain() extglextPosition.x=−<br/> extsin(heta) vPosition.x+<br/> extcos(heta) vPosition.y; glextPosition.y=<br/> extsin(heta) vPosition.y+<br/> extcos(heta) vPosition.x; glextPosition.z=0.0; glextPosition.w=1.0;ext{attribute vec4 } vPosition; \ ext{uniform float } theta; \ ext{void main()} \ ext{{ gl ext{Position}.x} = -<br /> \, ext{sin}( heta) \, vPosition.x + <br /> \, ext{cos}( heta) \, vPosition.y; \ gl ext{Position}.y = <br /> \, ext{sin}( heta) \, vPosition.y + <br /> \, ext{cos}( heta) \, vPosition.x; \ gl ext{Position}.z = 0.0; \ gl ext{Position}.w = 1.0; }
  • Double Buffering:
    • Rendering erfolgt in einem Back-Puffer; Browser verwendet Double Buffering; Anzeige des Front-Puffers; Puffer-Swap erforderlich.
  • Triggering einer Puffer-Swap:
    • Browser aktualisiert ca. 60 Hz; zwei Optionen: Interval Timer, requestAnimationFrame.
  • Interval Timer:
    • setInterval(extrender,extinterval);setInterval( ext{render}, ext{interval});
  • requestAnimFrame:
    • extfunctionrender() gl.clear(gl.COLOR<em>BUFFER</em>BIT); theta+=0.1; gl.uniform1f(thetaLoc,theta); gl.drawArrays(gl.TRIANGLESTRIP,0,4); requestAnimFrame(render);ext{function render()} \ { gl.clear(gl.COLOR<em>BUFFER</em>BIT); \ theta += 0.1; \ gl.uniform1f(thetaLoc, theta); \ gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); \ requestAnimFrame(render); }

10. Geometry

  • Ziele: Einführung der Geometrie-Elemente; Skalare, Vektoren, Punkte; koordinausen-freie Operationen; Grundprimitiven: Liniensegmente, Polygone.
  • Grundelemente: Geometrie in n-D; drei Basiselemente: Skalare, Vektoren, Punkte.
  • Koordinaten-freie Geometrie: Physikalische Punkte existieren unabhängig von Koordinatensystem; Ergebnisse sollen unabhängig vom System sein; Beispiel: zwei Dreiecke sind identisch, wenn entsprechende Seitenlängen und eingeschlossener Winkel identisch.
  • Skalare: Elemente eines Feldes mit Addition/Multiplikation; Beispiele Real-/Komplexzahlen; allein Skalar hat keine geometrischen Eigenschaften.
  • Vektoren: Größe + Richtung; Beispiele: Kraft, Geschwindigkeit; wichtigste Grafikkonzeption: gerichtete Strecken.
  • Vektor-Operationen: Inverses, Skalar-Multiplikation, Nullvektor, Summe zweier Vektoren; Well-known Head-to-Tail-Axiom.
  • Lineare Vektorräume: Operationen: \ u = α v; u+v; Ausdrücke wie v = u + 2w - 3r.
  • Vektoren haben keine Position; Vektorräume allein reichen nicht für Geometrie.
  • Punkte: Ort in Raum; Operationen zwischen Punkten und Vektoren; Punkt-Punkt-Subtraktion ergibt Vektor; P = v + Q; v = P - Q.
  • Affine Räume: Punkt + Vektorraum; Operationen: Vektor-Vektor-Addition; Skalar-Vektor-Multiplikation; Punkt-Vektor-Addition; 1-Punkt-Operationen: 1 · P = P; 0 · P = 0.
  • Geraden: Punkt-α-Form P(α) = P0 + α d; Richtung d.
  • Parametrische Form: x(α) = α x0 + (1-α) x1; y(α) = α y0 + (1-α) y1; Robust gegenüber anderen Formen.
  • Strahlen und Liniensegmente: α ≥ 0 → Strahl; 0 ≤ α ≤ 1 → Linieabschnitt.
  • Konvexität: Objekt konvex, wenn zwischen jedem Punkt zwei Punkte im Objekt alle Zwischengpunkte liegen.
  • Affine Summen: P = α1 P1 + α2 P2 + … + αn Pn, Σ αi = 1; Falls zusätzlich αi ≥ 0, dann konvexe Hull.
  • Konvexe Hülle: kleinstes konvexes Objekt, das Punkte P1..Pn enthält.
  • Kurven und Flächen: Kurven P(α) (eine Funktion), Flächen P(α, β) (zwei Parameter); lineare Funktionen ergeben Ebenen/Polygone.
  • Ebenen: Eine Ebene definiert durch Punkt und zwei Vektoren oder drei Punkte; P(α,β) = R + αu + βv; oder R + α(Q-R) + β(P-Q).
  • Dreiecke: konvex-Abbildung als affine Summe; P(α,β) = α P1 + β P2 + (1-α-β) P3.
  • Baryzentrische Koordinaten: Punkt in Dreiecksinnerem als affine Summe P = α1 P1 + α2 P2 + α3 P3, mit α1+α2+α3 = 1 und αi ≥ 0.
  • Normalen: Jeder Ebene normaler Vektor n; aus P(α,β) = R + αu + βv folgt n = u × v; (P(α) - P) · n = 0.

11. Representation

  • Ziele: Einführung von Dimension und Basis; Koordinatensysteme zur Repräsentation von Vektorräumen; Frames zur Repräsentation von affinen Räumen; Wechsel von Frames und Basen; homogene Koordinaten.
  • Lineare Unabhängigkeit: α1 v1 + α2 v2 + … + αn vn = 0 ⇒ αi = 0; LI bedeutet, dass kein Vektor durch die anderen dargestellt werden kann.
  • Dimension: Maximale Anzahl LI-Vektoren; in einem n-dimensionalen Raum bilden n LI-Vektoren eine Basis; jedes Vektor v lässt sich eindeutig als v = Σ αi vi darstellen.
  • Representation: Brauchen Bezugssysteme, um Punkte/Objekte zu referenzieren; Weltkoordinaten vs. Kamerakoordinaten.
  • Koordinatensysteme: v = Σ αi vi; Representation a = [α1, α2, …, αn]^T; relationale Darstellung hängt vom gewählten Basis ab.
  • Beispiele: v = 2 v1 + 3 v2 - 4 v3 → a = [2, 3, -4]^T; in WebGL Startbasis vs. Kamera-Basis.
  • Welche Darstellung korrekt? Beide; Vektoren haben keinen festen Ort.
  • Frames: Bezugssystem + Ursprung; Frame definiert durch (P0, v1, v2, v3); Punkt P = P0 + Σ βi vi; Vektor v = Σ αi vi.
  • Verwechslung Punkte vs. Vektoren: P = P0 + Σ βi vi (Punkte) vs. v = Σ αi vi (Vektoren); Vektor kann überall platziert werden.
  • Eine einzige Repräsentation: Homogene Koordinaten; Punkte als [β1 β2 β3 1]^T; Vektoren als [α1 α2 α3 0]^T; P0 als Ursprungsvektoranteil.
  • Homogene Koordinaten: 4D-Repräsentation (x, y, z, w); x' = w x, y' = w y, z' = w z; Rückführung: x = x'/w, y = y'/w, z = z'/w (w ≠ 0); w = 0 entspricht Vektor.
  • Homogene Koordinaten in CG: Schlüssel zu Transformationsabläufen; alle Standardtransformationen (Rotation, Translation, Skalierung) lassen sich mit 4×4 Matrizen implementieren; Hardware-Pipeline arbeitet mit 4D; für Orthographically view kann w=0 (Vektoren) bzw. w=1 (Punkte) beibehalten; für Perspektive erforderliche Perspektiv-Division.
  • Wechsel von Koordinatensystemen: Zwei Repräsentationen desselben Vektors in zwei Basen v1..vn und u1..un; Koeffizienten a = [α1 … αn]^T und b = [β1 … βn]^T; Beziehungen durch Transformationsmatrix.
  • Darstellung zweiter Basis in Bezug auf erste: u1 = γ11 v1 + γ12 v2 + γ13 v3; u2 = γ21 v1 + γ22 v2 + γ23 v3; u3 = γ31 v1 + γ32 v2 + γ33 v3; Matrix M3×3 aus γ-Koeffizienten; a = M^T b (xy-Notation je nach Konvention).
  • Change of Frames in Homogenen Koordinaten: Q0, u1, u2, u3 in Bezug auf P0, v1, v2, v3; 4×4 Matrix γ-Satz; P0, v1, v2, v3 vs Q0, u1, u2, u3.
  • Arbeiten mit Repräsentationen innerhalb zweier Frames: a = [α1 α2 α3 α4]^T; b = [β1 β2 β3 β4]^T; α4 = β4 = 1 für Punkte; α4 = β4 = 0 für Vektoren; Matrix M ist 4×4; a = M^T b.
  • Affine Transformationen: Jede lineare Transformation entspricht einem Frame-Wechsel; affine Transformationen erhalten Geraden; 12 Freiheitsgrade (DOF) im 4×4-Fall, da 4 Elemente festgelegt sind.
  • Welt- und Kameraframes: Weltkoordinatenbasis; Model-View-Transformation (M) verändert die Weltkoordinaten in Kamerakoordinaten; initial M = I.
  • Kamerabewegung: Kamera-Frame wird verschoben/gedreht; Beispielmatrix durch Translation d; 4×4-Matrix mit Translationsteil und Rotations-/Skalenteilen.
  • Nächstes Thema: Transformationen (weiterführend).