Home

Awesome

WebGPU Fluid Simulation

This is my attempt at implementing Jos Stam's Real-Time Fluid Dynamics for Games paper using javascript as a playground for learning the WebGPU API.

Demo

Live Demo

As WebGPU is still in development, it is not yet available in release builds of recent navigators. In order for this demo to run properly, you will have to enable WebGPU experimental features in your browser. I'll update this readme once it will be officially supported.

The simplest solution that worked for me was to download Google Chrome Canary, then navigate to chrome://flags and enable Unsafe WebGPU & WebGPU Developer Features (for better security, don't navigate the web with these features on). Other methods can be found here.

Once you have WebGPU enabled, you can start playing with the live demo !

Context

I've already tried to create a fluid simulation a few years ago using plain javascript and no GPU, but quickly came to the limitations of intense CPU computing on the web.

It's also been some time now since I've wanted to learn WebGPU and I thought it would be the perfect opportunity to tackle back on implementing fluid simulation using the power of this new API optimized for parallel computing and graphic rendering.

For this simulation, I'm making use of compute shaders to do the calculations instead of fragment shaders that can be found in usual OpenGL/WebGL implementations.

Project Structure

Symmetry Demo

References

Fluid Simulation References

WebGPU References