Real-Time Cloth Simulation Using WebGPU: Evaluating Limits of High-Resolution (2507.11794v1)

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

• The paper demonstrates that WebGPU sustains 60 fps with up to 640K cloth nodes, vastly outperforming WebGL.
• It employs a mass-spring method with enhanced collision detection using an extended Möller–Trumbore algorithm.
• Experimental results reveal significant performance gains in handling complex 3D collisions and high-resolution simulations.

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

This paper explores the use of WebGPU for real-time cloth simulation, specifically focusing on performance compared to WebGL and the limits of high-resolution cloth models. The authors implement a cloth simulation system using the Mass-Spring Method within the WebGPU framework, incorporating collision detection and response handling with 3D surface models. The paper presents a performance evaluation of the system, demonstrating the benefits of WebGPU's computational shaders and parallel processing capabilities for complex simulations in web environments.

Background and Motivation

Real-time cloth simulation is critical for applications in computer graphics, VR, gaming, and virtual fitting. Achieving real-time performance requires efficient physics-based computation and rendering techniques, particularly in web environments where simulations must be accessible across various platforms without specialized software. WebGL, while widely adopted, has limitations in handling GPGPU tasks due to its primary focus on rendering and lack of native support for compute shaders. WebGPU, a new standard, addresses these limitations by offering advanced 3D graphics and compute capabilities, enabling efficient parallel processing and support for compute shaders.

WebGPU and Related Work

WebGPU, developed through collaboration within the W3C, is designed to provide accelerated graphics processing and GPGPU capabilities in web browsers. It supports compute shaders and offers a lower-level, more flexible API compared to WebGL, allowing direct leveraging of modern GPU architectures. This facilitates efficient parallel processing for complex simulations, physics computations, and large-scale data processing. The API architecture of WebGPU includes vertex, fragment, and compute shaders, enabling GPU resources to be used for both rendering and general computations (Figure 1).

Figure 1: API architecture of the WebGPU

Existing research compares WebGPU with WebGL, highlighting performance improvements in GIS systems [webgpuGIS], particle systems [peter2023particle], and game engines [fransson2023performance]. These studies suggest that WebGPU can significantly enhance simulation systems where real-time performance is challenging to achieve with WebGL.

Cloth Simulation Methodology

The paper implements a real-time cloth simulation system using the MSS, chosen for its simplicity and efficiency in real-time applications. The simulation system includes collision detection and response algorithms with surface models, using a spring-centric approach and an extended Möller–Trumbore intersection algorithm for detailed collision detection. The simulation pipeline involves calculating spring forces, collision detection, collision response, and rendering (Figure 2).

Figure 2: Simulation Steps per Each Frame in our Proposed Simulation System.

The spring-centric algorithm utilizes atomic functions and temporary buffers to accumulate data after computing spring forces. The collision system implements both detection and response, employing a triangle-triangle intersection method for precise collision detection. After detecting a collision, the system identifies affected nodes and calculates the collision response direction based on the relationship with the collision point.

Experimental Evaluation

The authors conducted two primary experiments to evaluate the performance of the WebGPU-based cloth simulation system. The first experiment compared the performance of WebGPU and WebGL in simulating a hanging cloth. The second experiment examined the performance limitations of WebGPU when simulating collisions between a cloth model and 3D surface models. The hardware and software environment for the experiments included an Intel i7-7700 CPU, an Nvidia GeForce RTX 4070 Ti GPU, 32GB of memory, and Chrome v122.0.6261.94.

Performance Comparison: WebGL vs. WebGPU

The first experiment focused on evaluating WebGPU's acceleration compared to WebGL by simulating a hanging cloth influenced only by gravity. The results indicated that WebGPU significantly outperformed WebGL, maintaining 60 fps even with up to 640K nodes, while WebGL struggled to achieve real-time performance beyond 10K nodes (Figure 3).

Figure 3: Performance comparison between WebGPU and WebGL in Hanging Simulation.

Specifically, WebGL could only achieve 3.58 fps with 65.5K cloth nodes, making real-time simulation impossible. To achieve the same 60 fps simulation performance, WebGL required a cloth object with approximately 160 times smaller resolution compared to WebGPU. This highlights WebGPU's efficient utilization of GPU parallelism.

Performance Limitations: Cloth Model Collisions

The second experiment examined the limitations of WebGPU's acceleration performance, focusing on collision processing and response with 3D surface models. Three types of 3D surface models were used: a sphere (0.4K vertices, 0.9K triangles), an armadillo (25.3K vertices, 50.6K triangles), and a dragon (50K vertices, 100K triangles) (Figure 4).

Figure 4: Information about the 3D surface models used in the second experiment.

The experiment measured the maximum cloth resolution that could sustain 30 fps during collisions with these models (Figure 5).

Figure 5: Experimental Results: Performance Comparison with Changing Resolution of Model

The results showed that 30 fps was achievable when simulating a collision between the armadillo model and a cloth object with 10K cloth node resolution. However, the maximum resolution that could be simulated was 65.5K, with performance dropping to 3.05 fps. For the more complex dragon model, 30 fps was achievable with a 4K cloth node resolution. The maximum resolution that could be simulated with the dragon model was 16.3K, with a performance of 7.47 fps. This demonstrates the trade-off between model resolution and real-time performance.

Visualizing the Experiments

Visual results of the hanging cloth simulation and cloth-object collision simulations are shown (Figures 6 and 7).

Figure 6: Scene1. Haning cloth simulation results(left: wireframe rendering, right: texture rendering)

Figure 7: Scene2. Cloth-puling simulation results with 3D objects.(left: sphere model interaction, middle: armadillo model interaction, right: dragon model interaction)

Discussion and Implications

The experiments confirm that WebGPU significantly enhances GPU acceleration in web-based graphics environments, particularly for high-resolution cloth simulation. The performance improvements over WebGL are attributed to WebGPU's efficient utilization of GPU parallelism, making it suitable for computationally intensive tasks. The detailed collision detection and response system, based on an extended Möller–Trumbore algorithm, enables real-time simulation even in high-complexity scenarios.

However, the results also highlight the need for further optimizations to balance performance with realistic rendering. Suggested optimizations include barycentric-coordinate optimization, collision culling techniques, and alternative collision detection algorithms like the GJK algorithm.

Conclusion

The paper concludes that WebGPU offers significant advantages for real-time simulation in web-based graphics applications. The performance improvements over WebGL, especially in high-resolution simulations and complex collision-handling scenarios, position WebGPU as a promising technology for gaming, animation, and VR/AR/XR content. Future work will focus on integrating advanced solvers like Position-based Dynamics (PBD), Projective Dynamics (PD), and Vertex Block Descent (VBD), as well as performance optimizations like bounding volume hierarchy (BVH) for collision culling. These enhancements aim to further advance web-based graphics technologies and broaden the applicability of simulation systems.