Overview

In this project, we created a spring-based cloth simulation. We created the cloth using point masses and structural, shearing, and bending springs and are able to adjust the density, spring constant as well damping. Then using this cloth, we can create more realistic scenarios by implementing physics by numeric integration and adding realistic collisions with objects such as spheres, planes, and self-collisions by making sure the point masses do not go inside the objects. Finally, we use the GLSL programming language to add shaders to our objects using the GPU to speed up shading operations. This allows us to implement Diffuse shading, Blinn-Phong shading, Texture mapping, displacement and bump mapping, and environment-mapped reflections. These are done by using the light reflection equations and calculating the out_color. For Texture mapping, displacement and bump mapping, and environment-mapped reflections, we take in readings from a texture file and translate between the object space to the texture space, and for bump mapping we add the displacements to our values to get the bumps on our object. This allows us to render our cloth objects in many different types of environments with different lightning and create realistic scenarios where the cloth is similar to the way it behaves in real life.

Part I: Masses and springs

Below are images from rendering the masses and springs of a wireframe.

Part 2: Simulation via numerical integration

Changing the spring constant changes the stiffness of the fabric. A low ks value makes the fabric very responsive to changes and falls faster whereas a high ks value is very stiff and falls slowly. We can see from the images that for the fabric with k value of 100000, it does not fall very low because the fabric is so stiff whereas for the k value of 10, the fabric immediately sags down.

Changing the density of the object changes the percieved weight of the cloth. This makes it sag further down and fall a little faster. The weight of the cloth affects the end result by having the middle drop further down. In the render with the density of 20000 g/cm^2 we can see the middle droops down alot more because there is more weight on the point masses.

Changing the damping of the cloth makes it change positions faster/slower. This means that for low damping values, it quickly changes positions and is more reactive. For the render with damping value of 0.01%, it moves back and forth for many cycles before finally settling down because it drops so quickly. For the render with daming value of 0.75%, it falls very slowly and majestically, since the position change is reduced. This is because the position value changes by 1 - damping value

Part 3: Handling collisions with other objects

We can see that using different k values of the cloth while intersecting the sphere, it have different stiffness as it wraps around the sphere. For cloth with a lower k value of 500, it wraps around the sphere more fully because the springs have a smaller spring constant. For the cloth with the high k values of 50000, it has less creases as it does not wrap around the sphere as fully.

Here is the cloth lying peacefully at rest!

Part 4: Handling self-collisions

We can see below that with self-collisions, now implemented the cloth will fold over on itself rather than going inside itself.

If we change the spring constant k value of the cloth, the cloth will be more or less rigid while folding on itself. We can see that with a k=50 N/m, the cloth folds over itself very easily whereas with the k=50000 N/m, the cloth is less likely to have small folds over itself and is much more rigid in having only the big folds over.

We can see that if we change the density of the cloth, the cloth will seem heavier. When the cloth is more dense, it will fall closer to the ground, quicker, having more sharp creases. This is because as the cloth is more dense, the heavier mass causes it to weight down heavier on the folds. The cloth with density of 150 has much more creases and ends up closer to the ground whereas the cloth with density of 5 has less folds.

Part 5: Shaders

A shader program is a program that takes in input properties of a point in the world and outputs a 4-dimensional color vector for a coordinate on an image using vertex shaders and fragment shaders. The vertex shaders modify the vertices using transforms to change their normal and position vectors before rasterization. Fragment shaders process the fragments yielded by rasterization to compute a color that is outputted in out_color. These two programs work together to create lighting and material effects by running on each vertex and fragment on the image.

The Blinn-Phong shading model is a fragment shader that combines ambient, diffuse, and specular shading. Ambient shading provides constant light that is uniform across the scene, diffuse shading provides light that is relative to the object to create gentle shadows, and specular shading provides light that is also dependent on the angle to the object, but also provides reflections that are more visible when the angle to the light is closer. These three shading techniques are calculated and then weighted together to create the final shaded image. With only specular lighting on, you can see the sphere is shinier, and with ambient lighting on, you can see that the sphere is a uniform matte black. Here are screenshots of our Blinn-Phong shader below.

Here is our texture mapping shader on the cloth and sphere using a custom flower texture.

The techniques for bump mapping and displacement mapping are similar because they vastly improve the appearance and prominence of textures. However, bump mapping improves the texture by changing the surface normals, but displacement mapping changes the actual positions of the vertices. Displacement mapping may show textures more dramatically with differences in physical appearance because it changes the positions, while bump mapping will be less dramatic because it changes the way the light source is reflected off the surface. The way light is reflected will introduce texture into the image because of shadows which can highlight different parts of the textured cloth. Below are the bump mapping and displacement mapping screenshots with the checkered texture.

When we change the sphere's coarseness, displacement mapping appears to be more affected than bump mapping. With bump mapping, switching between (-o 16 -a 16) and (-o 128 -a 128) has little difference and the textures looked about the same. The surface looked fine and the sphere shape was altered, as expected. With displacement texture, because we change the normals of the surface, the surface is significantly altered so at lower resolution the triangles that made up the sphere were much more visible than at the higher resolution.

Here is our mirror shader on the cloth and sphere.

Project Website

Here is our public website. At link https://cal-cs184-student.github.io/sp22-project-webpages-lulu-yu/proj4/index.html.