webgpu-fluid-simulation's Introduction

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.

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

index.html : web page containing the demo
src/main.js : simulation setup & render loop
src/init.js : initialization functions (webgpu context, render size & gui)
src/utils.js : utility wrappers to handle WebGPU buffers, uniforms and programs
src/render.js : program used to render on the canvas
src/shaders.js : WGSL strings containing each program's compute shader code
libraries/ : contains the CCapture.js library for canvas recording and the dat.gui.js library for GUI elements