Cloth Simulation in Javascript/WebGL

Below is a very rough demonstration of cloth simulation using WebGL for rendering (via the WebGLU toolkit). You will need a WebGL enabled browser to view this, which is currently limited to Chrome, Firefox4 and Safari. See Note: this runs a lot faster in Chrome than Firefox.

[Show video]

The cloth is modelled as a matrix of particles, each particle constrained by distance to an adjacant particle. The particles are modelled separately as free bodies, then moved to satisfy the distance constraints. Satisfying any constraints will likely violate another so the process is repeated several times. The more particles that are used, the more articulated the cloth will appear, but the slower the computation time, and the harder it is to satisfy the increased quantity of constraints, in terms of both computation time and quality of the result. A low quality will result in the cloth stretching and distorting.

Wind is modelled quite randomly by applying a force to random selections of particles for random times. The force itself is also randomised but chosen around a desired average.

The general idea of particles and constraints are taken from the paper Advanced Character Physics by Thomas Jakobsen.

Fatal: You either do not have a WebGL enabled browser or you do not have JavaScript enabled (or both)
Looks like you don't have a modern browser. See the link above for details on getting one and using it on this page.