So I Made A Water Shader In Godot 4 And It Was Quite Simple

[@Code_It_All]

PLEASE READ • KNOWN ISSUES: The refraction effect shown in this video is still an experiment, meaning sometimes if you put an object in front of the water you can see waves around it, the work around would be to lower the amplitude multiplier on _suv variable or just turning the effect off, it really depends on your game, however for like a small pond or surafce water this should work and I'll see if I can fix it in the second part. Your help would be appreciated.

[@atirutwattanamongkol8806]

Can you up the volume in post pls I just can't 😭😭

[@Code_It_All]

So sorry for the audio

[@l3andfriends]

have you found a fix to this yet?

[@user-og6hl6lv7p]

You need to create an occlusion mask to find objects that are in front of the water. Then you need to fade the edges of the mask, so when the refraction hits the edge of the mask the fade will reduce it's effects, so objects that are in front of the water plane are not distorted around it's edges.

[@whatsupbro3]

This video was incredible!! I've always struggled with understanding shaders, but this video actually thoroughly went through what each function and variable does. I loved this tutorial, i haven't seen anything else on youtube describe shaders in this coherent of an explanation. I'll be sticking around for part two!

[@meccanizer]

I highly recommend adding a second noise textures then blending it with the first one. Then scrolling it in the opposite direction to give the waves more life and to hide any warping. Looks much better then just using the single noise texture.

[@ColinFreeman-c4f]

yeah I was about to type this same piece of advice. Waves in general are always reflected off of the corners of the object containing the water. which creates and interference effect. scrolling two noises against each other mimics this.

[@ColinFreeman-c4f]

this same principle will give you much better water caustics as well.

[@jasoniswrongabouteverythin8230]

This video is awesome. A few months ago I spent a couple days trying to write a similar shader but it didn't really work out. This is great! And very easy to follow! You've earned a new subscriber

[@wukerplank]

Thank you! Looking forward to the depth part as well 😊

[@Jun-o3l6t]

The video is kinda quiet

[@999satyam]

Same. I thought it was only me.

[@Cunnah101]

what?

[@blarvinius]

Or the audio, you might say... 😊

[@Xenthera]

Plenty loud on my phone. Had to turn it down a bit

[@timisafe809]

Me when no adhd inducing video

[@FriendshipMech]

For a tutorial about something as complex as writing shaders you made this super easy and straightforward to understand. Great tutorial, I'm hoping you make that part two!

[@havocthehobbit]

This was great, I learnt alot. Please keep making videos , you have a style that works well

[@joejeojoe-l5k]

Thanks for such a clear and detailed tutorial!

[@studiomalaka]

I also sometimes keep putting an "f" after float numbers like you did at 5:47! :D

[@Code_It_All]

Lol

[@studiomalaka]

@@Code_It_Allyears spent developing with Unity can't just be forgotten without any issues I'm afraid 🤣

[@ThalisUmobi]

This is the most painless shader tutorial i've ever seen! So simple and direct, mostly using the editor features, no alien math involved, chef's kiss!!!

[@Code_It_All]

Thanks! Making it simple was the goal honestly even though it might not look the best shader out there...

[@yannickbovier3915]

Going to tinker with this right now ! Subscribed for the water depth part

[@lossynights]

Thanks a bunch for this, your explanations were very helpful and the demonstrations you did were also great.

[@anthonygg_]

You deserve 10000 times the subscribers. Good video.

[@Gureenu]

yo nice video man, just a thought please increase your sounds volume in the future just a bit and two tads other then that your video was amazing and you explain things pretty well

[@MelideProd]

Thank you so much, I actually understand better shader coding thanks to this video! Also I love the little details from Godot renamed to « best engine out there » to the water mesh node called « wata », really fun !

[@Mcs1v]

Eyyy, you just won a subscriber with that goldsrc reference (just kidding). Keep up the good work! Back to that known issues: "if you put an object in front of the water you can see waves around it" Just pass the depth buffer too with the screen space buffer and sample from it with the calculated suv coords. If the sampled depth is bigger than the depth from the vertex shader, just skip the screen texture from the final result. Its not the best approach, but its solves the weird artifacts with the front objects. The more advanced version: do a binary search between the original screen space UV and the calculated screen space UV to find the edge of the object and use lerp to the edge (its fill up the holes with a nice transition and the holes will be less noticeable)

[@Code_It_All]

Lol, thanks a lot. I played around with the depth buffer, and switched between calculated suv and original one, it kinda "works". Thanks for the tip man!

[@Benjamin_Thio70]

just coming from the other videos, well explained... LOVE IT~

[@KunyeeFilms]

besides the quiet video and the oily look to the aberration this was a rather good introduction to Shaders in Godot.

[@laujimmy9282]

Amazing tutorial, thank you

[@leo_1487]

Great video!

[@Code_It_All]

Thanks!

[@TheBendixSA]

the effect at 8:33 is called "Water Caustics" or just Caustics... not that many years ago it was all the rage, today it's taken for granted.

[@AlexanderPrussak]

TYSM, good learning. love the jazz music

[@Bread-qz3ht]

Amazing tutorial, really helped me tp understand shaders more

[@635574]

Static surface normal map is kinda ugly, if you want something that appears to move youd need to blend 2 noise patterns that are in motion, IDK the details.

[@Code_It_All]

I once did something similar with mix() function and switched between two noises with sine(TIME)

[@guilllexx]

Amazing content ! keep up the good work :)

[@Xenthera]

Just a little note, your specular highlights should be constantly changing. They’re just kind of spinning around in circles. Maybe animate the fractal noise texture?

[@sjfsr]

The gpu image, omg what a powerhouse. I think my first agp gpu was similar in size

[@venetiria]

one of the best godot tutorıals in youtube. seviliyorsun

[@jRsqILVOY]

The caustics illusion is amazing for how relatively simple it is (physical simulation is very complicated).

[@baq99]

Water highlights on the ocean floor are called caustics. Interesting stuff in ray tracing with caustics as they're incredibly difficult to simulate using rays. U and V in UV are literally X and Y in XY. Someone super clever decided to rename the axes for pixels just to confuse everyone and now we all have to write UV.x and UV.y which when you think about it is like saying XY.x and XY.y which makes no sense. Otherwise, this is a super cool video. I'm always on the lookout for new videos about water shaders and this is an excellent example. Could you do a video delving into the vertex shader next and explore something like Gerstner waves. Currently trying to export a surface approximation for a Gerstner wave algorithm for buoyancy (which is harder than you'd first imagine). I'm also trying to transition between beach waves and ocean waves as the shader detects shallow water. Also a nightmare. Great stuff though! I'm looking forward to more.

[@Code_It_All]

Thank you, yeah I had to approximate the caustics in a super simplified way that didn't require those stuff. As for the vertex waves I'm not sure if I can handle that yet lol, but I'm always on the lookout for new stuff...

[@baq99]

What you've produced is really good and you explained everything really well. Maybe go for a sin wave next as they're a bit easier than Gerstner waves? I think the second part of the video you referenced takes you through it. Either way keep at it boss! Great content!

[@TheRanguna]

I don't know godot, but a way to make the water "move" when using noise textures is to increase one (or multiple) parameters on the noise function. Usually this creates a moving effect on the noise.

[@Code_It_All]

You could do that in godot, and that would probably give you more unique waves 🤔

[@sturdyfool103]

If you’re trying to make it look better with your caustics, you should change your chromatic aberration’s intensity based off of the water’s surface normal

[@rerere1569]

Damn thank you so much, good stuff

[@Matrox473]

Nice video ! keep it up :)

[@oplayer9846]

Wow shaders look like magic to me

[@MikeMcRoberts]

Now make the water react to things in the water such as boats

[@ld2studio675]

Very interesting. Thank you for sharing

[@drawmaster77]

nice tutorial. I've been using Unity for a decade, considering making a switch to Godot..

[@garffild]

Great video! Thank you!

[@boduzapho]

good stuff but it does not scale up when you increase the planemesh size. I know there is a way to fix that but I am unsure how

[@kairu_b]

Nice vid!

[@osaid56]

indeed a treasure this is.

[@WiseNoodleOfficial]

990th sub, absolutely earned it good sir! Remember me in the future o7

[@Code_It_All]

I will, Thanks for the sub!

[@card_craft]

How does't thou learn shader like this? This is great

[@mad_circuits]

Nice. But You have to calculte the normal map after translating the UVs. It looks kinda weird to have the highlights squeezed over the surface.

[@Code_It_All]

This was my first attempt in making a water shader so yeah it's not perfect, but I'm reading more about shaders to hopefuly improve myself.

[@terrawest9500]

Thanks for this tutorial. I tried to figure out water ripples. (circles that goes and grows around an object interfering the water surface) but can't figure that out. Could you help me please?

[@Code_It_All]

You are so welcome! You probably need water simulation, I think there are some tutorials for godot on youtube.

[@LukeDupin]

I want subnautica water. The uneven surface is really engaging

[@dominobuilder100]

Nice video, but almost couldn't hear anything...

[@retrorimos5841]

Thank you

[@rosiethekitty8526]

i hav subscribed pls part 2

[@nowherebrain]

good video, but kinda quiet..really had to crank up my headphones.

[@SvenHeidemann-uo2yl]

Not Bad 👍

[@RussPainter8]

Seems good. But i couldn't bear the music.

[@cycomkid]

Good

[@kvdrr]

its called caustics

[@Code_It_All]

Hmm thanks for the info!

[@minnoxzmozzesmx8915]

audio too low

[@ayzhol9620]

Niiiiice

[@zherka_pill]

increase audio

[@jasonwilliams8730]

👍

[@bagboybrown]

Quiet AF. That's unfortunate, I was kinda interested in this.

[@CharleyDonar]

THANK YOU!

[@hldfgjsjbd]

Thumbnail is misleading, it doesn’t look even close. Also, that is not water, that’s some kind of jelly

[@Code_It_All]

The thumbnail was made using this water shader, adjust color slider untill you get rid of transparency, also there was some other light sources in my scene.

[@Darkstrawberry15]

@@Code_It_All As some other people have pointed out, the reason it looks like jelly instead of fluid is because the noise is warping but staying in the same shape and location. To give a better illusion of a liquid surface the noise itself should be animated instead of just the UVs.

[@simpson6700]

wow another perlin noise water tutorial...

[@ভোমরা]

godot

[@MerlasPaul]

yeah its easy to build shit, its hard to make it realistic :)

[@prathamreddyzindabad9176]

you earned a subscriber.