Web Demo
Interact with the cloth in real time and observe how it responds to your mouse clicks
Description
I developed a Cloth Physics Simulation using JavaScript, implementing the Extended Position Based Dynamics (XPBD) method. XPBD is a powerful technique that allows for stable and realistic simulation of cloth by iteratively solving constraints while maintaining the physical plausibility of the cloth material. The simulation involved handling various constraints such as distance constraints for maintaining the structural integrity of the cloth, as well as bending constraints to simulate the cloth’s flexibility
- Extended Position-Based Dynamics (XPBD): The simulation was driven by the XPBD, which allowed for stable constraint enforcement over multiple iterations. I implemented both distance and bending constraints, ensuring the cloth responded realistically to forces such as gravity and external forces.
- Three.js: Three.js was used to render the cloth mesh in a 3D environment, with real-time updates as the simulation progressed. The cloth was represented as a grid of vertices connected by springs (constraints), and the visual appearance was enhanced using physics-based rendering and lighting effects.
Result
The Cloth Physics Simulation successfully demonstrated realistic cloth behavior in real-time within a web browser. The XPBD-based approach ensured that the cloth remained stable including user interaction in the scene. The web demo was able to run smoothly across different devices, showcasing both the robustness of the physics engine and the efficiency of the XPBD.