@AbdurRehman

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.

Since the last dev log, I’ve mostly been working on improving the appearance and detail of the buildings in GeoSim.
I started by working on procedural textures for the building materials. Instead of having buildings use mostly flat colors, I added procedural textures for things like brick, concrete, plaster, metal, and glass. I also added stuff like roughness maps so the different materials react to lighting differently. I did this to make the buildings feel more varied without having to rely on a huge collection of texture files. I worked extra on glass to make it look more like an actual glass facade rather than just a blue colored shiny wall.
After that, I moved on to windows. I added procedural windows that are generated based on the building itself, so I don’t have to manually model them or something. I also added different window styles for different types of buildings, so residential buildings can look different from offices and industrial buildings. There were a few problems with the windows. For example, windows were being generated on surfaces where they shouldn’t be, including horizontal faces and things like roof structures or antennas. I added logic to make sure windows are only placed on vertical surfaces and improved the checks used to determine the parts that should receive windows. I also tuned the settings for quite a while till I was satisfied.
Once the windows were looking better, I started focusing more on performance. The procedural textures were lagging stuff, so I made some changes to improve performance. I also added chunks to the building batching system. This will make it simple to add tiling later since the performance right now is not really the best and treating the whole map as one big area is the cause of it I think.
Next I want to continue adding architectural details, starting with enterances and then balconies. After that I’ll move on to things like roofs, roads, and terrain, before eventually getting into environmental details like trees and the actual disaster simulations.

Since the last dev log, I’ve mostly been working on the visual side of GeoSim and trying to make the environment feel less like a bunch of basic geometry.
I started by adding a proper sky to the scene. I spent quite a bit of time tweaking the sky settings until I got something I was happy with. It makes a pretty big difference compared to having a plain black background.
After that I moved on to clouds. I wanted something more interesting than just putting a few transparent cloud textures in the sky, so I ended up implementing procedural volumetric clouds using a 3D noise texture and ray marching using GLSL. The clouds have multiple layers of procedural noise to control their shape and detail, along with a separate procedural mask to give them a more natural form. I also added some basic volumetric lighting so they react to the sun and ambient light instead of just looking like white blobs.
The clouds are also animated, so the volume slowly moves through the sky rather than staying completely static. Getting them to actually look good took quite a bit of experimenting with the different settings like density, coverage, etc.
Once I had the clouds looking good, I ran into a problem I was pretty much expecting which was reduced performance. Well the performance wasn’t really good to begin with and the clouds made it worse. So I spent some time optimizing the clouds and managed to get a pretty significant performance improvement without sacrificing the looks too much.
After that, I decided to optimize the buildings too while I was at it. Before, the way I was generating building geometry was doing a lot more work than necessary, so I implemented geometry batching. This ended up making the performance a whole lot better.
At this point the project has a good looking sky, clouds and is pretty performant. So next I want improve the appearance of the buildings. Right now they still look like like blocks so I want to start using the data I am pulling to generate things like windows, entrances, balconies, and other architectural details when the information is available. For buildings where that information isn’t available, I want to procedurally generate the details based on the building’s shape, type, etc. I also want to improve the building materials and add textures so that different buildings feel less alike and then I’ll move to roofs, roads, and terrain and also stuff like trees and then simulating stuff like floods.

Since the last dev log, I’ve been working on actually making more use of the building data I’m pulling from OSM and improving how the buildings look in the scene.
I added a basic building feature extraction system that takes things like entrances, windows, balconies, parking areas, and garages from the data and then associates them with the buildings they belong to, using things like proximity and address information to make the matching more reliable. I have to do this because features and buildings are given as separate objects but this gives me a good foundation for eventually generating these details onto the 3D buildings instead of keeping buildings as mundane blocks.
I also started building a material system for the buildings. Buildings can now use different materials based on their building type and material information, while explicit colors are used when available. I also added some procedural variation to buildings using the same material so they don’t look completely identical. The system right now is really basic and doesn’t look too good but it makes everything look a little bit better.
While working on the materials, I ran into a pretty annoying z fighting issue between overlapping building parts. It took a really long time to figure it out but I eventually fixed it by introducing a tiny vertical offset between building parts, preventing those surfaces from fighting with each other.
At this point I’m shifting more toward the visuals of the project. I mean the building data is becoming pretty detailed, so I think the best next step is figuring out how to turn that data into neat visuals. I want to start generating windows, balconies, entrances, and other architectural details either procedurally or from the data when that information is available. Other than that I also want to work on things like roofs to really make the city realistic. After that I’ll work on adding stuff like terrain and infrastructure like roads before moving on to implementing the disasters like floods, etc.

Since the last dev log, I’ve been working on making the buildings a lot more accurate and improving how the map data is handled.
The biggest change was improving the building data coming from OpenStreetMap. Buildings can now use their actual height when it’s available, with building levels and other information being used when it isn’t. I also added Wikidata as a fallback for buildings where OSM doesn’t have enough information. This makes the buildings look much closer to the real world.
I also improved the geometry handling including better support for outer geometry and multipolygon buildings, which makes the overall city representation more accurate especially for more complicated buildings.
Along the way I cleaned up some of the Three.js setup, improved the error screen with a retry button, and increased the test areato better test all of the changes.
There’s still a lot to improve, especially with performance since larger areas with a lot of buildings can now lag. Stuff like caching and tiling will be important later so I don’t have to load everything at once. For now, though, the basic city data is starting to feel much more like an actual 3D representation of a real place rather than just a collection of blocks.
Next I want to make the buildings look even better by making use use of as much of the available building data as possible, including roofs, windows, entrances, balconies, building type, colors, materials, and other details that can be used in the 3D representation. This also means improving the data side of things. I’ve already started pulling a lot more information from OSM than I was at the beginning but I’ll need to pull more stuff.

I made a pretty big step forward with GeoSim. Instead of just displaying the raw data, I can now take it data and turn it into actual 3D buildings in the scene.
I first got the basic Three.js setup working by setting up the camera, controls, lighting and renderer before implementing the building creation logic. I also added a simple loading and error screen instead of leaving the page empty while the data is being loaded and also improved the old UI a little and also added a section that displays the coordinates of the current area.
The buildings themselves are still very basic for now. They’re mostly just simple blocks and some of their heights aren’t completely accurate yet. So now I want to work on fixing that and also making them look better using as much data provided by OSM as I can to make everything more accurate.

I established GeoSim’s initial foundation and built the very basic data pipeline. I set up the project structure, defined types I will use in the future such as bounding boxes and OSM related stuff, and integrated the OpenStreetMap Overpass API to fetch building related data such as geometry for a predefined test area for now. I also added a simple interface to display the raw data before I actually start converting it into actual 3D buildings.
I also ran into something called CORS issue when calling Overpass directly from the browser, so I added a Vercel serverless API route to request Overpass and that fixed it. Along the way I also came through many other weird API related issues so I eventually switched from the overpass-api.de endpoint to another public Overpass instance hosted by Mail.ru and now stuff seems to be working.
Next, I’ll move from only displaying the raw OSM building data to turning it into actual 3D geometry using Three.js.

Since the last dev log, I’ve spent most of my time building out the animation system for the character controller. The character could already move, but everything felt super basic visually so I wanted the animations to properly react to what the character is actually doing instead of just switching between a few animations.
I started by adding a basic locomotion animation system with idle, walk, and run animations. I added blending between the different locomotion states based on the character’s movement speed, so the character doesn’t immediately snap from one animation to another. I also added other details like adjusting the animation playback speed based on the physical movement speed making everything feel more realistic.
While working on locomotion, the animations didn’t look too good because I was simply playing one animation at a given time so I added support for separating the upper and lower body using bone masks, which allows different parts of the character to be animated independently. After that things started to look better but the animations that I had added on the model weren’t good so I spent a lot of time finding and adding more and better animations to the model. One of the changes I made with the new animations was combining multiple idle animations together instead of having the character constantly repeat the same idle pose making the character feel alive when idle.
After that I moved on to the character’s vertical movement. I connected the fall, jump, and land animations to the character state system. The animator now plays the animations based on whether the character is jumping, falling, or landing based on the physics state rather than input alone. I also added separate jump animations for jumping while standing still and jumping while moving, so the animations look good.
The landing animation required more work since it didn’t look polished so I added landing detection based on things like fall height and fall speed so that small steps don’t trigger a landing animation. And finally I added a rolling animation for falls from high places. This took quite a while to get working and it still isn’t perfect but I am working on it.
At this point the character’s animations are pretty much almost complete. Next I want to continue improving the animation system by adding animations for crouching and adding transition animations like idle to walk, etc and also finalizing the roll animation. And after that I want to start making stuff react to the environment.

I continued working on the character controller by moving into the visual side of the project and integrating a proper player model. I added a new character model and tuned its scale and positioning so that it correctly matches the physics body. I also added an asset loading system and a basic loading screen so that the character and assets in the future can be loaded before the game starts.
When I was working on the project I felt that everything looked weird and that was because I forgot to add shadows. So I added them and then spent quite a bit of time improving the lighting and shadow quality. I also added tone mapping to make the scene look better. While testing the character model, I ran into shadow acne and something called peter panning, so I spent some time tuning the shadow bias and normal bias to get a balance between the two.
I also noticed that the character and small vertical movement/jitter while walking on flat ground probably because of the physics adjusting it’s position. I added direction Y smoothing to the character model so that small physics corrections don’t make the character appear to jitter while moving. Also the camera movement wasn’t good so to make it better I added vertical smoothing to it.
Previously, the shadow camera covered a fixed area of the world which made stuff not in the coverage area have no shadows so I improved the directional shadow by making the shadow coverage follow the player. And the final change was working on the model’s materials since the character looked overly metallic and glossy in Three.js even though it looked normal in Blender. Turns out the materials had an incorrect metallic value, so I corrected that and adjusted the roughness to make everything look good.
Next, I’ll finally start building the character state system and start moving toward animations.

I continued working on the character controller, by adding crouching now allowing the player to move underneath surfaces and other obstacles. Getting this working correctly took a lot more time than I expected because changing the character’s collider size introduced several physics related bugs like the character getting stuck or incorrectly standing up when there wasn’t enough room above, as well as making sure crouching and standing transitions behaved correctly which took a lot of time to fix and get right. I also added an unstuck mechanism to help recover the character if they end up in a weird position.
I then cleaned up the code making it easier for me to add other features I have planned. Next, I’ll build on the character state system and start moving toward the animations of the controller.

I continued improving the basic character controller and worked on turning into a reusable system. I separated character movement, physics, and the visual model into their own components and refactored input into a dedicated character input object so movement data can be passed through the system pretty simply and made it way easier to add other inputs in the future.
I added acceleration and deceleration, sprinting, and jumping, while also improving the existing movement to make the controller feel better and everything less floaty. I also fixed some movement related bugs like temporarily sticking to ceilings when jumping.
I also added the entire character state system. I created a state tracker that derives useful information from the character’s movement and physics, such as velocity, movement direction, speed, grounded/airborne state, landing, jumping, slopes, sliding, wall collisions, ceiling collisions, fall height among many more.
This is pretty much the foundation for the state machine and animation system by instead of making animations directly tied to physics or movement code they can be made to react to the character’s current state. This pretty much make it possible to build stuff like strafing blend trees, jump/fall transitions, landing reactions, and eventually more environment aware animations easily.
Next, I’ll start building crouch functionality before adding animation stuff.

I built the very basic version of the character controller. I implemented a basic kinematic character controller with gravity, collision handling, slope detection, sliding, stair stepping, and snap to ground behavior. I then added keyboard input and a very basic third person camera so the character can at least be properly controlled for testing.
I also fixed some bugs one of which was movement jitter and added stuff to test the controller and also added a physics debug visualizer. I also created config files so that values can easily be tuned and changed and to avoid hard coding stuff in the code.
The foundation of the character controller is mostly in place. Next, I’ll work on improving the movement by adding acceleration and jumping. After the movement feels good, I’ll add a real character model, its animations and a state machine.

Set up the project’s basic architecture by creating Vite app using TypeScript, initializing the Git repository, integrating Three.js before modularizing my code and making it clean by separating the scene, camera, renderer, and game loop into dedicated classes. I also added a custom time system with delta/elapsed time tracking for like animation stuff and a fixed timestep for physics stuff, then integrated Rapier and built a basic physics world with gravity, collisions, and a few test bodies. Next, I’ll start building the basic character controller which lays the foundation for all the work to come.