Lawrence Yiu

Overview

In this project, I implemented a cloth simulation along with some shaders to make the cloth look like it has some color and material. In part 1, I built a grid of point masses and connected them together using springs in a way that allowed the cloth to be constructed with structural, shearing, and bending constraints. For part 2, the cloth is simulated using Verlet Integration to compute each point mass’s new position taking into account the forces of gravity and the springs. To prevent springs from getting too stretched out, a position constraint is used to ensure that springs do not stretch beyond 10% of their rest lengths per update step. In part 3, I implemented sphere and plane collision with the cloth by checking to see if any point masses have gone into the sphere or plane and setting their positions back above the surface of the sphere or plane. Then in part 4, I implemented self-collision of the cloth by ensuring that each point mass is repelled from its neighboring point masses along with using a hash table to speed up neighbor checking. Finally in part 5, I wrote various shaders including diffuse shading and Blinn-Phong shading to give color and lighting effects to the cloth, Bump and Displacement Mapping to give bumpy looks to the cloth by changing the normals and vertices respectively, and texture and mirror shaders to give the cloth a material look.

The bugs I encountered in this project were mostly due to using normalized vectors instead of unnormalized vectors in the position correction parts as well as adding forces to each point mass incorrectly. These bugs caused the cloth to become very unstable and the cloth would often fly away. This was hard to debug because almost anything could have caused the cloth to become unstable. It took a long time to find these bugs because I debugged by going back and making sure that each part is doing what it is supposed to do even though the parts seemed correct. I found bugs in parts that I thought were correct by using the debugger and print statements to ensure that calculations were being performed correctly. This was the most debugging I have done for a project out of all the projects in this class.

Part 1: Masses and springs

Screenshots of scene/pinned2.json

No shearing constraints.
Only shearing constraints.
All constraints.

Part 2: Simulation via numerical integration

Screenshots of scene/pinned2.json with Different Parameters

Default parameters.
For ks = 100 N/m, cloth appears to be more stretchy with more creases at the top due to a weaker internal structure. The cloth seems more wavy as it falls.
For ks = 50,000 N/m, the cloth appears to be less stretchy with no side creases due to a stronger internal structure. The cloth is more stiff as it falls.
For density = 1 g/cm2, the cloth appears to be lighter because the top of the cloth droops less than the default cloth. The cloth appears less wavy as it falls.
For density = 100 g/cm2, the cloth appears to be heavier because the top of the cloth droops more than the default cloth. The cloth appears more wavy as it falls.
For damping = 0.023%, the cloth takes longer to come to a rest as it swings around. Also the creases are less apparent.
For damping = 1.0%, the cloth appears to be very stiff as it falls down but comes to a rest without swinging around.

Screenshot of scene/pinned4.json

Final resting state.

Part 3: Handling collisions with other objects

Screenshots of scene/sphere.json With Different Spring Constants

Default ks of 5000 N/m.
For ks = 500 N/m, cloth appears to have more creases due to a more stretchy internal structure.
For ks = 50,000 N/m, the cloth appears to be much stiffer due to a stronger internal structure.

Screenshot of scene/plane.json

Cloth resting on plane.

Part 4: Handling self-collisions

Early falling cloth.
Initial self-collision.
Resting cloth.
For density = 1 g/cm2, the cloth appears to have much less wrinkles as it falls and has larger folds.
For density = 100 g/cm2, the cloth appears to be much more wrinkled as it falls and has smaller folds.
For ks = 500 N/m, the cloth appears to be more wrinkled as it falls and looks similar to the density = 100 g/cm2 case.
For ks = 50,000 N/m, the cloth appears to be much less wrinkled as it falls and looks similar to the density = 1 g/cm2 case.

Part 5: Shaders

Explanation of Shaders

A shader program is a program that runs on the GPU. The vertex shader can transform and output various items such as texture coordinates, normal vectors and vertices which are passed to the fragment shader for use in calculating the color of the fragments/pixels to give objects in the scene lighting and material effects. For example, the vertex shader can make objects look bumpy by displacing their vertices according to a displacement map. The pixel shader can make objects have mirror effects or specular effects using Blinn-Phong Shading.

Blinn-Phong Shading

The Blinn-Phong Shading model consists of three parts: the ambient part, diffuse part, and specular part. The ambient part illuminates the object with some color without any dependance on lighting direction. The diffuse part illuminates the object with dependance on lighting direction. The specular part is responsible for giving the object specular highlights depending on lighting direction.

Ambient only.
Diffuse only.
Specular only.
All three combined.

Screenshot of Texture Shader

Texture from https://publicdomaintextures.com/elementor-112/marble01/

Bump Mapping and Displacement Mapping

Bump mapping on cloth and sphere.
Displacement mapping on cloth and sphere.

It looks like Displacement Mapping gives a more raised look to the surface of the cloth while Bump Mapping is not as raised.

Sphere Coarseness Differences

Bump Mapping: 16.
Displacement Mapping: 16.
Bump Mapping: 128.
Displacement Mapping: 128.

Bump Mapping does not appear to have that much difference between 16 and 128 coarseness while Displacement Mapping has a much larger difference. As the mesh becomes higher quality, Displacement Mapping looks better.

Screenshots of Mirror Shader

Cloth resting on sphere.
Sphere only.