Waterways!

This project started out as an attempt to recreate the effect outlined in this video based of this reddit post.
However, it quickly became one of my favorite projects. The implementation I came up with used a Compute Shaders. Being the first time I worked with them was exciting and terrifying.

Check out the demo(Windows) here: Link

I started with a height map as the video progressed. I used Perlin Noise in octaves to get organic-looking islands and added a small function to help isolate the noise generation to the center of the screen.

A visually captivating island-like landform is created by applying discrete colors over sets of value ranges of the height map. This versatile technique highlights the distinct features of beaches, grasslands, and mountains and gives the landmass shapes an organic look with well-defined detail in interesting areas. Most importantly, it empowers you to create diverse and unique terrains, fostering creativity and innovation in your projects.  

Using the height values, an unlit shader is employed to "ray march" through the texture, a key step in the technique. The shader is significantly enhanced with a sun's position, a crucial vector direction that guides and dictates the ray marching process. Depending on conditions, rays either "escape" the landmass boundaries concerning the simulated vertical direction or intersect with the height values in the direction of the ray march, creating a lit or in-shadow region of the landmass. A shadow mask is combined with the colored stage to make a ray-marched 3D-looking island.

Another feature I wanted to add was waves periodically crashing into the beach. In a compute shader kernel, I defined an area that would circumvent the landmass and provide a mask that would contain information about the nearest shore point, a vector pointing to it, and the magnitude of that vector. This mask (I love how pretty vector fields look) allows another shader to calculate periodic values that can be used to compute waves whose thickness, speed, and coherence can be controlled at runtime. Although visually appealing, the initial stage of these waves lacked a natural feel. I used another higher frequency, higher scale layer of noise to add some offsets into the mask values. Incorporating these noise values into the waves' shader provided a satisfying wave motion, resulting in a final terrain that is not just visually appealing but also deeply satisfying.

Adding some simple noise-based clouds that pan and scroll over time results in this

*inserting non-static result here*

While working on some optimizations, I will be smug that all the real-time processes run within 2ms and at ~500fps. HEHE
Unfortunately, the WebGL platform did not support compute shaders at the time of development, and I am facing some issues with packaging them and I have a ton of problems trying to convert the shaders to be compatible with WebGPU.
I will have a browser version running soon. In the meantime please check out the windows demo here!