Ocean simulation

Hello everyone!

I made a small ocean simulation for a class project using Jerry Tessendorf’s FFT-based approach.

The source code is available here:

It is not as complete as @Evgeni_Popov ocean simulation (i reused the WebGPU FFT algorithm btw ^^), but I tried to make it as easy as possible to use and integrate in existing projects so maybe someone will find a use for it!

It supports transparency based on depth and environment reflections using a skybox cube map.

I also used tri-planar mapping to make it work on a sphere because everything is more interesting and complicated on a sphere :joy:

17 Likes

Kneel down and fold your hands! This is so beautiful!!! :heartpulse:

1 Like

Are you making me a knight? I swear to protect the widows, the orphans and BabylonJS :joy:

So be it and now stand up, Sir CrashMaster of Babylon!

1 Like

Impressive!

1 Like

And so began the holy crusade against ThreeJS

1 Like

We started this long ago. But it isn’t a crusade. It’s natural selection…We’re just better :rofl:

2 Likes

Superb!

1 Like

@CrashMaster Tweeted about it :wink:

2 Likes

Thank you! I did not expect this class project to go this far :blush:

1 Like

they are probably afraid of Babylon 7 upcoming release right now x)

1 Like

LOL. I bet you. I double bet you :joy:

1 Like

The blog post is amazing !!! well done !!!

1 Like

Thank you! I hope my teacher will think the same xD

1 Like

Tell them to connect to us if they disagree :smiley:

1 Like

Is there another version for WebGL2.0? :smiley:

1 Like

sure.

Water Shader Editor: 29.459420 (aaron-sp.github.io)

Ocean Wave Simulation (david.li)

WebGL Water (madebyevan.com)

The animations with webgl are incredibly fast, maybe I should take a deeper look! :slight_smile:

1 Like

I don’t plan to support WebGL sadly :smiling_face_with_tear:

The only real bottleneck here would be to implement the GPU FFT with only fragment shaders as compute shaders are a WebGPU only feature. Although some people did it in raw WebGL, I am not sure how that would translate to BabylonJS.

The rest of the spectrum calculations can be made with procedural textures instead of compute shaders and it would work just fine.

Here is another WebGL example to find inspiration:

2 Likes

Super cool!

1 Like