Real-time Position-Based-Fluid in WebGL

This project is an implementation of the paper Positon based fluids and a simple screen space fluid render based on WebGL.

View the project online at https://xuxmin.github.io/pbf

Gallery

50k particles:

Features

Techniques

• Incompressible fluid simulation based on PBF method(Position based fluids), including surface tension, XSPH viscosity, and vorticity confinement.
• Use texture to store and share data. The calculation of each particles is carried out in parallel in the vertex shader, and the fragment shader is responsible for transferring data between textures.
• A four-step rendering method to search for neighbor particles, which is described in detail in GPU Gems.
• A simple screen space fliud rendering method, including depth/thick calculation, bilinear filtering smoothing, normal reconstruction, and shading.

Performance

The Performance was evaluated on my laptop with Intel Iris(R) Xe96EU Graphics, Intel Core i5-11320H @ 3.2GHz, no discrete graphics.

Under the configuration of 4 incompressibility confinement iterations each frame, the 50K particle runs at about 50 fps, 100K particles are about 25 fps.

Requirements

View the project online in https://xuxmin.github.io/pbf. You can also download the code to run locally. If you want to run locally, you need to build a simple local server.

Method 1. Use the plugin of Visual Studio Code.

1. In Visual Studio Code, install the plugin Live Server
2. Ctrl+Shift+P，enter “Live Server: Open with Live Server”
3. Then the browser automatically opens the local server with the specified address

Method 2. Use Node.js

1. Install node.js and npm.

2. Install a lightweight http server based on Node.js.

   npm install http-server -g

3. Enter the project root directory and start the local server.

   cd pbf
   http-server . -p 8000

4. Access http://127.0.0.1:8000/ in the browser.

Usage

The web page is shown below:

The frame rate is displayed in the top left corner. Click "Run" button to start simulation, click again to stop. Press "Reset" button to reset the status. You can also enter the frame number in the text box next to the "Step" button, and then press "Step" button to simulate the specific frame number.

The parameters that can be adjusted:

• particleSize: the size of particle to render, only useful when SSFR is off.

• deltaTime: the time step of simulation.

• resolution: the resolution to display the particles, you must click "Reset" button after adjust it.

• particlesNum: the number of particles. Note that adjust the resolution at the same time to achieve the best display effect, finally click "Reset" button again.

• solverIterations: the number of confinement iterations.

• viscosity: the viscosity of the fluid.

• vorticity: vorticity confinement.

• SSFR: Screen space fluid rendering.

  • SSFR: whether to open the screen space fluid rendering.

  • tint_color_(r/g/b): the tint color.

  • max_attenuate, attenuate_k: color attenuation from thickness, attenuate = max(exp(-attenuate_k*thickness), max_attenuate).

• Surface tensile:

  • correction: whether surface tension correction is enabled.

  • tensileK: the parameter of surface tension correction.

• Acceleration: the acceleration of the fliud (usually only gravity).

• Obstacle: Add an obstacle。obstacleX, obstacleY, obstacleZ control the position。sizeX, sizeY, sizeZ control the size.

Reference materials

1. Macklin M , Müller, Matthias. Position based fluids[J]. Acm Transactions on Graphics, 2013, 32(4):1-12.

2. W. J. van der Laan, S. Green, and M. Sainz, “Screen space fluid rendering with curvature flow,” in Proceedings of the 2009 symposium on Interactive 3D graphics and games - I3D ’09, 2009, p. 91.

3. 【深入浅出 Nvidia FleX】(2) Position Based Fluids

4. Stanford CS348C: Prog. Assignment #1: Position Based Fluids

5. Chapter 29. Real-Time Rigid Body Simulation on GPUs | NVIDIA Developer

6. naeioi/PBF-CUDA: Position Based Fluids CUDA implementation

7. Screen Space Fluid Rendering for Games slices. Simon Green, NVIDIA

8. ttnghia/RealTimeFluidRendering