Animated clothes are more and more present in video games, whether they are independent or AAA games. Wether it is a long cape as in the Batman Arkham series, a simple scarf tied around the waist as in Sifu or a long dress as in Journey, animated clothes make movements more impactful and lively. In this article, we’ll take a look at the technical basics of clothing simulation. The idea is not to allow you to implement these systems directly in a game, but rather to give you the basics and potentially the desire to delve deeper into the subject.

Fabrics, an object apart

To fully understand how clothes work, you first need to understand what sets them apart from other objects in an engine. There are two main families of objects in a video game: meshes and particles.

Typically, a mesh is an object made up of fixed vertices linked together to form triangles. The object is considered as a set with the same properties (weight, speed, etc.). If one vertex of the mesh moves, all the other vertices move in the same way (with the exception of those animated by shaders, such as water or grass). The vast majority of objects visible in a video game are meshes.

Particles are points in space, each with unique properties. They are completely independent of each other. The behavior of one particle will not influence that of its neighbors. This is usually used to create special effects (smoke, electricity, dust, etc.) by displaying an image or mesh at the particle’s position.

Pour bien comprendre le fonctionnement des vêtements il faut d’abord comprendre ce qui les démarque des autres objets d’un moteur. Il y a deux grandes familles d’objets présentes dans un jeu vidéo, les meshs et les particules.

The fabric is a mixture of these two systems, a mesh whose vertices are managed as particles. In this case, the particles exert constraints on each other. If a particle in the mesh accelerates, it will give part of this acceleration to its neighbors, who will do the same with their neighbors, and so on. These particles have the same role as the vertices of a mesh, and are linked together to form triangles.

Schéma montrant les différences entre mesh, particules et tissu.

Movement

There are many different ways to add movement to a cloth. Each has its own advantages and disadvantages, and the choice depends on the visual needs of the game, the target performance and the available budget.

The simplest method, seen in the majority of games, is to attach the clothes to the character’s body, in the same way as the skin is managed. With this method, for example for a t-shirt, if the character bends his forearm, the fabric deforms at the elbow to take on the rounded shape of the joint. The benefit of this method is that it’s very inexpensive in terms of performance and easy to set up, but there’s no free movement of the cloth.

The second method, which requires more time and resources, is manual animation of the cloth. Just as in classic animation, where the animator manipulates a character’s skeleton, here they will manipulate the fabric’s vertices and manually choose their placement to give it the desired shape and movement. The result can be very convincing and stylized, but it requires a lot of work, especially if the rendering has to be realistic.

To save animators time, a pre-calculated simulation can be run, taking into account gravity, maximum fabric stretch, wind and other physical parameters. An animation will be automatically generated, and by modifying the parameters, they can iterate rapidly until they obtain the desired result.

The problem with manual or pre-calculated animation is that if the situation in which the animation is used changes (which happens regularly in a production), it has to be manually modified and re-imported into the engine. In addition, it cannot dynamically adapt to unpredictable player actions. To avoid these inconveniences, there is one last method. The most expensive in terms of performance and the most complex to develop. This is real-time simulation.

In this case, at each frame of the game, the position of the vertices of the fabric is calculated as a function of various physical parameters (wind, speed, weight, plasticity of the fabric, etc.). This method is only used in the biggest productions, such as Batman: Arkham City, The Last of Us 2, Spider Man, etc…. In addition to being expensive in terms of performance, it takes a long time to develop, making it inaccessible to many studios. It has many points in common with the pre-calculated method, but real-time constraints force developers to be ingenious in order to achieve convincing results with as little calculation as possible. This is technically the most interesting method, and the rest of this article is based on it.

Real-time clothing simulation is particularly visible in Batman: Arkham City.

 

Simulate movement in real time

There are many ways of simulating real-time fabric movements. These can be divided into 2 main families: force-based and position-based.

Force-based methods aim to provide a realistic simulation of the fabric. The idea is that the forces applied to a vertex will influence the velocity of its neighbors. To achieve this goal, several parameters come into play. There’s gravity, the resistance of the springs linking the vertices together, the velocity of each vertex, wind, and other physical constraints depending on the case. The springs linking the vertices are responsible for the fabric’s elasticity, stretching and relaxing according to the forces applied. This is what allows the fabric to return to its original shape when there is no movement. It’s also what dictates the extent to which a vertex communicates its force to its neighbors to propagate movement throughout the fabric.

Force-based simulations have the theoretical advantage of being close to reality, but they are costly and unstable. As the vertices each propagate their forces to the others, if the forces become too great, the system can get out of control and the fabric may move uncontrollably.

To avoid instability, there are methods based on the positions of the vertices of the fabric (a type of simulation known as Position Based Dynamics – PBD). The idea is not to propagate a force by distributing it to the neighbors, but to use the position of the neighbors and the vertex’s own forces to determine its velocity. Less costly and more stable, this technique has the drawback of giving a theoretically less realistic result.

What both methods have in common is that they require a great deal of calculation. The physical forces and stresses applied to a fabric can be very different from one vertex to the next. When calculating the velocity of a vertex, its neighbors may not yet have been influenced by the changes (forces or position) of their other neighbors. It is therefore not possible to obtain a perfect result by performing the calculation just once for each vertex. To ensure that forces and movements propagate, we need to iterate several times on all vertices. There are various ways of approaching a correct result in just a few iterations. In 2016, researchers at Nvidia proposed the XPBD model, a PBD method with added elasticity constraints, rapidly converging on a credible solution.

Comparaison des résultats obtenus avec les méthodes PBD et XPBD en fonction du nombre d'itérations. La méthode XPBD donne des résultats crédible en moins d'itérations.

Position-based methods are the most widely used in the industry today. The real-time solutions used in Nvidia Apex Cloth (Unreal Engine 4, Unity, …) and Havok Cloth (The Legend of Zelda: The Breath Of The Wild, Wolfenstein: Youngblood, …) are based on this concept. Recently, Unreal Engine 5 introduced a promising new method based on machine learning.

 

Collisions

Once motion is functional, it’s time to make it react to its surroundings by adding collision constraints.

There are several ways of managing collisions in a video game. The most usual is to check at regular intervals whether the collision mesh of one object (a simplified mesh sometimes reduced to a simple cube) is in another. If this is the case, the object is moved backwards in the opposite direction to its speed, to ensure that it is no longer in the object. Depending on various parameters, it is sent back in the opposite direction more or less strongly. This is discrete collision detection.

The drawback of this type of detection is that it doesn’t take account of fast-moving objects. When checking for contact with an obstacle, the object is likely to be before the obstacle in one collision test, and after it in the next. The object then passes through the obstacle without having generated a collision. This can be seen in some big productions, notably Halo Infinite, where certain weapons can send bodies flying fast enough for part of an enemy’s body to pass through the ceiling, but not the rest. The character is then blocked. In the case of fabric, this problem is amplified by the different speeds of each vertex. If the movement is too fast, some vertices can pass through a wall, while others cannot. This gives the impression that the character is “stuck” to the wall.

To avoid these problems, there’s continuous collision detection. The idea here is to predict which other objects the current object may come into contact with before it moves. If you’re interested, take a look at the GDC talk by Chris Lewin, physics engineer at Electronic Arts.

Comparaison des méthodes de détection de collisions

In the case of cloth, the most useful technique is predictive contacts (used in EA’s Frostbite Engine). The idea is that 2 nearby objects have a high chance of colliding. If a vertex of the cloth is within a certain radius of an object and is moving towards it, then a contact will be generated and the cloth will be pushed away. In other cases, contacts are generated only because the fabric is very close to the object, even if it’s not touching it. This ensures that the fabric never enters the object. This technique limits visual artefacts, but has the downside of sometimes generating collisions when there are none, creating a distance between the tissue and the object.

 

The limitations of the predictive contact method can be seen in FIFA 23’s celebrations. The players’ shorts never touch their legs

 

Collision management is very costly, the complexity increases with the number of vertices in the mesh and the number and complexity of obstacles. One obvious way of optimizing collision checks is to limit the number of objects that can interact with a mesh. In many games, only the body of the character wearing the cloth generates collisions. But a body is often a dense mesh. If the objective is not to have ultra-realistic collisions, then it’s possible to simplify the mesh by using only spheres and capsules. There’s no need for polygon-by-polygon verification, it’s possible to just use the simple collision calculations of spheres and capsules.

 

Conclusion

Real-time cloth simulation is a complex subject on which researchers are still working today. There are many possible implementations, and what is presented here is a selection of what I feel is most useful to understand the subject.

There are other interesting aspects of simulation not currently present in video games that I haven’t mentioned, such as multi-layer fabrics and tearing. I may write about these topics in the future. If you’d like to find out more now, take a look at the various sources listed below.

Any questions? Corrections? Any suggestions? Leave a comment below.

This article is part of the Real-Time Techs series dedicated to popularizing real-time rendering and simulation methods used in video games. Don't miss any future articles: Twitter / Mastodon / Bluesky.

Sources and more:

🗣️ Conference | 📽️ Video | 👨‍💻 Code | 📄 Paper | 📃 Thesis

🗣️ Real-Time Cloth Solutions on ‘Marvel’s Spider-Man’, Sophie Brennan, Insomniac Games, 2019

🗣️ Cloth Self Collision with Predictive Contacts, Chris Lewin, EA, 2018

📽️,👨‍💻 The Secret of Cloth Simulation, Ten Minute Physics, Matthias Muller, 2022

📽️,👨‍💻 Cloth Self-Collision Handling, Ten Minutes Physics, Matthias Muller, 2022

📄 Fast Simulation of Cloth-Rigid Body Based on PBD, Sijie Huang and Hui Zang, 2020

📄 XPBD: Position-Based Simulation of Compliant Constrained Dynamics, Matthias Muller, Nvidia, 2016

📃 Tearable cloth, Kurt Thompson Phillips, 2008

👨‍💻 Cloth Tearing Simple Project, Paul Galand and Antoine Aubin, 2022