Real-Time Cloth Simulation Using WebGPU: Evaluating Limits of High-Resolution

2025-07-15

AI Summary

To address WebGL’s limitations in supporting high-concurrency physics computation, this work pioneers the adoption of WebGPU for real-time, high-resolution cloth simulation. We propose a parallel simulation architecture tailored for WebGPU compute shaders, built upon a mass-spring model and mesh-level collision detection. The design enables fine-grained node updates and efficient triangle-surface collision response. Experimental evaluation demonstrates stable 60 fps performance in standard web browsers for cloth models comprising 640K vertices, while concurrently handling complex interactions with rigid surfaces composed of up to 100K triangles. These results validate WebGPU’s feasibility and substantial performance advantages for large-scale, high-fidelity physics simulation directly in the browser. Our approach establishes a novel paradigm for native, real-time physics engines in web environments—eliminating reliance on plugin-based or server-side solutions—and opens new avenues for interactive, physically grounded web applications.

Technology Category

• Computer Vision: Low Level & Physics-based Vision
• Application Domains: Web
• Cognitive Modeling & Cognitive Systems: Simulating Human Behavior

Application Category

• Responsible Web: Sustainability and climate impact of web technologies
• Graph Algorithms and Modeling for the Web: Efficient manipulation of static and dynamic Web-related graphs
• Economics, Online Markets and Human Computation: Sustainability of Web economics

Abstract

This study explores the capabilities of WebGPU, an emerging web graphics paradigm, for real-time cloth simulation. Traditional WebGL-based methods have been in handling complex physical simulations due to their emphasis on graphics rendering rather than general-purpose GPU (GPGPU) operations. WebGPU, designed to provide modern 3D graphics and computational capabilities, offers significant improvements through parallel processing and support for computational shaders. In this work, we implemented a cloth simulation system using the Mass-Spring Method within the WebGPU framework, integrating collision detection and response handling with the 3D surface model. First, comparative performance evaluations demonstrate that WebGPU substantially outperforms WebGL, particularly in high-resolution simulations, maintaining 60 frames per second (fps) even with up to 640K nodes. The second experiment aimed to determine the real-time limitations of WebGPU and confirmed that WebGPU can handle real-time collisions between 4K and 100k cloth node models and a 100K triangle surface model in real-time. These experiments also highlight the importance of balancing real-time performance with realistic rendering when handling collisions between cloth models and complex 3D objects. Our source code is available at https://github.com/nakjun/Cloth-Simulation-WebGPU

Problem

• Evaluating WebGPU for real-time cloth simulation
• Comparing WebGPU and WebGL in high-resolution simulations
• Assessing real-time collision handling limits in WebGPU

Innovation

• WebGPU enables real-time high-resolution cloth simulation
• Mass-Spring Method integrated with WebGPU framework
• Handles 100K node collisions at 60 fps