WebGPU Cloth Simulation 09 - Real Time Web-based Cloth Simulation Performance Comparison (WebGPU vs WebGL)

Real Time Web-based Cloth Simulation Performance Comparison  (WebGPU vs WebGL)

1. Overview

WebGL is a veteran in the realm of graphics rendering on the web. It utilizes the OpenGL ES API to enable GPU-accelerated usage of physics and image processing and other visual effects as part of the web page canvas. Its widespread adoption owes much to its compatibility and robust community support.

On the other hand, WebGPU is the newcomer, designed as a successor to WebGL. It promises better performance and more control over graphics and computation capabilities by harnessing modern GPU features that were not accessible in WebGL. It also aims to provide a unified interface across different platform-specific graphics APIs like Vulkan, Metal, and DirectX.

2. Project Setup

Both projects use a Mass Spring System for the cloth simulation, which models the cloth as a network of connected springs. This method effectively simulates how cloth moves and interacts with its environment.

    a. WebGPU Implementation

This version is built with the experimental WebGPU API and the WebGPU Shading Language (WGSL). WebGPU provides more direct control over the graphics processing unit (GPU), allowing for detailed and efficient management of how the simulation computes. Using WGSL lets us fine-tune how the GPU handles these computations, making the simulation more efficient, especially for complex scenarios.

    b. WebGL Implementation

This project uses two main tools: Three.js for rendering and Cannon-es for the physics. Three.js simplifies many parts of creating 3D scenes, such as setting up lights, managing textures, and controlling cameras. Cannon-es is a physics engine that works well with Three.js, handling the movements and interactions in the simulation. By combining these tools, the setup becomes more straightforward, focusing less on complex GPU programming and more on designing and running the simulation.

3. Performance Metrics

    a. WebGPU Project

        Case 1:

        - Particles on X: 60

        - Particles on Y: 60

        - Vertices on the Rigid Model: 10,000+

        - FPS: 26-32

        Case 2:

        - Particles on X: 15

        - Particles on Y: 15

        - Vertices on the Rigid Model: 1,000+

        - FPS: 100+

    b. WebGL Project

        Case 1:

        - Particles on X: 60

        - Particles on Y: 60

        - Vertices on the Rigid Model: 10000+

        - FPS: 0

        Case 2:

        - Particles on X: 15

        - Particles on Y: 15

        - Vertices on the Rigid Model: 1,000+

        - FPS: 20-28

4. Development Experience

Developing with WebGPU presented a steeper learning curve due to its lower-level API and lack of comprehensive frameworks equivalent to Three.js. However, it offers finer control over GPU resources, which is a significant advantage for optimizing performance in complex simulations.

WebGL, being more mature, has abundant resources, tutorials, and community support, making it easier to get up and running. However, achieving optimal performance can sometimes require deep dives into WebGL's intricacies.

5. Compatibility and Future Outlook

WebGL has excellent compatibility across a broad range of devices and browsers. In contrast, WebGPU is still under active development, with limited support in mainstream browsers and platforms. Its future, however, is promising, with planned support across all major platforms and potential for significant performance enhancements.