I had/have a lot fun playing with the erosion simulation I developed in three.js. It’s extremely satisfying to see a landscape being created in real-time.
But there were also some issues /artefacts that I just couldn’t get fixed. Three.js is an awesome library, but it is huge. If you want to dig into the “behind-the-screen” details, it’s easy to get lost. In fact, it’s impossible not to get lost. There is a lot of stuff happening that I didn’t understand
I had a chat with Piter Pasma about this and he mentioned he always wants to understand every little gritty detail about his code. That remark triggered something in me. I certainly didn’t understand everything, most webgl stuff only superficially and I had no idea how Three.s generated shadows, for instance.
So I set myself a new task: recreate the erosion simulation but without the use of external libraries. Vanilla js as they say.
Building a 3D webgl framework from scratch
Now, webgl is a pretty tricky. Luckily, there are some awesome sites with heaps of information:
This is an awesome site with very detailed information about how to do 3D graphics It’s for webgl1 but can easily be converted to webgl2. Everything you wanted to know about geometry, mesh, transformation matrices, camera and light etc. Very clear explanations.
https://www.toptal.com/javascript/3d-graphics-a-webgl-tutorial
Another one I strongly recommend:
https://webgl2fundamentals.org/
Now, it took me about 5 weeks to write the framework. Not full-time of course (I wish I had that time). Getting the displacement map to show was a big milestone
Did everything step-by-step so I now have a pretty good understanding of everything. Even understand how shadows can be generated. Pretty easy, once you know it.
And on Feb 10, 2022 I had the first results that resembled the results I had with the three.js code. Made me happy
