Interaktive Computergraphik – Konzepte, Geräte, Realisierung in Open GL

1. Interaktive Computergraphik – Konzepte, Geräte, Realisierung in Open GL

2. 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

3. 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 CAD-System (Einfügen bzw. Anpassen einer Bohrung) B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

4. 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

5. 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

6. Eingabegeräte • Logische Eingabegeräte: stellen eine Highlevel-Schnittstelle 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 physi-kalische Signale in die Parameter logischer Eingabegeräte um. B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

7. 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

8. 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

9. Eingabegeräte Direkte und Indirekte Selektion: • Direkte Selektion durch Berührung der entsprechen-den 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 Informations-systeme, Datentablett für Konstruktion). B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

10. Eingabegeräte Verarbeitung von Eingaben mit einem Zeigegerät Möglichkeiten, Koordinaten in unterschiedlichen Dimen-sionen anzugeben (z.B. metrische Einheiten und Pixel) B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

11. Eingabegeräte Beispiele für Zeigegeräte Maus Graphiktablett Trackball Joystick SpaceMouse Quelle: Angel (2000) B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

12. 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

13. Eingabemodi • Unterscheiden, wann das Maß, das ein logisches Eingabegerät registriert, an das Anwendungs-programm (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äti-gung 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

14. Eingabemodi • Request und Sample-Mode sind für die zentrale Steuerung eines Programmes, bei dem die Inter-aktion 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 Quelle: Angel (2000) B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

15. 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 spezi-fiziert 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

16. 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

17. 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

18. 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: • Neuzeichnen aller zuvor sichtbaren Objekte? • Verhalten bei ungleichmäßiger Skalierung? • Werden Attribute für neue Primitive verändert? B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

19. 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

20. 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

21. 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

22. Menüeingabe Was muss man tun? • Menü erzeugen: glutCreateMenu (testMenu); • Menüeinträge festlegen: glutAddMenuEntry („Ende“, 1); • Untermenüs festlegen: 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

23. Graphische Interaktionstechniken: Picking • Interaktionsaufgabe: Selektion von Objekten (Graphikprimitiv, z.B. Polygon) • Zuordnung einer Position p zu einem Objekt o. • Probleme: • Selektion von sehr dünnen Objekten (Linien, Text) Lösungsansatz: Definition größerer maussensitiver Bereiche • 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

24. Graphische Interaktionstechniken: Picking Definition eines maussensitiven Bereiches um eine Linie Hierarchisches Picking B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

25. 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 zusam-mengefasst 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

26. Graphische Interaktionstechniken: Picking Picking: Mehrfachselektion in einer hierarchischen Struktur (hier ein Gefäßbaum, sog. Lassoselektion) B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

27. 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

28. 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

29. 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 Display-Liste 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

30. Display-Listen Display-Listen • werden erzeugt (Beginn und Ende) glNewList, glEndList • haben eine eindeutige Nummer • werden aktiviert glCallList • Können in Feldern angeordnet werden 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

31. 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(); glPopMatrix(); B. Preim AG Visualisierung Interaktive Computergraphik in Open GL

32. 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 (Double-buffering). Erst wenn das Zeichnen im Back-Buffer abgeschlossen ist, wird der Buffer komplett in den Front-Buffer 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

33. 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 Popup-Menüs • Display-Listen und Buffer B. Preim AG Visualisierung Interaktive Computergraphik in Open GL