# 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?**

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