Please sign in to access this page

Ocean Simulation

Ocean Simulation

24 devlogs
43h 9m
•  Ship certified
Created by Draedon

A basic FFT ocean simulation built with WebGPU.

Timeline

Ship 1

1 payout of shell 945.0 shells

Draedon

23 days ago

Draedon Covers 24 devlogs and 43h 9m

Added horizontal displacement vectors! How the simulation worked before is that it calculates the height of every vertex in the mesh and moves them up and down accordingly, but you can see that it looks almost static. However, if we move all the vertices horizontally a little bit too, it looks far better. Normals still broken though.

Not much of an update this time. Just changed the skybox texture and updated the README to include all my references for the project. Normals are still broken because I haven't gotten around to fixing those yet. Unfortunately, I'm going to be busy for around two weeks so not much work (if any) will happen in that time.

Update attachment

Massive improvement boost and basic code clean up. This pushed my performance from around 30fps to >60fps. Honestly, I'm not sure how it was this much of an improvement. All I really did in terms for performance was implement workgroup sizes across all my compute shaders

Update attachment

Hacked in some half-broken normals according to various papers. At first glance, it seems to work fine, until you look into the vertex shader and see that the slope vector is multiplied by some arbitrary value of 20. Basically, the shape of the slopes in my texture holding them looks fine, but they're ridiculously small. Probably because in the final phase of the ifft, it normalises every value, dividing them by the square of the texture size. And my texture size? 512x512. So every value is smaller by a factor of 512*512=262144. Yeah. No idea how to fix that properly.

Update attachment

I can't believe it took me that long to find the bug. It wasn't in the wave spectra or the IFFT algorithm, which I spent hours inspecting, but the random number generator. And I should've fixed this ages ago, considering that my old height map wasn't complete nonsense, which would've happened if either of those were broken. Tessendorf's paper literally says that different random number distributions will result in different stylised waves, which hinted at my broken random number generator. And the bug was in my method of preventing division by 0.

The final step of the gaussian random number distribution was to return v/u, and my check for u was to set it to 0.0001 if its absolute value was less than that, which definitely skewed my result. The fix? Just discard it and try again if abs(u) is less than some threshold.

Now I can finally start coding the interesting things, like accurate normals, wave caustics, sea foam, subsurface scattering, and all the other pretty things I haven't gotten to yet

Update attachment

IFFT still not working, but I took a slight detour to put in some finite difference normals, which suck. I'll probably implement exact normals with more IFFTs and then fix the waves properly. Not sure if it's the IFFT algorithm which is broken (I swear it's correct but idk) or my wave spectra

Update attachment

Spent ages on the ifft algorithm, and it half works. Basically, it's giving some values (which kind of make sense but don't). Better than having it completely broken at least

Update attachment

Spent far too long implementing the ifft from Jerry Tessendorf's Simulating Ocean Water paper. And the funny thing is, it's still broken, I'm still using an idft instead of ifft, and I don't know what's wrong

Update attachment

Honestly, most of the maths is flying over my head. Simulating Ocean Water by Jerry Tessendorf isn't making much sense to me. It defines the Wave Spectrum as a function which takes in a 2d vector, but all the spectra I can find online (even the Phillips spectrum in the paper) just takes in a frequency. This is going to take me a lot of reading to figure out

Update attachment

Wasted hours trying to get an ifft algorithm...
All that hard work and all I have right now is a half-baked random number generator
Here we go...

Update attachment

Just a really quick settings tweak and loading screen. Made the ocean mesh 10x bigger without increasing the number of vertices, which didn't seem to affect the quality. Hopefully the other small tweaks made it looks a little bit more like an ocean. Fine-tuning the settings was a pain so I might make a little configuration panel sometime.

Update attachment

Skybox and Fresnel reflections implemented! Water now looks a lot better, but still looks like plastic/acrylic. Not quite sure how to fix that though. I wish I could have a skybox with a slightly brighter sky though

Update attachment

Did the code clean-up. Honestly surprised that it didn't take too long, and there were surprisingly few changes. Not complaining. But did implement a browser popup which would happen in any errors were thrown

Update attachment

Added a skybox to replace the boring black background! As much as I'd love to make it look even nicer with stuff like reflections of the skybox on the water, the code is such a mess from trying to hack together the skybox that I'll definitely have to spend an hour or so just cleaning it up.

Update attachment
Draedon Draedon about 2 months ago
Thank you Toby Walker!I think I will try and add wave caustics, sea foam, and all that jazz later. I hope it’s not too hard.
Toby Walker Toby Walker about 2 months ago
This looks really cool! will you add dynamic textures at some point? (like frothing near the top of wave)

Finally added specular highlights to the water! Instead of making it look better and more realistic, it just made it look even more like plastic. Maybe I'll turn down the shininess coefficient in the shader and apply Fresnel Reflections later.

Update attachment

Just some typical code clean-up and optimisation. Nothing much. But for some reason, the waves changed a little bit. Not catastrophic; just different. I wonder when I'll deal with the tiling issues. Not now, because there are more important things to do, like Specular Reflections and making the environment look nice.

Update attachment

Waves actually look okay now. Fixed the incorrect lighting direction and implemented a fBm (Fractional Brownian Motion) thing to the waves, which decreases how much influence the later waves have. This adds finer details to the waves and increasing the number of waves won't make the ocean look like Miller's Planet.

Lighting! Took long enough to get here. It was hard enough looking at flat colours on my screen and trying to figure out if it was working. Also, the purple is finally replaced with a more ocean-like colour, blue.

Update attachment

Just some general code clean-up. Most notable of which was actually splitting the shader into multiple .wgsl files and concatenating them at runtime. Honestly not sure why I didn't do this earlier, when the functionality was already built-in to the Shader class.

Update attachment

Got some basic wave moment! Currently it's using the Sum of Sines approximation proposed by GPU Gems 1, with 3 randomly generated waves. Without lighting, it's a bit hard to see the waves, but that will be fixed soon™

Subdivided the initial square. That's it. It will be used later though :)

Update attachment

I lied. Camera movement is NOT a silent update! Got some basic movement and camera rotation in place, which should make debugging incorrect meshes later on easier. And it's just cool being able to explore the world.

Added a basic perspective camera! No input handling yet, but that might be a silent update. Also changed the square colour to purple. Finally don't have to look at that ugly yellow!

Update attachment

Basic square rendering! Well, it's not actually a square because its size is dependent on the aspect ratio, but it's a start. Pretty much just a WebGPU boilerplate with a little bit of abstraction. Honestly, I'm not sure why I made the square yellow. Yellow sucks.

Update attachment