WebGL - 3D im Browser
|
|
Home WebGL Api Spickzettel WebGL Sicherheit Tutorial 0 : WebGL Browser 1 : Das erste Dreieck 2 : 3D-Mathematik 3 : Farbe 4 : Animation 5 : Interaktion I 6 : Texturen 7 : Beleuchtung I 8 : Interaktion II Links WebGL Beispiele WebGL Frameworks ext. WebGL Tutorials Kontakt / Impressum webgl ([ät)] peter-strohm Punkt de |
5 Interaktion I>>>> Direkt zum Beispiel <<<<5.1 Was bedeutet Interaktion?Alles was wir mit WebGL in den vorangegangenen Kapiteln angestellt haben, hatte eines gemeinsam: der Anwender konnte sich zwar an der Darstellung erfreuen, aber ansonsten keinen Einfluss darauf nehmen. Im Prinzip sind bunte rotierende Dreiecke seit den Zeiten von animierten gifs möglich und noch lange nicht die Revolution von WebGL.Tutor In diesem Kapitel werden wir dem Anwender ermöglichen, die Darstellung der 3D-Szene zu beeinflussen. Ich habe es Interaktion I genannt, weil wir in diesem Kapitel nur mit der Ansicht der 3D-Szene interagieren werden. D.h. der Benutzer kann mit Maus und Tastatur die 3D-Szene in ihrer Darstellung drehen oder Verschieben. Dies ist ein großer Fortschritt im Vergleich zu rein passiven Darstellungen, allerdings wird es noch viel spannender, wenn wir in Interaktion II nicht nur mit der Ansicht, sondern mit den 3D-Objekten interagieren.Nebenbei werde ich aus dem bisher verwendeten flachen Dreieck auch eine "echt 3dimensionale" Pyramide machen. Dieser Schritt bedeutet eigentlich nur, dass zwei weitere Raumpunkte hinzugefügt werden und statt einem nun 4 Dreiecke (4 Seitenflächen) verwendet werden und war mir deshalb kein eigenes Kapitel wert. Hier kannst du dir das WebGL-Beispiel anschauen. Wie immer ist der Quellcode kommentiert.  Bild 5.1 : Die bewegbare Pyramide Das Beispiel erinnert schon an bisschen an neumodische Produktpräsentationen, wie sie bereits mit Hilfe von Flash oder Java3D auf manchen Internetseiten zu sehen sind. Die Pyramide ist zwar schwer mit einer neuen Digitalkamera oder einem Automodell zu verwechseln, aber bis auf ein paar (texturierte) Dreiecke mehr oder weniger ist es die gleiche Applikation. Da ich auf Rotation und Translation in den vorangegangenen Kapiteln bereits eingegangen bin, müssen wir uns hier nur noch mit den Benutzereingaben (Maus, Tastatur) und deren Verarbeitung beschäftigen. Im Vergleich zum letzten Kapitel (Animation) besteht der wesentliche Unterschied darin, WOMIT die Modelview-Matrix erstellt wird. Im Animationskapitel wurde sie kontinuierlich mit der Zeit (bzw. mit jedem neuen Bild) verändert. Jetzt interessiert uns die Zeit nicht, sondern nur, was der Anwender macht (Mausbewegungen, Tastdruck...). Vieles davon ist nicht WebGL-spezifisch, sondern JavaScript wie es leibt und lebt. 5.2 NavigationsmodiNur um Verwirrung auszuschließen: wenn ich hier von Navigation schreibe geht es nicht um Routenplanung wie TomTom, Garmin und Co. sie betreiben, sondern vielmehr um Arten der virtuellen Fortbewegung.Wir werden hier die Navigationsart Examine (untersuchen) in das WebGL-Beispiel einbauen. Hier möchte ich kurz eine Übersicht geben, welche Navigationsarten sonst noch üblich sind:
Welcher Navigationsmodus der richtige ist, hängt von der jeweiligen Anwendung ab. Es gibt in der Literatur noch ein paar Varianten der aufgelisteten Bewegungsarten: Pan(verschieben der Kamera parallel zur Bildebene) "Game-Like" (Walk-Modus, mit typischer w-a-s-d Tastaturbelegung) u.A.... 5.3 JavaScript Benutzereingaben (Events)Schauen wir endlich mal wieder in den Quellcode des Beispiels:Zeile 147
Hier werden die für uns interessanten Benutzereingaben "Maustaste-gedrückt" (mousedown), "Maustaste-losgelassen" (mouseup), "Maus bewegt", "Mausrad gedreht" (mousewheel) und "Tastatur-Taste gedrückt" (keydown) jeweils mit einer Funktion verknüpft. Es wird der JavaScript-Engine mitgeteilt, welche (lokale) Funktion ausgeführt werden soll, wenn das jeweilige Ereignis auftritt. Diese Funktionsnamen ("mouseDown") sind frei wählbar und alle in der Beispieldatei kapitel5.html selbst implementiert. Mausrad und Tastatur benötigen statt der einfachen Zuweisung die Installation eines Event-Listeners, das Ergebnis ist aber das gleiche. Warum und in welchen Versionen Istgleich-Zuweisungen oder EventListener verwendet werden müssen, überlasse ich der JavaScript-Literatur...Ich entwickele wie immer mit Minefield 3.7. Was soll nun passieren wenn diese Events eintreten? Der einfachste Fall ist das Mausrad: Wenn es einen Schritt vor gerollt wird, soll die Pyramide sich einen Schritt entfernen; wenn es zurück gerollt wird, soll die Pyramide näher kommen. In WebGL-ausgedrückt heißt das: "der Translationswert in Z-Richtung in der Modelview-Matrix soll sich vergrößern bzw. verkleinern". Und im Quellcode:
Die globale Variable g_fZZoomlevel finden wir in der Funktion drawSzene in Zeile 132 wieder: Dort wird sie in Form einer temporären Translationsmatrix in die Modelview-Matrix hineinmultipliziert. Die Zahlenwerte +/-0.3 sind natürlich frei gewählt und bestimmen die Schrittweite, die die Pyramide bei einem Schritt des Mausrades zurücklegt. In der letzten Zeile von mouseWheel wird die Funktion drawSzene() aufgerufen um die Neuberechnung der 3D-Ansicht zu veranlassen und auf den Schirm zu bringen. Etwas komplexer wird es bei den Events mouseDown, mouseUp und mouseMove. Wie du sicher schon ausprobiert hast, dreht sich die Pyramide nur, wenn die Maus bewegt wird während gleichzeitig eine Taste gedrückt gehalten wird (JavaScript unterscheidet nicht zwischen linker, rechter oder sonstiger Maustaste). Der Reihe nach im Programmablauf: Zuerst wird die Maustaste heruntergedrückt (und gehalten!):
Mit SetInterval wird veranlasst, dass ab sofort alle 40 Millisekunden die 3D-Szene neu gezeichnet wird. Vorher wurde die Szene nur bei ersten Laden und beim Rollen des Mausrades berechnet und gezeichnet. Die Funktion mouseMove wird in diesem Beispiel IMMER aufgerufen, wenn sich der Mauszeiger über die Canvas bewegt. Und zwar bei jedem Wechsel des Mauszeigers von einem Pixel zum nächsten. Bei einer Bewegung des Cursors von links nach rechts über die komplette Fläche wird mouseMove also 500(!) mal aufgerufen.
Wie du siehst, wird hier die globale Variable g_bMousdown, die wir in der Funktion mouseDown auf true gesetzt haben verwendet. Nur wenn die Maustaste gedrückt ist, werden die neuen Rotationswinkel um X und Y berechnet. Andernfalls wird nur die Position des Mauszeigers gespeichert. Beachte das drawSzene() NICHT explizit aufgerufen wird. Stattdessen haben wir ja das 40-Sekunden-Interval, das wir in mouseDown gestartet haben. Der Grund für dieses Konstrukt ist, dass mouseMove bei schnellen Mausbewegungen SEHR häufig aufgerufen wird und so häufige Neuzeichnen nur unnötige Prozessorlast verursachen würde. Die beiden in mouseMove veränderten Rotationswinkel fließen in drawSzene in die Modelview-Matrix ein (Zeilen 135- 138). Wenn du bis hierhin alles verstanden hast, sollte die Funktion mouseUp keine Überaschungen für dich bringen:
Durch das Rücksetzen von g_bMousedown auf false wir bei folgenden MouseMove-Events keine Rotationswinkeländerung berechnet. Das zyklische Zeichnen der Szene wird mit clearInterval wieder gestoppt. Dadurch sollte auch die CPU-Last, die WebGL/Minefield verursacht wieder in die Nähe von 0% zurückgehen. In dem WebGL-Beispiel habe ich der Vollständigkeit halber noch Tastaturabfragen zum seitlichen Verschieben der Pyramide eingebaut. Das Prinzip ist genau das gleiche wie beim Mausrad, nur dass es statt 2 Optionen (vorwärts und rückwärts) hier vier Optionen (hoch, runter, rechts, links) gibt
Die Cursor-Zahlencodes (37,38,39,40) findest du in jeder ASCII-Tabelle. Mit diesem Beispiel kannst du natürlich auch analog (fast) alle anderen Tasten verarbeiten und statt der Translation um 0.2 in X und Y jede andere Operation ausführen lassen. Das soll es zum Thema Interaktion I (Ansicht) gewesen sein. Im nächsten Kapitel werde ich mich dem Thema Texturen zuwenden. Es bleibt spannend ! |
