Hochperformante 3D Animationen im Web

Zielsetzung:

Untersuchung des neuen Webgpu Standards für die Verwendung in performanten Webapplikationen.

Versuchsaufbau:

Als Versuch wurde eine Spieleengine für das Web erstellt. Zum Einsatz kommen dabei übliche übliche Webtechnologien, wie Javascript/Typescript, CSS und HTML. Es wurden alle Algorithmen und mathematischen Berechnungen selbst implementiert ohne Verwendung von 3rd Party Bibliotheken.

Die Grundstruktur basiert auf dem Entity Component System (ECS) Paradigma. Dies ist ein moderner Ansatz für performante Spieleengines. Dieser Ansatz wird z.B. auch bei Unity verfolgt, welche eine der bekanntesten Gameengines ist.

Wie baut eine Game/Grafik Engine ein Bild auf?

Eine Grafikkarte kann nur Dreiecke zeichnen
Jedes Objekt muss also als Summe vieler Dreiecke gespeichert werden (jedes Viereck besteht aus 2 Dreiecken)
Alle Dreiecke eines Objektes leben in ihrer eigenen kleinen Welt (Koordinatensystem) und werden durch Transformationen in der Spielewelt platziert.
Diese Transformationen werden durch Matrizen dargestellt Als kleine Optimierung verwende ich die generelle Form der 3D Rotation - Damit spare ich 2 Matrizenmultiplikationen:
Dannach wird eine virtuelle Kamera im Raum platziert (ebenfals durch Transformationen)
Es wird der Blickwinkel der Virtuellen Kamera berechnet (ebenfalls eine Matrize)
Die Positionen der einzelnen Dreiecke multipliziert mit den Matrizen ergibt das Bild, welches der Grafikkarte zum zeichnen übergeben wird.
Die Grafikkarte positioniert die Objekte auf dem 2D Bildschirm und malt die Pixel an, welche von einem Objekt eingeschlossen sind.

Hier Eindrücke aus der Engine:

Kamerabewegungen und Physik:

In jeder Spielengine ist wichtig Bewegung und die Gesetze der Physik einzubringen. Die physikalischen Gesetze basieren auf den 3 Newtonschen Gesetzen.

Videos: Kamerabewegung & Graviation

Hier noch die erste Anwendung der Spieleengine:

Simulation von Himmelskörpern in einer kreisförmigen Umlaufbahn durch die Newtonschen Gesetze. Sonne, Venus, Erde, Mars und Jupiter haben reale Werte; die Geschwindigkeit wurde um Faktor 10000 erhöht.

Video: Himmelskörper