Fluid Rendering Demos performance

The water fluid movement simulations are awesome but performance is really bad even with WebGPU. The “Box, sphere and wall” water container is my favorite demo but chuggs along with FPS in the 20’s once the water is added. This is on a good gaming PC.

Does it run like this for everyone else to? Am I doing something wrong? Super cool but basically unusable at 23fps.

Now if I drop the default number of “water” particles from 6k to 2.5k I get a smooth 60fps, but that’s not much water to play with :frowning:

Yes, the simulation demos are slow because the simulation code is in javascript. They only serve to demonstrate the fluid rendering feature and are not intended to be used for any other purpose.

The simulation code should be converted to GPU (using compute shaders for example) to be able to support more particles at an interactive rate.

1 Like

Well I guess my Sea-Doo racing game isn’t going to happen anytime soon, way above my skill level. Here’s what chatty GPT had to say for anyone interested and it sounds, well, next to impossible…


It seems like you are interested in improving the performance of the water fluid movement simulations in Babylon.js by using compute shaders, as suggested in the answer you received. Here’s a more detailed explanation of how you can use compute shaders for this purpose:

Understanding Compute Shaders:
Compute shaders are a type of shader specifically designed for performing general-purpose computing tasks on the GPU. They are well-suited for tasks like physics simulations, which involve massive parallelism. Compute shaders can significantly boost performance by offloading computations from the CPU to the GPU.

Identify the Bottleneck:
Before implementing compute shaders, it’s important to identify the performance bottleneck in your fluid simulation. In your case, the slow performance is likely due to the fact that the simulation code is written in JavaScript, which runs on the CPU. To determine if this is the bottleneck, you can use profiling tools to analyze where most of the processing time is spent.

Conversion to GPU:
As suggested in the answer you received, you need to convert the simulation code to run on the GPU using compute shaders. This involves rewriting the simulation algorithms in a shader language like GLSL (OpenGL Shading Language) or HLSL (High-Level Shading Language) and then dispatching these shaders using WebGL or WebGPU.

Integration with Babylon.js:
Babylon.js provides support for using custom shaders, including compute shaders. You’ll need to create a custom shader program that defines how the water simulation should be computed on the GPU. You can use the BABYLON.Effect class to compile and set up your compute shader.

Data Transfer:
To perform the simulation on the GPU, you’ll need to transfer the necessary data (e.g., particle positions, velocities, forces) from the CPU to the GPU memory. This can be done using WebGL or WebGPU buffer objects.

Dispatch Compute Shader:
Use WebGL or WebGPU API functions to dispatch your compute shader. The shader will execute in parallel on the GPU for each particle, which can handle thousands of particles simultaneously.

Synchronization:
After dispatching the compute shader, you may need to synchronize and transfer the updated data back to the CPU if you need the results for rendering or further calculations.

Optimization:
To achieve optimal performance, you may need to experiment with various techniques, such as thread grouping and optimizing memory access patterns in your compute shader code.

Testing and Iteration:
Finally, thoroughly test your GPU-accelerated simulation and fine-tune it as needed. You can gradually increase the number of particles and see how performance scales.

Keep in mind that implementing compute shaders can be complex and may require a good understanding of GPU programming and shader languages. Additionally, it’s important to check if WebGPU provides better performance than WebGL for your specific use case, as WebGPU is designed to offer better GPU compute capabilities.

Using only fake water could be the way to go here :slight_smile: it is what most games do.

1 Like