How to create a shallow underwater scene?

Hi there, I just finished Discover Three JS and I want to try to contruct a shallow underwater scene I have in mind for an app I want to create. The scene is similar to what can be seen in this video minus the fish (https://youtu.be/QPGbkjrdD_s?si=liQuhL3Qg6k868Ie).

The big questions I have right now are:

Can I make the creek floor one big mesh or will having a mesh for each rock be fine? Can I programatically create each random rock with boundaries on dimensions?

How do I handle the caustics of the water’s surface on the rocks? Can this be dynamic or will it be too expensive?

This reminds of one ancient WebGL demo by Evan Wallace. I saw it for the first time some 10 years ago and it still amazes me. You can move the ball to make ripples in real time.

https://madebyevan.com/webgl-water/

image

3 Likes

Hi!
Maybe these topics will be helpful somehow :thinking: :

1 Like

Oh wow, I remember seeing this when I was in college around 2015! Yeah the refraction would be something I’m aiming for. Gonna have to take it one step at a time. Outside of the caustics not much else would be moving in the scene.

1 Like