Advanced Games Physics
Inhaltsverzeichnis zum
Inhalt

Darstellung von animier­ten Objekten

3D-Animation - eine Erweiterung der 2D-Physik

Darstellungen im 3-dimensionalen Raum

Für ein knackiges Computerspiel sind 3D-Animationen unverzichtbar! Dabei unterscheiden sich 3D-Physik und 2D-Physik nicht voneinander; das Problem liegt vielmehr in der Darstellung der zusätzlichen Koordinate! Der Schritt von der 2D-Welt zur Bewegungsdarstellung im 3-dimensionalen Raum ist eigentlich schnell getan. Außer, dass es nunmehr eine weitere Koordinate, die z-Koordinate gibt, für die eine geeignete Bewegungsgleichung zu erstellen ist, spielt sich die Umstellung im wesentlichen auf der p5.j-Ebene ab. Zwei wichtige Maßnahmen sind erforderlich ():
  1. Der Standard-Renderer, der mit der canvas-Funktion ohne besondere Nennung aufgerufen wird, ist durch den 3D-Renderer WebGL zu ersetzen und
  2. es ist ein 3D-fähiger Schrift-Font zu laden. Dieser ist z.B. als freier Font unter Inconsolata aus dem Internet zu laden. Leider ist die Darstellungsqualität unter Chrome und Edge sehr mangelhaft. Also, lieber Firefox verwenden!


Derzeitig arbeitet der WebGL-Renderer nicht auf Android-Geräten, sondern zuverlässig nur unter dem Firefox-Browser!




Abb. Vorbereitung für das 3D-Rendering unter p5.js

Vorteilhaft für die Berechnung der Bewegungen ist die Verwendung von Vektoren. Hierfür stellt p5.js eine ganze Reihe von Vektor-Funktionen (p5.Vector()) zur Verfügung. Deren Anwendung ist allerdings gewöhnungsbedürftig, da ihre Ausprägung wenig konsistent ist.

Für die Darstellung der bewegten Objekte ist die konsequente Verwendung der Matrix-Befehle anzuraten, da eine Positionierung von 3D-Elementen im Zusammenhang mit den sonstigen Parametern des Objektes nicht unterstützt wird. Z.B. hat das Primitive Sphere() einen Radius, aber keinen Mittelpunkt, der positioniert werden könnte. 2D-Primitives, wie circle() oder rect() können wie gewohnt weiter benutzt werden.
Im Gegensatz zum herkömmlichen 2D-Renderer ist jetzt der Koordinaten-Ursprung in die screen-Mitte verlegt worden. Das hat zur Folge, dass verschiedene meiner Standard-Funktionen (Scrollbar(), Button() etc.) neu positioniert und mit dem 3D-Font ausgestattet werden mussten. Diese angepassten Standard-Funktionen sind in den Libraries mit dem Vorsatz p3D zu finden.
Noch eine weitere Einschränkung ist zu beachten. Griechische Lettern sind nicht darstellbar.
Wie es sich für ein 3D-Szenarium gehört, können Licht, Material und Kamera-Position und -Perspektive eingestellt und den jeweiligen Anforderungen angepasst werden.

p5.js selbst stellt 6 unterschiedliche 3D-Modelle zur Verfügung, darunter die sphere (Kugel) und der box (Würfel), darüber hinaus gibt es die Möglichkeit, aus dem Internet unter "https://free3d.com/3d-models" weitere kostenlose Modelle zu laden und in die p5-Applikation zu laden.

In nebenstehenden Programm-Beispiel wird das aus dem 2D-Programm Wurfparabel bekannte mathematische Modell des schrägen Wurfs auf die 3D-Welt übertragen. Das ist nicht weiter schwer, da zusätzlich nur noch eine Bewegung in die z-Richtung zu implementieren ist. Diese Bewegung verhält sich ganz genau so wie die Bewegung in x-Richtung, während die Bewegung in y-Richtung von dieser Erweiterung nicht betroffen ist.
download processing
run program
Um die Möglichkeiten der 3D-Darstellung mit dem WebGL-Renderer zu demonstrieren, gibt es im Beispielprogramm Einstellmöglichkeiten für die Position der Lichtquelle und der Kamera (d.h. aus welcher Richtung der Betrachter blickt). Weiterhin kann die gesamt Szene um die y-Achse gedreht werden. Mit der Ausnahme, dass der Ball über der Ebene keinen Schatten wirft (über die Möglichkeit des ray-tracing verfügt dieser Renderer leider nicht) sieht die Szene doch schon sehr realistisch aus.


Achtung! Der webGL-Renderer ist sehr Speicherplatz intensiv. Daher kann nicht jeder Browser die Beispiellösung darstellen. Geeignet ist der Firefox-Browser.