loganzartman / wavescape

interactive fluid simulation in browser based on SPH, GPU-accelerated with WebGL2

wavescape

WIP interactive, GPU-accelerated fluid simulation using smoothed particle hydrodynamics.

It can do all the simulation work on the GPU using WebGL2! It doesn't use WebGL2 Compute, which isn't widely supported. Instead, it does tricks with regular vertex and fragment shaders.

try it!

controls

• space: start/stop simulation
• s: step forward in time (use while stopped)
• r: reset
• click and drag: touch fluid
• click settings for some tweakable parameters!

references

• Smoothed Particle Hydrodynamics Techniques for the Physics Based Simulation of Fluids and Solids
• Smoothed Particle Hydrodynamics (Monaghan 1992)
• Batcher's odd-even mergesort
  • this one is tough and hard to find recent writing about, but these resources helped a little:
  • GPU Gems 2 ch 46: Improved GPU Sorting
  • odd-even mergesort network visualizer
• neighbor search inspired by Fast Fixed-radius Nearest Neighbors (Hoetzlein 2014)
  • a lot of detail is missing from the slides unfortunately
• SPH Particle Collisions for the Reduction of Particle Clustering, Interface Stabilisation and Wall Modelling
• A generalized wall boundary condition for smoothed particle hydrodynamics
  • this also provides some great details about their SPH implementation in general, and I referenced it frequently.

wavescape's Issues

modularize shaders

the shaders are a mess with tons of copy-pasted code.

I already tried glslify, but it is broken for webgl2. there's already a PR open that might fix all my problems, but glslify seems pretty dead. It might be easiest to define shaders in JS with a glsl template literal, and use string interpolation to do some very basic code reuse.

do walls properly

my implementation of walls is a hack at best. At the very least, the density estimate is incorrect for particles near walls, since the walls are not factored into density computation at all. This is probably responsible for particle clustering on walls.

basic diagnostics

as a subset of writing tests #6, it would be great to automatically run some basic diagnostics; things like:

1. can we write to and read from a texture
2. can we copy between textures using a sampler
3. can we do scattered atomic writes using the vertex shader+gl.points technique
4. etc.

the reason for this is that this doesn't work on some browsers/systems, and I have no way to debug them.

test/fix windows 11 chrome

reports of instability

switch to uniform buffer objects

most of the compute-like shaders use the exact same uniforms, so it could be more convenient and performant to group them into uniform buffer objects

pretty rendering

maybe some simple metaballs would look good

write tests

is this testable? I'd need to be able to actually create a webgl context, so... headless browsers? (playwright? puppeteer?)

fix ios safari 16

works fine in desktop safari, what's wrong with iOS?

I don't have an iphone but maybe I can use the free 1-minute browserstack sessions to debug 💀