lanlou123 / webgl-erosion

Interactive Erosion simulation in Web Browser

Terrain erosion sandbox in WebGl

controls :

• press keyboard c to do terrain editions with brush, editions include : add/subtract for water and hight map for now, you can also adjust size of brush
• press keyboard r to place permanent water source. (note : 1 . press r again to remove permanent water source, 2 . after it's placed you can see a red circle marking the location, 3 . the size and strength of permanent water is equal to the brush size and strength the moment permanent water source is placed)
• press button Start/Resume to the right top corner to start or resume the erosion sim
• press button Pause to pause the simulation
• press button Reset to reset simulation and start with a new randomly generated base terrain
• use WaterTrabsparancy slider to control alpha of water
• use EvaporationDegree slider to control anomunt of evaporation you want each simulation step
• use Kc slider to control Kc (erosion capacity constant)
• use Ks slider to control Ks (erosion dissolvating constant)
• use Kd slider to control Kc (erosion deposition constant)
• use the dropdown to check the debug views
• press right mouse button to rotate camera, press left mouse button to translate camera, use middle mouse to scale...

PLAY LIVE (Chrome Recommended)

Demo Video showing sandbox feature

Note : MacOS currently unsupported, Recommended GPU is GTX 1060 and above

update 12/8/2021 :

• Algorithm update/fix : added basic(semi-lagrangian) advection for velocity field generation, you can change magnitude of it under "Erosion Parameters" -> "VelocityAdvectionMag", this means that momentum is possible for water, we can have larger/better scale meandering/delta effects

update 10/1/2021 :

• Algorithm update/fix : now erosion detail will be more accurate as I've choosen to disregard small water body's contribution to sediment advection, it used to create noises in sediment result because when water volume goes below numerical limitation of the sim, velocity will be contributing the same to advection regardless of water size...

update 9/24/2021 :

• Added option to change simulation resolution

update 7/11/2021 :

• permanent water source is added, you can pressed r to place it, see controls for details
• added heatmeap for velocity magnitude in debug view, mapping color goes from blue to green then to red as the velocity size increases
• added MacCormack advection scheme for sediment advection, resulting in less numerical diffusion (referencing : ShaderX7 Advanced Rendering Techniques - starting page 207), you can find and toggle it on/off under erosionParameters in gui

some screenshots

• flow map and results after adding velocity advection, this will make sure water have momentum transfered from previous frame, making it more persistent and easier to form ravine/valley
  

• velocity advection also enables better delta/flood plain :

• permanent water in a river vally

• river vally dries up after some erosion

• alluvial fan (or at least a similar one) formed at the mountain exit

sediments advection in action

see detail.md for implementation details

Future Plans:

• Image(height map) I/O
• muti-layered(rock/sand/etc) erosion
• PBR
• adaptive simulation utilizing quadtree(or just tiles) for sim optimization
• Depth upsampling/downsampling for volumetric rendering optimization
• Better GUI & Visulization
• Terrain features like instaced tree placements
• other postprocessing effects (ray marched cloud for example, since ray marched Mie scattering is done, cloud should be fairly simple to work based on it)
• Biomes
• Eventual goal : Erosion based games, "FROM DUST" would be a good example

limitations are there however for grid based method

• mass conservation of sediment is not guranteed

Reference

• Fast Hydraulic Erosion Simulation and Visualization on GPU
• Interactive Terrain Modeling Using Hydraulic Erosion
• Volumetric Lights for Unity 5
• ShaderX7 Advanced Rendering Techniques : starting page 207

webgl-erosion's Issues

Keyboard and GUI Don't Work?

Hello! This project looks amazing!

I'm trying to get the demo to work in order to share it with some learners at school, but none of the controls seem to work as documented. I made a small screen recording, I'm clicking on the terrain, pressing c on the keyboard, clicking "ResetTerrain"...

Screen.Recording.2021-10-10.at.10.51.29.AM.mov

Nothing seems to happen. And no errors in the console. What am I missing?

This is in Chrome 94 on macOS 11.6

Thank you!

Heightmap import \ export.

An option to import \ export a heightmap will be nice if you find the time.
Thank you.

inverse erosion

I am very impressed by the simulator, I arrived here looking for a simulator capable of going back in time by estimating a reconstruction of the state of a territory in the past, considering erosion as the only variable. Do you know if there are researches in this direction?

Rainfall modelling

Rainfall modelling appears to be present in an older version (as shown in this video https://www.youtube.com/watch?v=_8y9peDmtwg) but seems to have been removed.

Could this be re-implemented, and what challenges are there in doing so?

Axis aligning problem + sediment transport capacity issue

Hi, I found your code very useful for checking my own implementation of the Mei 2007 paper. In the process of implementing my own code I discovered that there are some problems with the original paper. You may find that the solutions I found will significantly improve the erosion results.

The first problem is with the axis alignment of the erosion features. This is caused primarily by the Mei paper ignoring the diagonal connections between cells, unlike the original O'brien paper from 1995. This makes it harder for fluid to move diagonally or other non-axis aligned directions. So fluid tends to flow in axis aligned directions when not impeded. You can easily add the diagonal connections by calculating 8 flux values instead of 4, using a similar approach to the axis aligned ones. To get the velocity you then add the diagonal ones to both of the existing X, Y components with a sqrt(2)/2 multiplier. I found that doing diagonal fluid flow completely eliminated any visible axis alignment of erosion features.

The second problem with the Mei paper is that they have a bad model of sediment transport capacity. They only include the slope and velocity in the calculation, but ignore the very important factor of fluid depth. In fact, the paper they cite for their sediment transport equation actually does include the depth, in the form of total flow q, which is equal to velocity multiplied with depth. I guess it is a mistake? By increasing transport capacity with depth, it creates a feedback loop where more erosion occurs in places with more fluid, which causes concentration of fluid and more erosion. This produces erosion structures like ravines and rivers much more easily than with the default equation. The new equation is just multiplied by depth (with a change in the capacity constant to compensate).

I think you can easily incorporate these changes, particularly the second one, which has a large positive impact on the quality of the results. The 8-way flux is not hard either, I implemented it just now in about 2 hours.

You can see the very nice results of these changes in the attached image, generated in about 3 seconds on 1 CPU thread.