A dev, Night by Night 00, shared his work on building warpable and wearable materials for games. Though not fully complete, the demos already show a lot of progress, and the developer is selling their findings on the Cocos store for Chinese developers. The developers love it, so we thought we’d share the insights this developer gave with our Western community.
Try it out now (Note the demo is in Chinese):
ClothDemo for 2.x: provides several sample applications (curtain, rope?)
ClothDemo for 3.7.3 or better: with 3D scenes
Origins
Two days ago, I saw a fun effect:
The article was: Dazzling HTML5 Front End Design Source Code Analysis Notes - Remnant Clothes
Effect Example: Tearable Grid
It is an effect that I’ve seen before and recently brushed up on. I used to think it was hard and couldn’t understand it, but now that I look back at it again, it’s a different kind of insight.
So I researched the code and prepared to port it to Cocos.
Analysis
The whole effect can be split into two parts, one for the simulation of the mesh and one for the rendering of the mesh.
- Simulation of this piece, for the time being, according to the algorithm of others, it is not difficult to copy. Just pay attention to compatibility.
- Rendering is even more straightforward, just use the Graphic component and draw lines directly.
While studying the code, it was discovered that it was based on a mass-spring system that divides the entire mesh into individual masses and determines the relationship between the positions of the masses by simulating springs.
Combined with the knowledge of the rendering, the texture is actually very close to the rendering vertex data. If I can pass this texture in between the direct rendering, then I get a 2D real fabric. Similarly, soft bodies, jellies, bent ropes, hair, etc., can all be achieved this way!
Everything depends only on custom vertex data. No need to define the vertex format, and even Cocos has support for sprite meshes.
The 2D fabric
After carrying the code as a whole and adding custom vertex data, you get a most basic 2D fabric effect. Well, it’s very comfortable, much more comfortable than just a mesh, and it has some practicality too.
But the problem also comes, the more the mesh is divided, the more the whole fabric is stretched and distorted, and the more it is affected by gravity.
Implementation of multiple algorithms
So, after researching the code plus compiling online information, I found the prime spring system with the PBD algorithm.
Most of the implementations are Unity, but the principles are the same, and a lot has been learned in handling and debugging.
After referring to several writing methods, I finally found that to achieve a good effect, I not only need to choose a suitable algorithm, but also need to debug some parameters for different scenes, such as the number of iterations, step length, and a little more detailed spring density and so on, depending on the implementation, the parameters are different.
These algorithms are themselves 3D, and 2D simplifies the content itself.
And the whole fabric system is not only the simulation of something like soft fabric but also the ability to collide with other objects (simulation) and even create a reaction force on the object.
In fact, this is very widely used in games. For example, in 3D games, a character’s fluttering skirts, hair, flags, and so on, this kind of need to have physical effects, but not involved in collisions or collision objects rarely content, but also answered my previous doubts about this piece.
The most awesome case I’ve seen from the big guys is a 3D fabric that interacts with 3D objects like a real piece of fabric.
But after carrying my own tests, I can not achieve this effect. On the one hand, the performance of JavaScript may not be able to keep up, and some parameters cannot be adjusted, and Unity has JobSystem to cooperate with Burst compilation, and the performance is very good. On the other hand, I am not too good at it. You can try to correct this function by yourself, it is very interesting, and you can gain a lot of knowledge on it and also look at a few examples of my trials.
You can try to achieve this function yourself. There are very interesting, a lot of gains. You can also look at my implementation of several examples.
https://cdn.youpingame.com/YpDemo/DemoGif/clothAni.gif
The following is a compilation of the learning process.
Mass-spring system
A Mass-spring system is a physical dynamics model that describes a physical system consisting of a fixed point and a mass and a spring between them.
Mass-spring systems are often used to model the motion of soft objects, fabrics, ropes, hair strands, and other objects.
The model can be solved by numerical methods such as Euler’s method, implicit Euler’s method, and Leapfrog, and can be combined with effects such as collision detection, gravity, and friction to simulate complex physical scenarios more accurately.
The structured spring mesh, which has the following simplified form:
In the spring mesh, three types of springs exist:
- Structural springs, which are used to provide the force of spring extension and compression
- Shear springs, which are used to provide shear force when the spring undergoes shear deformation
- Bend spring, which is used to avoid excessive spring folding
With this structure, we can simulate a fabric effect.
Display integration, implicit integration, and PBD in fabric simulation
In fabric simulation, different methods can be used to perform calculations and simulations, among which the more common ones are display integration, implicit integration, and position-based dynamics (PBD) algorithms. The following are the characteristics and advantages and disadvantages of each of them:
Explicit integration
The most intuitive and plain way to update the vertices:
-
The force of each spring is calculated based on the location of the vertices at the ends of the spring and the original length of the spring
-
Find the combined force of all the springs connected to the vertex, and use it to update the velocity and position of each vertex
This is the easiest way to think of and to understand.
The explicit integration method separates the force calculation from the velocity update by first calculating the force based on the current state, and then calculating the velocity and displacement based on the force and time step. This method is usually simple and easy to implement, but it is necessary to ensure that the time step is small enough. Otherwise, it may lead to unstable values.
Since the sampling is discrete, when k is too large, or the sampling frequency is not enough (too large a step), the spring is likely to wobble from side to side and eventually run further and further away from the system crashing problem.
Each time it deviates more from the original length, so each time it gets more force, a vicious circle, and eventually, the whole cloth will be torn to pieces.
Pros:
-
Simple to implement
-
Faster calculation speed
Disadvantages:
-
The time step needs to be small enough to ensure stable values
-
Prone to problems such as oscillations
Implicit integration
The biggest difference between implicit and explicit is that it updates the current velocity and position with the force at the next moment, which is a question of whether the chicken or the egg comes first.
The implicit integration method carries out the force calculation and velocity update simultaneously, by solving a system of equations to get the node position at the next moment. This method ensures numerical stability but is usually computationally intensive and requires the use of iterative methods to solve the system of equations.
Advantages:
-
Numerical stability
-
Can handle large-time steps
Disadvantages:
-
High computational complexity
-
Slow running speed
Real-world fabrics strongly resist stretching limits once they are stretched beyond a certain limit.
However, increasing stiffness can cause problems. Explicit integrators will be unstable.
Solution: Smaller time steps and more computation time.
The linear system involved in the implicit integrator will be pathological. Solution: More iterations and computation time.
PBD Algorithm
The PBD algorithm uses a position-based dynamics model that adjusts the positions of the nodes by constraints to simulate the fabric. It does not need to use physical parameters such as velocity and acceleration as the integral method does but only deals with the relationship between node positions and constraints.
Advantages:
-
Parallelizable on GPU (PhysX)
-
Simple and easy to implement
-
Stable at large-time steps
-
Can handle a wide range of constraints, including fluids
Disadvantages:
-
Not physically based. The elasticity factor is affected by grid points, and the number of iterations.
-
Low performance at high resolution
-
Limited accuracy
-
Need for iterative solving
In summary, the explicit integration method is simple and easy to use, but requires a controlled time step to ensure numerical stability; the implicit integration method can ensure numerical stability, but has a high computational complexity; the PBD algorithm is a constraint-based simulation method that can maintain stability at large time steps and has good scalability, but has relatively low accuracy. Therefore, it is necessary to choose a suitable method according to the specific needs of practical applications. If you want to learn more, you can check this article on the subject.