GithubHelp home page GithubHelp logo

lanlou123 / webgl-erosion Goto Github PK

View Code? Open in Web Editor NEW
222.0 222.0 29.0 978.43 MB

Interactive Erosion simulation in Web Browser

Home Page: https://lanlou123.github.io/Webgl-Erosion/

License: MIT License

HTML 0.21% TypeScript 61.80% GLSL 37.70% JavaScript 0.29%
erosion erosion-sim fluid-dynamics fluid-simulation gpu-programming terrain

webgl-erosion's Issues

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.

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!

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?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.