2. Kapitel
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 ():- Der Standard-Renderer, der mit der canvas-Funktion ohne besondere Nennung aufgerufen wird, ist durch den 3D-Renderer WebGL zu ersetzen und
- 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.
Achtung! Der webGL-Renderer ist sehr Speicherplatz intensiv. Daher kann nicht jeder Browser die
Beispiellösung darstellen. Geeignet ist auf jeden Fall der Firefox-Browser.
