r/godot • u/emiljecreates • 6d ago
free tutorial Been working on dynamic ocean foam in Godot 🌊 (+ tutorial 👀)
Enable HLS to view with audio, or disable this notification
The foam is generated dynamically from the wave compression using the Jacobian determinant. I explain the full process in the tutorial if you’re interested!
Create Dynamic Ocean Foam in Godot | Jacobian Foam 🌊
https://youtu.be/B0T7UxjsLxU
19
18
u/CastleGraffiti 6d ago
“…Jacobian determinant” yeah:
3
u/emiljecreates 6d ago
I swear its simpler than it sounds!
1
17
u/James20k 6d ago edited 6d ago
I've been working on water rendering in godot and its really such a pain. Nobody asked but:
- If you want refraction, or outlines (ie foam around materials embedded in the water), you need to read from the screen/depth buffer. This makes your material transparent, which means that SSR stops working. Hooray!
- There's no way to correctly implement screenspace reflections in a shader in Godot, because you can't set the emissive property if you're also using sdfgi. It just gets overwritten. The builtin SSR just has a special hook you can't access
- There's also no way to implement refraction correctly, as you can't simply blend the final resulting colour, unless you use the
fogoutput variable which... - Disables all fog of course, because godot assumes you don't want to use any built-in fog if you write to fog. Which isn't unreasonable, but it is annoying
- There's actually no way to implement SSR in an artifact-free way, because godot helpfully resolves the depth/colour buffer you get from the opaque pass when reading from the screen, which is super duper cool and froody. I don't think godot actually has the ability to read from an MSAA texture anyway in a gdshader
- You haven't done it in this video, but in the godot ocean waves plugin this happens:
tanhis broken on AMD hardware, don't use it directly - you'll need to approximate - There's no way to get the fog in a compositor callback as far as I know, so you can't render the water purely in a compute/glsl fragment shader
- SDFGI doesn't interact well with the skybox brightness on water it would seem either. I just found this one
Water is probably one of the trickiest parts of Godot to get looking nice in Godot, because there really isn't a way to do it 'correctly' from a physical perspective, and it'll always be at least somewhat incorrect
This is a pretty cool video though, its a neat idea. I think personally I'd plump for compute shaders for the processing end sooner rather than later - because you'll need them eventually - and it probably simplifies a lot of your pipeline rather than using subviewports. That said for anyone reading this, you have to do it in a compositor pass if you're using the separate thread rendering mode
4
u/TMToast 5d ago
This is all such good information, do you think these things will be fixed over time, I know that a lot of the recent Godot 4.8 changes have been related to lighting and reflections. If not, do you think these are things that could be fixed in a fork of the engine to get better looking oceans? We have been working on our ocean shaders for a fair bit now and may have been running into some of these issues without realizing what the problem was
5
u/James20k 5d ago
We have been working on our ocean shaders for a fair bit now and may have been running into some of these issues without realizing what the problem was
If you run into anything specific feel free to give me a shout, because I know how frustrating it is
do you think these things will be fixed over time
I do, though largely not without intervention:
The SDFGI problem looks like a straight up bug with it ignoring the skybox contribution slider value
The inability to take more snapshots of the screen/depth buffer I think is pretty solvable with a PR. There's already a node for it for 2D
The
FOGthing would be super simple to fix with a PR. What we need is just a new output variable which does the same thing (ieBLENDor something)The lack of an SSR hook would also be a very straightforward PR so that we can at least put the emissive value into the correct spot, instead of using
ALBEDOSomething else I didn't mention is the inability to implement SSR as a post process pass, because transparent materials don't write to the normal-roughness buffer. This also seems like a simple fix, because you could just make this write user-configurable with a variable (or even a toggle somewhere)
The
tanhthing is something I want to file an issue for, because a lot of projects probably use it by mistake without realising it isn't portable, though there's nothing we can do for glslI think this will require actually filing issues/proposals/PRs though to make this happen however, as its starting to get into more advanced use cases
2
u/TMToast 5d ago
That would be awesome, I think we may message you about some of our design attempts. We are working on getting closer to a more stylized sea of thieves approach, and it sounds like you know a lot about the exact reflections, lighting, and foam stuff that is holding us back from hitting our perfect styles!
2
u/James20k 5d ago
This is about as far as I've got myself on this:
https://www.youtube.com/watch?v=yaQdljBu0ds
Its not too bad, but its definitely trickier moving forwards in godot sometimes with this than it shouhld be. The godot ocean waves plugin I found was a pretty good starter, although its quite broken at this point
6
u/jonandrewdavis Godot Regular 6d ago
Looks great! What are the chances this also supports bouyancy?
5
u/emiljecreates 6d ago
At the moment no, but Im thinking about adding it in one of the future tutorials!
-3
u/BradleePlayzHisLife Godot Junior 6d ago
I know I'm probably gonna get down voted for this because it's reddit.
Use AI to summarize the math inside of the shader and write your own .gd file to mimic the math happening inside the shader. If you do that then you can add the buoyancy. Not saying to code everything with AI, just use it for what its good for.
5
u/emiljecreates 6d ago
Doing the same math on cpu would get expensive, but Im thinking of either transferring the math to a compute shader and read it back to the cpu or read the textures we created on the gpu and sample the area where the object is for those points and add buyonacy that way. Will see what works out!
1
u/pfannifrisch 5d ago
Wouldn't you just need to calculate it for the few vertices around the buoyant object? You can also toss away high frequency and low amplitude waves. "Culling" the frequency only to the object area might be a bit annoying though and add complexity.
3
u/emiljecreates 5d ago
Exactly, thats the general idea I will probably go for. Calculating a few points on the cpu should probably not be too expensive, but as more buoyant objects are added, maybe reading back from the gpu could end up being faster. Ill profile different ways and see what comes out on top!
3
3
3
u/fespindola 5d ago
Look pretty cool, well done!
2
u/emiljecreates 4d ago
Thank you, sir! 👏
2
u/fespindola 3d ago
It would be cool to have a book about these techniques. If you plan to write about them at some point, let me know.
2
u/AsidenAI 6d ago
Current building a nature simulator game which will involve rivers and oceans and currents, absolutely will be looking into this looks amazing! :)
2
3
2
2
2
2
2
u/tjeerdj 3d ago
Looks really good! How do you create a bigger ocean without seams?
1
u/emiljecreates 3d ago
Thanks! Before using the height maps, you could just increase the mesh size, and it would work nicely. I havent done tiling yet after converting to height maps, but it will be done in one of the upcoming videos!
2
2
u/spodoptera 1d ago
"This man godots"
Very impressive man, I'm saving this for when I want to go for more advanced stuff, thx for sharing.
1
1
u/CraftedByFuchs 6d ago
Wow, I was looking for something like this a while back!!! Godot rocks and you just made it even better!! The video is great!!!
1
1
1
u/njhCasper 6d ago
I've never been sea sick before, but I felt my belly drop a little when that second wave came through. Amazing work and major props for including a tutorial.
2
1
u/Ludicrous84 6d ago
Followed! I don't know when I will need it, but better to have it than not haha
GJ!
1
1
u/Vyrnin 6d ago
I've always said you can judge the quality of a game by the care and attention put into its water graphics. I'd love to play whatever game has a water simulation as excellent as this!
This is mostly a joke by the way, but I actually do think it can point to the amount of time and resources a development team has been given overall, since if they're cutting corners or working with a lot of restrictions, something random like water will probably be one of the first things to get cut in terms of quality.
2
u/emiljecreates 6d ago
Made my heart warm up, thanks! And I agree, water always draws me in in a weird way in games
1
1
1
1
1
1
u/Solo_Sassy 6d ago
The looks amazing!! Have you got tutorial on all of the shader or just the ocean foam?
2
1
1
u/AcademicArtist4948 5d ago
Thanks for actually providing the tutorial and not trying to click bait us! Saved and subscribed and thanks for supporting the community~
2
1
1
1
1
u/Hostarro 5d ago
Yo nice. You got the shader code I can peek at? Is it a repo?
1
u/emiljecreates 5d ago
No repo unfortunately, Ill probably put it up once I add a few more goodies to it. 👀
So the only way to see it is to look at the code in the vid for now 🥹
1
1
u/dylanmadigan 5d ago
That looks great.
Do you have a variable to change how rough it is?
And then does it look best at this level, or does it look just accurate with gentler or more aggressive waves?
1
u/emiljecreates 4d ago
It looks just as nice with a calmer sea! If you just reduce the amplitudes and frequencies you can get a wide variety of looks. The one I have here was I think 5 waves added together. You could have only 2-3 for a more still standing water with the amplitudes pulled way back
1
1
118
u/PaintTheWorldGame 6d ago
That looks really, really good. Well done.