Realistic 3D Cloth Simulation in Real-Time with WebGL
May 7, 2025
Overview
This project creates a real-time 3D cloth simulation in a web browser using WebGL, aiming for visually plausible behavior. Key objectives included realistic draping under gravity, dynamic folding and wrinkling during movement, and physically consistent interactions with objects, inspired by Baraff and Witkin's work on implicit integration.
Key Features
Realistic Draping: Achieved natural settling of cloth over objects like spheres, showing gravitational effects.
Dynamic Folding and Wrinkling: Generated distinct folds and wrinkles during self-interaction and movement.
Physically Consistent Interactions: Ensured cloth interacts with static/dynamic objects (planes, spheres) without unrealistic interpenetration.
Stable Simulation: Utilized explicit collision handling and iterative position correction (Provot's Dynamic Inverse method) for stability at interactive rates.
Technologies Used
Rendering: WebGL with GLSL shaders for lighting.
Physics Model: Grid of particles interconnected by structural, shear, and bend springs; fixed physics timestep (1/60th sec).
Integration: Simplified integration with post-constraint steps for stability.
Constraint Methods: Provot's Dynamic Inverse method for stretch limiting; support for pinned constraints.
Controls: Camera controls (orbit, pan, zoom) and test case switching via event listeners.
Challenges and Learnings
Robust Collision Handling: The primary challenge was implementing stable collision handling (cloth-sphere, cloth-self) to prevent interpenetration, jittering, or exploding vertices, especially under tension or rapid movement near obstacles.
Stable Penetration Resolution: Ensuring particles were correctly projected out of objects and calculating appropriate response velocities without introducing excessive energy or instability was difficult.
Outcome
The project successfully delivered a real-time cloth simulation meeting its visual goals. It demonstrated stable draping, folding, and consistent interactions. This provides a solid foundation for future work, including full implicit integration, improved collision response, advanced material properties (anisotropy, plasticity, tearing), enhanced rendering (textures, advanced lighting), and performance optimization.
