Interaktive Computergraphik –
Konzepte, Geräte, Realisierung in Open GL
Gliederung
• Eingabegeräte
–
–
•
•
•
•
logische und physische Eingabegeräte
Eingabemodi
Verarbeitung von Eingaben
Ereignisorientierte Verarbeitung
Menüeingabe
Graphische Interaktionstechniken
–
Picking, Rubberbanding
• Display Listen
• Buffering
• Zusammenfassung
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
2
Einführung
Szenario:
• Graphische Darstellung (2D/3D)
• Benutzer selektiert oder „überfährt“ Teile der
Darstellung und löst Aktionen aus → graphische
Darstellung ändert sich entsprechend.
Beispiele:
• Zoomen in eine Darstellung geographischer Daten
• Einblenden von passendem Text zu aktuellem Teil der
Graphik
• Standpunkt ändern in einem virtuellen Museum
• Verändern eines geometrischen Modells in einem CADSystem (Einfügen bzw. Anpassen einer Bohrung)
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
3
Einführung
• Verarbeitung von Benutzereingaben hängt stark von
Fenster- und Betriebssystem ab.
• Betrachten nur elementare Möglichkeiten, die praktisch
auf allen Plattformen verfügbar sind.
• Beispiele:
– Verarbeitung von Maus- und Tastatureingaben
– Spezifikation und Nutzung von Popup-Menüs
• Diese sind Bestandteil der OpenGL Utilities.
• Bisher:
– glutCreateWindow ();
//Erzeugen eines Fensters
– glutInitWindow (windowSize, windowPosition);
– glutMainLoop();
// Ereignisschleife
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
4
Eingabegeräte
Eingabegeräte sind sehr unterschiedlich in ihrer
genauen Funktionsweise, in ihren physikalischen
Parametern und den Werten, die sie liefern.
Beispiele:
• Tastaturen mit unterschiedlichen Layouts
• Optische Mäuse, elektrische Mäuse, Joystick, Trackball, Pen
Problem: Entwicklung von Software, die eine große
Bandbreite physikalischer Eingabegeräte behandeln
kann. Entstehender Code wäre sehr komplex und
hardwareabhängig.
Unterscheidung zwischen logischen und physischen
Eingabegeräten.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
5
Eingabegeräte
• Logische Eingabegeräte: stellen eine HighlevelSchnittstelle zur Verfügung.
• Keyboard:
liefert eine vom Benutzer spezifizierte
Taste (ASCII-Code) sowie evtl.
zusätzlich betätigte Tasten und den
Zeitpunkt der Eingabe.
• Locator:
Eingabe einer Position auf dem
Bildschirm sowie betätigte
Maustaste und den Zeitpunkt
• Umsetzung der hardwarespezifischen Besonderheiten
durch entsprechende Treiber. Diese wandeln physikalische Signale in die Parameter logischer
Eingabegeräte um.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
6
Eingabegeräte
• Funktion eines Locators: Selektion von Positionen (Pixel)
oder Selektion von Objekten („Umrechnung“ von Pixeln in
Objekte.)
• Trigger:
Drücken oder Loslassen von Maustasten
• Physische Realisierung:
– Maus, Trackball, Lightpen, Joystick, Touchscreen
• Keyboard: Eingabe von Zeichenketten (Text, Passwort)
• Trigger:
Entertaste
• Physische Realisierung: Physische Tastatur oder auf
dem Bildschirm eingeblendete Tastatur für die Selektion
mit einem Locator (PDAs)
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
7
Eingabegeräte
Klassifikation von Locator-Eingaben:
Relative und absolute Positionierung.
Absolut:
Position des Locators wird eindeutig auf eine
Cursorposition abgebildet.
Relativ:
Position und Bewegung des Locators wird flexibel auf
eine Cursorposition abgebildet. Abbildung wird durch
Control/Display-Ratio bestimmt (C/D-Wert).
Variante: C/D-Wert wird bei schneller Bewegung erhöht und
bei langsamer Bewegung verringert (z.B. um eine genaue
Platzierung zu unterstützen).
Absolute Positionierung:
Datentablett,
Konstruktionszeichnungen
Relative Positionierung:
Maus, Trackball, etc.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
8
Eingabegeräte
Direkte und Indirekte Selektion:
• Direkte Selektion durch Berührung der entsprechenden Bildschirmbereiche. Bei direkter Selektion ist die
Positionierung absolut.
• Beispiele: Touchscreen, Pen
• Indirekte Selektion durch Bewegung eines Gerätes
außerhalb des Bildschirmes. Positionierung kann
absolut oder relativ sein.
Zeigegeräte unterscheiden sich darin, wie intuitiv sie
sind (direktes Zeigen ist intuitiv) und wie genau
positioniert werden kann. → Daraus ergeben sich
Anwendungsgebiete (Touchscreen für Informationssysteme, Datentablett für Konstruktion).
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
9
Eingabegeräte
Verarbeitung von Eingaben mit einem Zeigegerät
Möglichkeiten, Koordinaten in unterschiedlichen Dimensionen anzugeben (z.B. metrische Einheiten und Pixel)
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
10
Eingabegeräte
Beispiele für Zeigegeräte
Maus
Graphiktablett
Quelle: Angel (2000)
Trackball
B. Preim
Joystick
AG Visualisierung
SpaceMouse
Interaktive Computergraphik in Open GL
11
Eingabegeräte
Joystick:
• Vorbild: reale Steuerungsgeräte
• Oft bei Spielen benutzt, z.B. zur
Geschwindigkeitssteuerung in virtuellen Welten.
• Kann mit taktiler Rückkopplung kombiniert werden
(Federn und Dämpfer), z.B. um größeren Widerstand
oder Kollisionen zu signalisieren.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
12
Eingabemodi
• Unterscheiden, wann das Maß, das ein logisches
Eingabegerät registriert, an das Anwendungsprogramm (AP) weitergeleitet wird.
• Nach Initialisierung wird jede Eingabe (Betätigung
einer Taste bzw. Bewegung mit einem Eingabegerät)
in einem Puffer registriert.
• Im sample-mode wird der Puffer kontinuierlich
gelesen und an das AP weitergeleitet. Problem: viel
Zeit wird für die kontinuierliche Abfrage benötigt.
• Im request-mode wird der Puffer erst nach Betätigung eines Triggers an das AP weitergeleitet.
In beiden Modi wird Eingabegerät über eine Id
identifiziert und vom Programm angesteuert.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
13
Eingabemodi
• Request und Sample-Mode sind für die zentrale
Steuerung eines Programmes, bei dem die Interaktion systemgesteuert abläuft (System erwartet
Eingaben in definierter Reihenfolge).
• Für die dezentrale Programmsteuerung, bei der die
Interaktion vom Benutzer gesteuert wird, dient der
event-mode.
• Sample-Mode
• Request-Mode
• Event-Mode
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
Quelle: Angel (2000)
14
Eingabemodi
• Event-Mode: Eingabegeräte werden getriggert und
Eingaben in eine (Warte)schlange eingeordnet. AP
enthält Eventhandler, die eine Reaktion auf das
Ereignis spezifizieren. Wenn keine Reaktion spezifiziert ist → Standardverhalten (z.B. Rückkopplung
bei Texteingabe).
• Abarbeitung der Warteschlange entweder nach
Ereigniszeit (First In First Out) oder modifiziert durch
Prioritäten.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
15
Ereignisorientierte Verarbeitung
• Häufigster und auch in Open GL unterstützter Modus:
• Mouse events:
– MoveEvent
Ereignis wird bei jeder Bewegung generiert, z.B. für das
Zeichnen.
– MouseEvent (oft auch Button-Down-Event)
Wird beim Drücken (oder beim Drücken und schnellen
Loslassen) eines Buttons generiert, z.B. zum Setzen von
Punkten eines Polygons
• Window events:
– Reshape Event (oft auch Resize-Event). Fenster wird skaliert.
– Expose-Event. Fenster wird sichtbar (z.B. bei Initialisierung, bei
Vergrößerung eines iconifizierten Fensters).
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
16
Ereignisorientierte Verarbeitung
Mouse events
Angabe, welche Funktion auf Mouse events reagiert.
glutMouseFunc (mouse_callback);
Mouse_Callback hat die Form
void mouse_callback (int button, int state, int x, int y)
Beispiel:
void mouse (int btn, int state, int x, int y)
{
if (btn == GLUT_LEFT_BUTTON && state == GLUT_DOWN)
setPoint (x,y);
if (btn == GLUT_MIDDLE_BUTTON && state == GLUT_DOWN)
exit();
}
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
17
Ereignisorientierte Verarbeitung
Window Events:
Angabe, welche Funktion auf eine Skalierung reagiert.
glutReshapeFunc (reshape_callback);
Reshape_Callback hat die Form
void reshape_callback (GLsizei w, GLsizei h)
Reshape Event, Überlegungen:
1. Neuzeichnen aller zuvor sichtbaren Objekte?
2. Verhalten bei ungleichmäßiger Skalierung?
3. Werden Attribute für neue Primitive verändert?
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
18
Ereignisorientierte Verarbeitung
Beispiel für eine Reaktion auf eine Skalierung
void reshapeFct (GLsizei w, GLsizei h)
{
// Clipping Box anpassen
glMatrixMode (GL_Projection); glLoadIdentity();
gluOrtho2D ( 0.0, (GLdouble) w, 0.0, (GLdouble) h );
glMatrixMode (GL_ModelVIEW); glLoadIdentity();
// Viewport anpassen
glViewport (0,0, w, h);
glClearColor (0.0, 0.0, 0.0, 0.0);
glClear (GL_COLOR_BUFFER_BIT);
glFlush ();
}
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
19
Ereignisorientierte Verarbeitung
• Tastaturereignisse:
Spezifikation der Callbackfunktion
glutKeyboardFunc (keyboard);
void keyboard (unsigned char key, int x, int y)
{
if (key == ´q´ || key == ´Q´)
exit ();
}
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
20
Menüeingabe
Menüs ermöglichen hierarchisch sortierte Präsentation von
Kommandos.
Vorteile gegenüber Kommandosprachen:
keine Schreibfehler, geringer Lernaufwand.
In OpenGL: Popup-Menüs, die an aktueller Cursorposition
erscheinen. Diese können kontextabhängig sein (Inhalt wird
angepasst an selektierten Bereich/selektiertes Objekt)
Was muss man tun?
• Menü erzeugen,
• Menüeinträge festlegen,
• Untermenüs festlegen,
• Festlegen, wann das Menü aktiviert wird
• Festlegen, welche Funktionen auf Betätigung der Menüeinträge
reagieren
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
21
Menüeingabe
Was muss man tun?
• Menü erzeugen:
• Menüeinträge festlegen:
• Untermenüs festlegen:
glutCreateMenu (testMenu);
glutAddMenuEntry („Ende“, 1);
glutAddSubmenu („Skalieren“,
submenu);
• Festlegen, wann das Menü aktiviert wird
glutAttachMenu (GLUT_RIGHT_BUTTON);
• Funktionen erstellen, die auf Betätigung der Menüeinträge reagieren:
void testMenu (int id)
{
switch (id) {
case 1: exit (); break;
case 2: … }
}
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
22
Graphische Interaktionstechniken: Picking
•
•
•
Interaktionsaufgabe: Selektion von Objekten
(Graphikprimitiv, z.B. Polygon)
Zuordnung einer Position p zu einem Objekt o.
Probleme:
1. Selektion von sehr dünnen Objekten (Linien, Text)
Lösungsansatz: Definition größerer maussensitiver Bereiche
2. Mehrdeutigkeiten bei Überlappung von Objekten
Lösungsansatz: Selektiere das kleinste Objekt, das p enthält.
3. Effizienz:
Lösungsansatz: Nutzung hierarchischer Hüllkörper h(o) ,z.B.
Kreise/Kugeln bzw. Rechtecke/Quader. Wenn p nicht zu h(o)
gehört, gehört p (erst recht nicht) zu o.
h(o) so wählen, dass h(o) und Zugehörigkeit von p zu h(o)
schnell bestimmt werden können.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
23
Graphische Interaktionstechniken: Picking
Definition eines maussensitiven Bereiches um eine Linie
Hierarchisches Picking
R11
T1
R12
T2
R13
T3
R14
T4
R1
P1
...
P5
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
24
Graphische Interaktionstechniken: Picking
Anwendung in einem Malprogramm:
• Selektion von Linien bzw. Objekträndern, um
Linienstile zu ändern
• Selektion von flächenhaften Polygonen, um Muster
und Füllstile zuzuordnen
• Selektion von Objekten, die zu einer Gruppe zusammengefasst und einheitlich behandelt werden sollen.
• Selektion eines Objektes, das {kopiert/gelöscht/
skaliert/rotiert} werden soll.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
25
Graphische Interaktionstechniken: Picking
Picking: Mehrfachselektion in einer hierarchischen
Struktur (hier ein Gefäßbaum, sog. Lassoselektion)
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
26
Graphische Interaktionstechniken:
Rubbberbanding
• Interaktionstechnik zur Erstellung einfacher
Graphikprimitive, z.B. Linien, Rechtecke, Ellipsen
Idee:
• Benutzer spezifiziert Objekttyp und einen ersten Punkt
(Anfangspunkt der Linie, untere linke Ecke eines Rechteckes)
• Mit gedrückter Maustaste wird die Maus bewegt, wobei
veranschaulicht wird, wie das Graphikprimitiv beim Loslassen
der Maustaste aussehen würde.
• Beim Loslassen wird das Primitiv erstellt.
• Wirkt wie ein an einer Stelle fixiertes elastisches Gummiband.
Motivation: Form und Größe der auf diese Weise
erstellten Polygone müssen seltener geändert
werden.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
27
Graphische Interaktionstechniken:
Rubberbanding
Probleme/Aufgaben:
• Graphik muss in jedem Schritt
neugezeichnet werden.
• Zuletzt gezeichnete Graphik muss
gelöscht werden.
• „Flackern“ vermeiden.
Quelle: Angel (2000)
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
28
Display-Listen
Modi der Graphikdarstellung:
Immediate-Mode: Jedes Kommando, das die Graphik
betrifft (z.B. Hinzufügen eines Polygons, Spezifikation
einer Transformationsmatrix) wird sofort ausgeführt.
Problem: Keine Informationen über die Szene sind
gespeichert.
Retained-Mode: Die spezifizierte Szene wird in einer
Display-Liste gespeichert. Beim Neuzeichnen der Szene
(z.B. nach einem Resize-Event) wird einfach die DisplayListe aufgerufen. Besonders nützlich für vordefinierte,
mehrfach verwendete Teile einer Graphik (Font, Icon)
Nachteile: zusätzlicher Overhead und Speicherbedarf.
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
29
Display-Listen
Display-Listen
•
•
•
•
werden erzeugt (Beginn und Ende)
haben eine eindeutige Nummer
werden aktiviert
Können in Feldern angeordnet werden
glNewList, glEndList
glCallList
glGenLists (number)
Beispiel:
#define Rechteck 1
// Liste wird definiert, aber nicht ausgeführt
// Alternative: GL_COMPILE_AND_EXCEUTE (sofortiges Ausführen)
glNewList (Rechteck, GL_COMPILE) glBegin (GL_POLYGON);
glVertex2f(-1.0, -1.0);
glVertex2f(1.0, -1.0);
glVertex2f(1.0, 1.0);
glVertex2f(-1.0, 1.0);
glEnd();
glEndList ();
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
30
Display-Listen
Problem:
Aufruf der Display-Liste kann nachfolgende
Zeichenoperationen/Transformationen (unerwartet)
beeinflussen.
Daher ist folgendes üblich und empfehlenswert:
Anfang: Speichern der Attribute und Transformation auf dem Stack
glPushAttrib (GL_ALL_ATTRIB_BITS); glPushMatrix();
Ende: Wiederherstellen der Attribute und Transformation
glPopAttrib();
B. Preim
AG Visualisierung
glPopMatrix();
Interaktive Computergraphik in Open GL
31
Buffer
• Inhalt des Bildschirms wird im Framebuffer gespeichert.
• Bei interaktiven Programmen ist häufig ein erneutes
Darstellen des Bildschirminhaltes nötig (z.B. beim
Rubberbanding).
• Daher: Zeichnen erfolgt in einen zweiten Buffer (Doublebuffering). Erst wenn das Zeichnen im Back-Buffer
abgeschlossen ist, wird der Buffer komplett in den FrontBuffer kopiert und damit gezeichnet.
• Doublebuffering einschalten:
glutInitDisplayMode (GLUT_RGB| GLUT_DOUBLE);
• Zweiten Buffer in den ersten kopieren:
glutSwapBuffers();
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
32
Zusammenfassung
• Eingabegeräte mit Fokus auf Zeigegeräten
• Logische Eingabegeräte abstrahieren von
physikalischen Details.
• Eingabemodi mit Fokus auf ereignisorientierter
Verarbeitung
• Menüeingabe; Erstellung und Nutzung von PopupMenüs
• Display-Listen und Buffer
B. Preim
AG Visualisierung
Interaktive Computergraphik in Open GL
33

Eingabegeräte