FluidSim

This is the final dev log. Like I said in the last devlog, the sim was basically feature
complete so this dev log is mostly the cleanup and little UI improvements. I cleaned up a bunch
of code by like removing dead code that had jut been sitting and I improved how the controls panel looks.
Other than that I wrote the README and finalized the repo by adding stuff like the license and I also added a cool looking favicon. And with that, the project is now complete.

I have made a ton of progress since the last devlog. First I added a simple but good looking sky shader which has clouds and a sun, and then hooked up textures on the loaded models so they aren’t just basic colors anymore. And I also added support for loading your own .glb models and they’ll work in the sim. Relatively small changes but they made the scene look a whole lot better and more interactive.
Audio was the biggest change and took the most time, but it was also the most fun. There are multiple layers to it, like the general ambience is pretty much layered water sounds like water flowing sounds, foam sound, lapping sound, bubbles, etc that crossfade based on how the fluid is moving. External objects also create sounds like you can hear them splash in and out of the water or when heavy stuff sinks there is kind of a low rumble. There’s also sounds for water splashing on itself, objects colliding around with other objects, etc. There is also a cool underwater effect where if the camera is inside the water stuff get’s muffled and stuff which is really cool. What’s good is that everything is driven by the physics so everything is dynamic and nothing is being faked. Like each sound is created for a reason.
After that I added wind to the sim. Like wind is created using gusts which are scheduled procedurally, so you get calm stretches and then a burst of air. I also added another interaction too. You can now create vortexes using V + left click which is kind of fun and adds more interactivity.
I also added sculpting to the terrain. Now you can change the terrain to your liking by using different brush modes like: raise, lower, smoothen, flatten. I also optimized particles check with the terrain especially after stuff had become more dynamic though that was pretty easy to do.
Some other small polishes I did was to clean up the settings panel thing among other small stuff.
The sim is basically feature complete at this point, so next up is cleaning up the UI and then creating a good README.

Since my last dev log I’ve mostly been working on the water’s visuals. First thing I did was to rewrite the screen space fluid rendering implementation and tuned it a bit to make it look way better than before and less like a bunch of stacked balls and I also added realistic looking refractions too. Then I added proper shadows to the scene, which made stuff look more alive. This bumped the visuals up a lot.
Then I worked on caustics. This was one of those features that instantly made the water look ten times better. This took a bit of time to get right but eventually I got it to work and it looks good. After that, I added foam to make the water look less flat and blobby. The water, in general, waswas too perfect and so I added noise to the water to fix that.
With these changes, there was a noticeable loss of performance so I had to work on that. Along the way I also cleaned up some of the code especially the GUI control panel thingy since it was getting too extensive so I cut down a lot of things.
Then I finally added model support. Before you could only use basic shapes like squares, spheres etc. Now I can load in model files, and use them in the simulation which is really cool. There was also this weird bug where objects would disappear when you switched them around but after a bunch of changes in my code I finally fixed the bug. I also fixed other bugs like water kind of acting weird with the boat spawned which too took quite a bit of time to fix.
Next I want to do some scene polish like better background, etc and then finally audio. I might also work some more on the object collision physics since I intentionally kept them really simple but I might not. Depends on how lazy I am I guess.

Since my last dev log I’ve been working on terrain. I started with simple noise on a grid so the particles had something cool to fall and interact with rather than a boring flat plane.
Then I had the idea of making the terrain a planet like fluid flowing on it and stuff like that. Actually got it working. It just wasn’t as good as I thought it would be. It made the project overly complex and kind of shift the focus towards the terrain instead of the fluid and made it harder to play with it. And also the fluid would obviously spread around over the planet so you couldn’t even see most of the cool stuff. And I spent a lot of time on that but well I eventually reverted and added a seabed in a box. That made the fluid the focus instead of the scenery and stuff and how it turned out in the end kind of looks dope.
Well with the new terrain I spent time making it look sandy and good. I also switched from rendering some stuff as wireframes to actual meshes Shoudl’ve done this before but back then I guess I got lazy even though most of the stuff for that was already set up
Water is really what’s been improved. Particles were just tiny colored spheres before, which I guess is okay for debugging but doesn’t look like water. I’ve been building something called screen space fluid rendering instead which just renders every particle as a billboard that always looks at/faces the camera and does some other cool stuff behind. Mine works I guess but I still have to improve it a lot. Like I guess the fluid looks more like water but still it looks like a bunch of balls so yeah that’s what I want to focus on next. After that, I’ll add proper collisions between objects, then scene polish, then audio. Audio is something I am excited for!

Since my last dev log, I made a pretty big change by making the fluid interact with actual 3D objects instead of just the bounds.
First, I cleaned some stuff up like spawning the particles in a neat cube among other little stuff. Then I decided to refactor how stuff was being rendered. Before, I had two separate canvases, one WebGL canvas for the scene and one WebGPU canvas for the particles, because I was lazy implementing them and so I merged them into one since. That didn’t make too big of a difference visually but it makes it easier to add other stuff later.
The main feature was getting the fluid to actually flow around objects. The particles can now collide with not only boxes and spheres but any complex shape I place in the scene. The torus knot is the only complex shape set up so far, but the same system will work for pretty much anything I add later.
The other half was making the objects feel realistic. Like at first, they were just static test objects and the fluid could only move around them but not push them so they could move. I added proper physics to the objects so they float and move around realistically in the water and pretty much react to it. Getting this to work took quite a while like objects would spin violently when in contact with the water or bobbing up and down non stop but I eventually got it to work.
Next up is pretty much the biggest change yet (at least visually). I want to remove the container and add real terrain over which the fluid can realistically flow over and stuff. Most of the foundation for this change is pretty much setup and the biggest change is to actually generate the terrain. After that I want to improve the physics of the objects. Right now the physics are like deliberately really simple like objects collide with the container only and can’t interact with other objects and the rotations aren’t even handled well. Once there is a terrain, then I’ll work on them pretty much.

Since my last dev log, I’ve made quite a few changes to the fluid simulation which make it look completely different from the last dev log.
First, I added interaction with the particles, which makes things a bit fun but its real purpose was to make testing the simulation easier. After that, I spent some time tuning and improving the physics. I added stuff like viscosity and a repulsion force between particles, which made the particles behave more like an actual fluid and add more customisation.
While working on the physics, I also optimized the SPH simulation. I combined some of the neighbor searches and reduced unnecessary allocations happening every frame. This was pretty simple and made quite a difference.
Once the basic simulation was good enough, I decided to move on to WebGP to really make stuff run smoothly. Both the fluid simulation and particle rendering now run through WebGPU, which gives me a much better foundation for scaling the simulation to larger numbers of particles. Like before the simulation could not run smoothly at around 4000 particles while now I can go up to tens of thousands of particles and still have really good performance (unless the particles are too squished up).
After that, I finally started converting the simulation from 2D to 3D. This was relatively simple as I just had to go around the code changing Vector2s into Vector3s and accounting for the z axis but this made some other underlying issues more prominent. Like one of the biggest issues was particles stacking up against the boundaries walls that would repel other particles. I fixed that issue and made several other changes to get the 3D simulation behaving more naturally.
At this point, the project has gone quite a bit beyond the small Three.js experiment I originally started with. What I want to do next is to make the particles react to other objects and shapes in the environment. I want to try and make it eventually work with more complex shapes as well, so the fluid can flow around and interact with actual 3D objects rather than being restricted to simple boundaries. After which I’ll make the fluid look like water instead of a bunch of balls flowing around and then work on the environment.

I started working on a small fluid simulation in Three.js just for learning. Originally, this was really just meant to be a test project and something fun to mess around with, but after working on it a bunch I decided I want to keep developing it and eventually turn it into something interesting.
So far I’ve built basic SPH simulation and got particles interacting with each other. I also implemented spatial hashing to make everything more efficient which just avoids checking every particle against every other particle. This improved the performance a lot especially with a lot of particles.
I also added configurable simulation parameters such as gravity, pressure, particle count, etc to make testing easier. I also worked on the particles like befoe they were just blue circles but right now they change their color based on speed which I implemented by adding a shader.
Right now, it still needs a bunch of work. There are bugs I need to fix and generally make the physics better. Next, I want to make the particles interactive something like click to move them type thing for testing. After, I’ll work on improving the physics, fixing bugs, and finally make stuff 3D.