Vertex Animated Water - Advanced Materials - Episode 36

[@matheusreidopedaco]

This is a great video. I've been trying to make Gerstner Waves with shader graphs for so long. The wave itself is fine - I could do it on my own, but you saved my life with the normals!

[@dominikgomoka8541]

What a happy coincidence - I am starting my work on this topic right now :) I'll follow along with the future tutorials!

[@BenCloward]

Nice! I hope this helps!

[@PRodi_]

This tutorial is pure gold! - I also very much like that you start with the Unity example first. It made everything crystal clear! Thank you so much.

[@RichQuestionForACheapGirl]

You are simply amazing. I have been learning so much thanks to all your videos. Well explained, good progression. Thank you so much. I hope these videos are never taken down as this is hands down the best way to learn shaders that I have come across in my career.

[@miloszgierczak4806]

Wooo! I was waiting for it!! Great content as always!

[@robinj6997]

Thank you, I remember doing this in Unreal a while ago. I made a version in Godot this time: "shader_type spatial; // Gerstner wave uniform vec3 Direction1 = vec3(-0.2, 0.0, -0.7); uniform vec3 Direction2 = vec3(1.0, 0.0, 0.0); uniform vec3 Direction3 = vec3(-0.5, 0.0, 0.5); uniform float WaveLength1 = 4.5; uniform float WaveLength2 = 3.0; uniform float WaveLength3 = 1.8; uniform float WaveHeight1 = 0.07; uniform float WaveHeight2 = 0.05; uniform float WaveHeight3 = 0.04; uniform float Steepness1 = 0.3; uniform float Steepness2 = 0.3; uniform float Steepness3 = 0.4; uniform float TimeShift1 = 1.0; uniform float TimeShift2 = 1.0; uniform float TimeShift3 = 1.0; //Fragment uniform vec3 BaseColor : source_color = vec3(0.0,0.09,0.18); void GerstnerWave(vec3 WorldPosition, vec3 Dir, float Height, float Length, float Steepness, float TimeShift, out vec3 Offset, out vec3 Normal) { float PiLength = (2.0 * PI) / Length; float Speed = sqrt(PiLength * 9.8) * TIME * TimeShift; // world position float Position = dot(WorldPosition, Dir * PiLength) - Speed; float SinPos = sin(Position); float CosPos = cos(Position); // Steepness float WaveHeight = PiLength * Height; float ScaledSteep = Steepness / WaveHeight; vec3 Steep = ScaledSteep * Height * SinPos * Dir; // Normal vec2 NormXZ = (SinPos * WaveHeight * Dir).xz; Normal = normalize(vec3(NormXZ.x, 1.0 - CosPos * WaveHeight * ScaledSteep, NormXZ.y)); // Vertex offset Offset = CosPos * vec3(0.0, 1.0, 0.0) * Height - Steep; } void vertex() { vec3 Offset1, Normal1; vec3 Offset2, Normal2; vec3 Offset3, Normal3; GerstnerWave(VERTEX, normalize(Direction1), WaveHeight1, WaveLength1, Steepness1, TimeShift1, Offset1, Normal1); GerstnerWave(VERTEX, normalize(Direction2), WaveHeight2, WaveLength2, Steepness2, TimeShift2, Offset2, Normal2); GerstnerWave(VERTEX, normalize(Direction3), WaveHeight3, WaveLength3, Steepness3, TimeShift3, Offset3, Normal3); NORMAL = Normal1 + Normal2 + Normal3; VERTEX = Offset1 + Offset2 + Offset3 + VERTEX; } void fragment() { ALBEDO = BaseColor; }"

[@omid3098]

Thank you for these amazing tutorials. My only concern is that you know what calculations you need in order to achieve a certain effect. like when to add or multiply a Cos node instead of another one! Of course you know the math behind it and I don't :) It would be VERY helpful if you can show us how do you apply math formulas like from a paper or an article into instructions in shader. Do you use things like Desmos to visualize them and then convert them into shaders?

[@andyetnotwant]

if you're following along with this in unreal make sure your material function inputs match up with ben's or make sure you are plugging the correct numbers into yours or you may not see your mesh rendering and wonder why. also used tau for both sine and cosine period.

[@dominikgomoka8541]

I did some experimenting with your method and I have some input ;) I went with two sets of waves, basic large length set and another with like one fifth of length and smaller heght, then blended/added them together to imitate small wind gusts on large waves. I also discovered using prime numbers for wave lengths allows to avoid visible repetitions in the pattern, kind of usefull when you zoom out a bit :)

[@KIRKS]

For the user's of Unreal Engine 5. If you get the weird artifact bug (pink and black line) or (weird squares) this is because of the high values and the UE WPO bug. Or you have "Displacement" enabled in your "Default Config". To fix this, simply add a "Saturate" node to the last "multiply" node of the "Wave Steepness" logic, and before you subtract. Other than that this is a great Game-Ready ocean shader.

[@ledpill]

What do you mean by "you have "Displacement" enabled in your "Default Config""? I've added saturate node and it looks better but it still look like a grid with wide square lines moving along.

[@KIRKS]

@@ledpill You can enable displacement in your config file. If your unsure, don't pursue this. This all depends on your project as well.

[@chaosordeal294]

21:01 Unreal

[@dominikgomoka8541]

I have a question. I use distance fields (distance to nearest surface) and sine with time to make ripples bouncing off of the objects in contact with water plane - but I am having an issue with the normals, it seems the ripple only affects the height, I do not really know how to blend the normal of gerstner waves with the distance field ripples. Any tips on that? The tutorial is great, I already did a basic setup for my water and can push on with a project but would like to solve the ripples issue too ;)

[@BigFrankovski]

Yeah recalculating normals is what interest me as well.

[@mishafbx]

I'm 20 year old 3D artist I have been working in the gaming industry about 4 year due to my private life i'm just start the learning shaders and etc. right now I'have just started to watch "Introduction - HLSL Shader Creation 1 - HLSL Shader Fundamentals" and i see that that series recorded in 2006 while i was 3 year old :D i mean i have a lot different feeling to say but just want to say thank you so much i will watch your whole videos and do my best i promise 💚💚

[@Atl3m]

is the settings bound to a spesific plane size ?. i get strange results

[@pinsandneedles8562]

My material also is a little different, I have to use a really high number for the wavelength, else the space between the waves is too small and the normals are pixelated. I also have to use a multiplier after the Time node because mine are moving too fast. Don't know if using substrate changes things as I am using it.

[@SuperTuckerdude]

@@pinsandneedles8562 I think I was having the same problem. At 24:51 when he has the cosine node selected, he's changed the period value to be 6.283185 (2PI) which is the actual period value for cosine in a math formula. He did a more in depth, step-by-step explanation in Unreal in his gerstner wave video a few years ago

[@おおみみず]

In the scene where two BlendAngleCorrectedNormals are used after the 28th minute of the video, the error [SM5] Function BlendAngleCorrectedNormals: Cannot cast from smaller type float2 to larger type float3. appears. What could be the cause?

[@おおみみず]

Sorry, I confused Add and Append in the solved function part.

[@AntoniChujek]

Hi Ben, great job. Thank you! I have a question: is it possible to maintain a 2m wavelength but on a small Plane? I have a small (1x2 m) container of water that has quite thin walls. If I put a plane with this material into a container, with a long wave (which is what I care about), the plane goes beyond the container at the edges. Is there any possibility for the plane to not move on the edges (at the moment it is narrowing and elongating a lot, so I cannot fit it to a container with water, because either the water goes beyond the container when waving or it does not cover the entire container

[@AntoniChujek]

Problem solved. I used a mask on channel B for the offset from the gerstner_water function, then I created a vector3 for R, G I used zero and for B I used this mask from the offset and then entered the offset into the world possition.

[@dimitriskoutris6139]

Very helpful tutorial Ben! Love it so far as I experiment with it :) Would love your take on ghibli style trees and foliage if you ran out of topics to cover!

[@アントノフイワン]

I'd like to know about Ghibli-like trees more as well. I like the way this kind of trees are implemented in Genshin Impact. I tried to researching it's workflow, in my spare time. There are two things I don't understand well yet: 1. They are using depth fade blending to blend trees with terrain. Seems like doing this, they render the whole trunk geometry as an Alpha Blending Transparent object, which sounds not so good for performance and potentially buggy. I'd like to know if there can be any solutions to optimize it. I tried to use Dithering Blending, but it just looks worse. 2. I'd like to know more about the best practices of creating their stunning stylized tree canopy rimlight. It looks like they are doing it by custom post-processing shader. As a japanese speaker I tried to search for some info in the chinese segment of the internet and it seems like I am right. But I am not sure about the best practices to create a tree canopy mask pass. Also I'm not sure how to define an outline color according to tree type the best way. I'd be really happy if Ben don't mind to talk about it after he finish his awesome vertex shader tutorial series.

[@ethanwasme4307]

Hi... so what's the call with the water plug-in system? Is it worth trying to build upon epic's material?

[@meowinferalas]

Thank you so much for this series, I've already watched all of it and now I am implementing the Unity version of this shader and I have one question about 9:10 - is that "multiplication again by wave height" necessary? Assuming the initial wave sharpness calculation begins with multiplication of WaveHeight 'H' with the WaveLength 'L' giving product 'HL', we then divide PeakSharpness 'Ps' by that which gives us Ps/HL, when we multiply again by WaveHeight doesnt that give us PsH/HL is equal to Ps/L making the WaveHeight completely redundant in final wave sharpness calculation? What am I missing? 🦑 Thank you again for this series and all your knowledge sharing, it's all so cool ✨ PS. Ok, I see now, is it because this way we are saved one division less? Because that Ps/HL is required then for the Y component of the Normal calculation and it is faster to have an 'unnecessary' multiplication PsH/HL than to calculate a separate Ps/L value?

[@5daydreams]

Hey Ben! Is there any plans to work on water like this, but using fast fourier? Also - I feel like this is a similar approach to your previous water tutorials, minus the usage of tesselation, but I could be incorrect - anyways, great content as usual!

[@miolabel]

The waves are very sharp and directed sideways in UE5, no matter what I do. Does anyone know what the catch is?

[@bojandronjic4658]

Hi Ben.Can you explain to me the difference between normal input to the vertex and fragment stack. When I made the waves with the same method like you, I could not get good values for the normal (vertex normal input), so I had to do everything in the compute shader,store result in RenderTexture2D and sample this texture to the normal input of fragment stack, the only thing I noticed is that the fragment normal input uses tangent space,and vertex normal input uses object space(I know that fragment shader calculate pixels and vertex shader calculate geometry).And what is the advantage and what is the disadvantage of calculating the normal in both cases.

[@coreC..]

Would it be an optimisation if you do only scalar calculations instead of vector calculations? I mean: Get the position (a vector), then use only the (Unity) Y value, and calculate with that. Then later make it a vector again (0,calculated value,0).

[@Xuu-m6j]

what color u used?

[@Atl3m]

Maybe foam based on high point on the wave ,

[@keshavvats4226]

Hey Ben , Can you suggest some good books in 2024 to Learn Shader the Link in Your book recommendations are all quite old books are the technique on those still applicable ? Is there any new books that I can take a look at. I already Have Unity Shader Bible.

[@nutritionallittle4402]

UE4 has a 3DMAX plugin,"VertexAnimationTools"，If I want to use it in unity，How do I make a shadergraph?(I studied for a long time, but I couldn't make it! I hope the teacher can produce a tutorial!)

[@Atl3m]

Is there gonna be new add-ons to the old water material or is it identical to what we did years ago. ?

[@BenCloward]

That's a good question. I haven't decided exactly what I'll show yet. Anything in particular that you'd like to see?

[@Atl3m]

Im just curius if its a waste of time migrating and merging the old to the new . can be interesting having foam fresnel refraction outliner aka foam around objects , and dynamicly moving Beach foam@@BenCloward

[@itay7]

@@BenCloward UE got a node called DistanceToNearestSurface you can use as a world-space intersection mask for objects that are "in the water" (foam, ripples, WPO etc..). can you check out how to recreate this in Unity? BTW, to use this node you need to disable "Affect Distance Field Lighting" on the object that is using the water material in the world editor inspector so the water material won't "intersect" with itself and only with other objects

[@chaosordeal294]

There are at least a couple of more features in other videos now.

[@Atl3m]

@@chaosordeal294 is the foam and ripples video out now ?

[@JoeTheis]

Ben great video! You're on the shader graph team right? It would be nice for complex graphs like this if there were better ways to handle all the crisscrossing wires. Subgraphs can help in some cases, but aren't practical in all. Something like a "portal" or "tunnel" wire that allows the wire to cross the graph invisibly would be excellent! Maybe terminating them in a "wifi"-like symbol or something. I guess this is sort of like having named local variables. Anyway, thanks for the great video!

[@BenCloward]

Yes - we're working on that. It might take a while but it's coming.

[@JoeTheis]

@@BenCloward 🎉 wonderful to hear! Keep up the good work.

[@topraktunca1829]

I followed the video but ended with a pink blue grid artifacting wpo. I fixed it here are the things I done 1- Check if you mixed up the wave height and length values. 2-Make sine and cosine period values 2 pi. That is the mathematical sine and cosine. Unreal in original uses 1 which is not we want. I think Ben forgot to mention that in this video but he mentions in the old gerstner waves video. Thanks

[@mikaellarsen4646]

You're a champ Ben!

[@FateOfFools-o6h]

is this in unreal or unity?

[@BenCloward]

I show how to do it in both engines. The first half of the video is in Unity and the second half is in Unreal.

[@FateOfFools-o6h]

@@BenCloward ok

[@tbunreall]

This is good for learning purposes, but unreals water system is so great I can't see myself ever making it from scratch

[@viatorrr]

is anyone else having a problem with the material just not rendering?

[@FateOfFools-o6h]

this better run on mobile

[@BenCloward]

Mobile should be able to do this just fine, but you might need to use a lower poly mesh and/or reduce the number of gerstner wave instances.

[@eligijuspranskunas3509]

its amazing, but looks like jelly

[@BenCloward]

Take a look at the next three episodes to see the improvements.

[@Tryptefan]

Amazing video! I have 2 questions: 1. When would one use multiple scrolling normals maps vs gerstner waves...are they much different looking? 2. Is there a performant way to make ripples in response to another object (like a player walking through a puddle). Or is it always the costly method of using c# to write height values to a texture?

[@BenCloward]

I'm planning to use both techniques together. I use the Gerstner waves for the larger waves that move the verts around and then I use scrolling normal maps for the smaller ripples on the surface. I don't have a lot of experience settings up an interactive simulation. I've used that type of thing several times in previous projects, but I generally just use the system that's built into the engine for that rather than setting it up myself. I should set that as a goal - to learn how to do that.

[@Tryptefan]

@@BenCloward re: normal maps: that makes sense. I'm so excited to see how you do a simulation. I've been chasing this dragon forever!