High-performance 3D animations on the web

Objective:

Investigation of the new webgpu standard for use in performant web applications.

Experimental setup:

As an experiment, a game engine for the web was created. Common web technologies like Javascript/Typescript, CSS and HTML were used. All algorithms and mathematical calculations were implemented without using 3rd party libraries.

The basic structure is based on the Entity Component System (ECS) paradigm. This is a modern approach for high-performance game engines. This approach is also used by Unity, which is one of the most popular game engines.

How does a game/graphics engine build an image?

1. A graphics card can only draw triangles
2. So each object must be stored as a sum of many triangles (each quadrilateral consists of 2 triangles)
3. All triangles of an object live in their own little world (coordinate system) and are placed in the game world by transformations.
4. These transformations are represented by matrices As a small optimization I use the general form of 3D rotation - This saves 2 matrix multiplications:
5. Then a virtual camera is placed in the room (also by transformations)
6. The angle of view of the virtual camera is calculated (also a matrix)
7. The positions of the individual triangles multiplied by the matrices results in the image that is passed to the graphics card for drawing.
8. The graphics card positions the objects on the 2D screen and paints the pixels enclosed by an object.

Here are impressions from the engine:

Camera movements and physics:

In any game engine is important to bring movement and the laws of physics. The laws of physics are based on Newton's laws of motion.

Videos: Camera movement & gravitation

Here is still the first application of the game engine:

Simulation of celestial bodies in a circular orbit by Newton's laws. Sun, Venus, Earth, Mars and Jupiter have real values; the speed was increased by a factor of 10000.

Video: Celestial body