David HUANG's: Physical-Based Flag/Fabric Simulation

Project Description and Goals

This is a final project for a KTH course DH2323 Computer Graphics and Interaction at 2018 spring. The focus on the project is doing a flag simulation, including basic cloth model, wind blowing, and tearing effects. Some human interaction should also be allowed to the program. The cloth model should be physical model and thus basically animated automatically. The to-to list will be as following:

ü Cloth

n Build a physic-based cloth model in 2D graphics.

n Transfer the physic-based cloth model into 3D graphics.

n Adding texture to the cloth model.

ü Wind

n Apply wind and show blowing effects.

n Human controllable wind, including direction and strength.

n Add randomness to the wind.

n Blow the flag away if the wind is too strong.

ü Tearing and breaking

n Add cloth tearing effects.

n Add cloth breaking (making holes) effects.

ü Drag the flag along the pole by mouse

Theories

In this part, the physic model of cloth will be described.

The cloth is simulated by a String-Particles model, without texture, the cloth is actually more like a web.

low resolution web

high resolution web

The physical behavior can be determined by the strength of the springs. Also, making the particle denser can simulate a more realistic, as shown above. However, adding more particles will cost a lot more computation power, which is a drawback of this model.

Implementation

ü Programming environment

For implementing the project, I choose to use Processing, a Java based open source IDE and language for CG programming. I choose it since there the functions and classes it provided are easy to use and can satisfy my requirements, while I don’t have to program all the camera and 3D space by myself. Also, there are a library called Toxilib which provides a bunch of useful physic objects, including Springs, Particles, and Forces.

ü Model setup and texturing

flag without physics

The body of the flag can be set up by setting particle grids and connecting them with springs. Texture is needed for a realistic look, otherwise it will just be a web. Texturing is done by UV mapping. That is, for each pixel having (u,v) coordinate on the texture image, we map it to (x,y,z) on the actual model.

ü Wind

flag with wind

The wind is formed by two parts: the breeze(random noise) and the major wind. The physic model of the wind is simply applying a 3D force vector to each particle. For the major wind, it is a fixed global variable which can be modify by user input, including the direction and strength.

On the other hand, the breeze is done by applying a small force that is different between each particle. It can be generated by Perlin Noise. I do not simply use random since that for each nearby particle, the force should not differ drastically. Perlin noise provide a smoother randomness through the noise space, which make it more suitable for realistic simulation. Perlin noise can also be used to generate realistic terrains.

Once the forces are added to the particles, the interaction between springs and particles will generate a realistic look.

Also, beside of winds, I also added gravity to make it more realistic, which is a constant 3D vector force.

There is also a blowing away threshold for the strength of the wind. Once the wind is too strong, I disconnected the two points from the pole and the flag will fly away.

tearing without texture

ü Tearing and breaking

The effect is basically done by deleting the spring between particles. For breaking, there will be a center of the hole, I just “cut off”(delete) the spring around the particle. For tearing, there will be a trial, all springs on the trial should be deleted. Doing so is fairly simple when there is no texture. As shown in the right figure.

broken texture when tearing

However, when applying texture, simply doing UV mapping for the whole flag fails. Which can be seen in the left figure. So, there is a trick to do the texturing so it will not textured the disconnected part of the flag. It is just checking whether the two particles are connected before drawing the shape to be textured. If they are disconnected, end the current shape and start a new shape.

sharp edges when tearing

But another problems came out that the edges are not smooth. I fixed this by evaluating the connectivity of spring more carefully and draw the shape for rendering more precisely.

Cutting holes on the flag

Final results and documentations

The demo and explanation of the project can be found on Youtube (same as the video at the top):

https://www.youtube.com/watch?v=TK8Q2x4UwLY

The project zip file contains 3 main folders, cloth, cloth3D, and flag. They correspond to three Processing sketches. flag contains the final product, coming along with two exported executable program, one for Windows 64 bits and another for Linux 64 bits. Source code can be downloaded from:

https://github.com/chuangag/Fabric-Flag-Simulation

The Key used to interact with the program:

UP: blow the wind into the screen

DOWN: blow the wind out of the screen

LEFT: blow the wind to the left

RIGHT: blow the wind to the right

ENTER: blow the wind upward

SHIFT: blow the wind downward

ALT: tear the flag apart

CTRL: create random holes on the flag

Drag the flag up and down by mouse

Possible future works