Cloth Simulation with Position Based Dynamics (WebGPU)

A real-time cloth simulation built with WebGPU and Position Based Dynamics (PBD). The cloth is a square grid of triangles, pinned at its four corners, with a central vertex oscillating vertically to create visible waves. Gravity can be toggled via a checkbox, affecting all free vertices.

Features

• Pure WebGPU – no third-party rendering engines (Three.js, Babylon, etc.)
• Position Based Dynamics solver with distance constraints (horizontal, vertical, both diagonals)
• Verlet integration with gravity toggle
• 4 pinned corners and a sinusoidally driven central point
• Real-time normal recalculation and simple Lambert shading
• HTML/CSS/JavaScript only – runs in a modern browser

Getting Started

1. Clone the repository:
   git clone https://github.com/g30613740/cloth_sim.git
2. Open index.html in a browser that supports WebGPU (Chrome 113+, Edge 113+, or Firefox Nightly with dom.webgpu.enabled).
3. Allow the page to access your GPU.

Controls

• Gravity checkbox – enables/disables downward gravity acceleration (9.8 m/s²). When off, the cloth remains flat except for the moving center.

Implementation Details

• Cloth mesh: 20×20 quads, each split into two triangles.
• PBD constraints: horizontal, vertical, and both diagonal edges; edges are shuffled for symmetric wave propagation.
• Numerical method: Verlet integration (velocity-free) with optional gravity term.
• Normals: computed every frame on the GPU using cross product of triangle edges.
• Rendering: one draw call for shaded triangles (triangle-list), another for white wireframe lines (line-list). Back-face culling is disabled.
• Coordinate system: cloth lies in the XZ plane (Y up), rotated isometrically for a 3/4 view.

License

MIT