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

แชร์
ฝัง
  • เผยแพร่เมื่อ 9 ก.พ. 2025
  • Making water in godot 4 is actually much simpler than you think, making it realistic, lighting and whatelese is taught in this tutorial.
    • 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 fine.
    GDQuest's channel: ‪@Gdquest‬
    You'll learn about normal maps, shaders, textures, noise, vertex shaders, fragment shaders, even if you're just starting oit on godot.
    you can use this in your games or projects ( credit is appreciated ) for horror games, fps games, shooters, adventure, 3d and even 2d games.
    Things We'll use in this shader:
    ALBEDO
    NORMAL MAP
    ROUGHNESS
    NORMAL
    chromatic abberation
    UV offseting
    UV scaling
    Check out my previous project ( Realistic Horror FlashLight ) :
    • How To Make A Realisti...
    Getting Started In Godot ?
    check this out:
    • How To Make A Simple F...
    original godot logo in the thumbnail by Andrea Calabro, license (CC BY 4.0 International): creativecommon...
    #realism #realistic #fps #godot #game #gameplay #realistic #lighting
    #water #shader #programming #gdscript #tutorial #howto

ความคิดเห็น • 97

  • @Code_It_All
    @Code_It_All  11 หลายเดือนก่อน +37

    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
      @atirutwattanamongkol8806 11 หลายเดือนก่อน +2

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

    • @Code_It_All
      @Code_It_All  11 หลายเดือนก่อน

      So sorry for the audio

    • @l3andfriends
      @l3andfriends 7 หลายเดือนก่อน

      have you found a fix to this yet?

    • @user-og6hl6lv7p
      @user-og6hl6lv7p 4 หลายเดือนก่อน

      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.

  • @joejeojoe-l5k
    @joejeojoe-l5k หลายเดือนก่อน +1

    Thanks for such a clear and detailed tutorial!

  • @meccanizer
    @meccanizer 11 หลายเดือนก่อน +26

    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
      @ColinFreeman-c4f 11 หลายเดือนก่อน +2

      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
      @ColinFreeman-c4f 11 หลายเดือนก่อน +2

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

  • @whatsupbro3
    @whatsupbro3 11 หลายเดือนก่อน +7

    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!

  • @studiomalaka
    @studiomalaka 11 หลายเดือนก่อน +4

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

    • @Code_It_All
      @Code_It_All  11 หลายเดือนก่อน +1

      Lol

    • @studiomalaka
      @studiomalaka 11 หลายเดือนก่อน

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

  • @Jun-o3l6t
    @Jun-o3l6t 11 หลายเดือนก่อน +98

    The video is kinda quiet

    • @999satyam
      @999satyam 11 หลายเดือนก่อน +2

      Same. I thought it was only me.

    • @Cunnah101
      @Cunnah101 11 หลายเดือนก่อน +9

      what?

    • @blarvinius
      @blarvinius 11 หลายเดือนก่อน +2

      Or the audio, you might say... 😊

    • @Xenthera
      @Xenthera 11 หลายเดือนก่อน +3

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

    • @timisafe809
      @timisafe809 11 หลายเดือนก่อน +6

      Me when no adhd inducing video

  • @wukerplank
    @wukerplank 11 หลายเดือนก่อน +9

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

  • @jasoniswrongabouteverythin8230
    @jasoniswrongabouteverythin8230 11 หลายเดือนก่อน +3

    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

  • @ThalisUmobi
    @ThalisUmobi 9 หลายเดือนก่อน

    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
      @Code_It_All  9 หลายเดือนก่อน

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

  • @havocthehobbit
    @havocthehobbit 11 หลายเดือนก่อน +1

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

  • @yannickbovier3915
    @yannickbovier3915 11 หลายเดือนก่อน

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

  • @TheBendixSA
    @TheBendixSA 8 หลายเดือนก่อน +1

    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.

  • @FriendshipMech
    @FriendshipMech 11 หลายเดือนก่อน +11

    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!

  • @MikeMcRoberts
    @MikeMcRoberts 11 หลายเดือนก่อน +1

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

  • @lossynights
    @lossynights 11 หลายเดือนก่อน

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

  • @Gureenu
    @Gureenu 11 หลายเดือนก่อน

    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

  • @laujimmy9282
    @laujimmy9282 4 หลายเดือนก่อน

    Amazing tutorial, thank you

  • @KunyeeFilms
    @KunyeeFilms 9 หลายเดือนก่อน

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

  • @Mcs1v
    @Mcs1v 11 หลายเดือนก่อน +1

    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
      @Code_It_All  11 หลายเดือนก่อน +1

      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!

  • @AlexanderPrussak
    @AlexanderPrussak 11 หลายเดือนก่อน

    TYSM, good learning. love the jazz music

  • @CharleyDonar
    @CharleyDonar 5 หลายเดือนก่อน

    THANK YOU!

  • @Benjamin_Thio70
    @Benjamin_Thio70 11 หลายเดือนก่อน

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

  • @Bread-qz3ht
    @Bread-qz3ht 11 หลายเดือนก่อน

    Amazing tutorial, really helped me tp understand shaders more

  • @635574
    @635574 11 หลายเดือนก่อน +8

    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
      @Code_It_All  11 หลายเดือนก่อน +2

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

  • @leo_1487
    @leo_1487 11 หลายเดือนก่อน +2

    Great video!

    • @Code_It_All
      @Code_It_All  11 หลายเดือนก่อน

      Thanks!

  • @anthonygg_
    @anthonygg_ 11 หลายเดือนก่อน

    You deserve 10000 times the subscribers. Good video.

  • @baq99
    @baq99 9 หลายเดือนก่อน +1

    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
      @Code_It_All  9 หลายเดือนก่อน +1

      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
      @baq99 9 หลายเดือนก่อน

      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!

  • @jRsqILVOY
    @jRsqILVOY 8 หลายเดือนก่อน

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

  • @guilllexx
    @guilllexx 11 หลายเดือนก่อน

    Amazing content ! keep up the good work :)

  • @TheRanguna
    @TheRanguna 11 หลายเดือนก่อน

    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
      @Code_It_All  11 หลายเดือนก่อน +1

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

  • @oplayer9846
    @oplayer9846 11 หลายเดือนก่อน

    Wow shaders look like magic to me

  • @Xenthera
    @Xenthera 11 หลายเดือนก่อน +2

    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?

  • @boduzapho
    @boduzapho 10 หลายเดือนก่อน

    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

  • @bolthrower
    @bolthrower 11 หลายเดือนก่อน

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

  • @sjfsr
    @sjfsr 5 หลายเดือนก่อน

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

  • @MelideProd
    @MelideProd 10 หลายเดือนก่อน

    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 !

  • @kairu_b
    @kairu_b 11 หลายเดือนก่อน

    Nice vid!

  • @ld2studio675
    @ld2studio675 11 หลายเดือนก่อน

    Very interesting. Thank you for sharing

  • @sturdyfool103
    @sturdyfool103 11 หลายเดือนก่อน

    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

  • @osaid56
    @osaid56 11 หลายเดือนก่อน

    indeed a treasure this is.

  • @rerere1569
    @rerere1569 10 หลายเดือนก่อน

    Damn thank you so much, good stuff

  • @terrawest9500
    @terrawest9500 11 หลายเดือนก่อน

    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
      @Code_It_All  11 หลายเดือนก่อน

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

  • @Matrox473
    @Matrox473 11 หลายเดือนก่อน

    Nice video ! keep it up :)

  • @drawmaster77
    @drawmaster77 11 หลายเดือนก่อน +1

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

  • @card_craft
    @card_craft 6 หลายเดือนก่อน

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

  • @dominobuilder100
    @dominobuilder100 8 หลายเดือนก่อน +1

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

  • @garffild
    @garffild 11 หลายเดือนก่อน

    Great video! Thank you!

  • @LukeDupin
    @LukeDupin 11 หลายเดือนก่อน

    I want subnautica water. The uneven surface is really engaging

  • @prathamreddyzindabad9176
    @prathamreddyzindabad9176 11 หลายเดือนก่อน +1

    you earned a subscriber.

  • @mad_circuits
    @mad_circuits 11 หลายเดือนก่อน

    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
      @Code_It_All  11 หลายเดือนก่อน

      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.

  • @WiseNoodleOfficial
    @WiseNoodleOfficial 11 หลายเดือนก่อน

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

    • @Code_It_All
      @Code_It_All  11 หลายเดือนก่อน +1

      I will,
      Thanks for the sub!

  • @retrorimos5841
    @retrorimos5841 11 หลายเดือนก่อน

    Thank you

  • @RussPainter8
    @RussPainter8 11 หลายเดือนก่อน

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

  • @rosiethekitty8526
    @rosiethekitty8526 11 หลายเดือนก่อน

    i hav subscribed pls part 2

  • @nowherebrain
    @nowherebrain 11 หลายเดือนก่อน

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

  • @SvenHeidemann-uo2yl
    @SvenHeidemann-uo2yl 11 หลายเดือนก่อน

    Not Bad 👍

  • @kvdrr
    @kvdrr 11 หลายเดือนก่อน

    its called caustics

    • @Code_It_All
      @Code_It_All  11 หลายเดือนก่อน

      Hmm thanks for the info!

  • @cycomkid
    @cycomkid 10 หลายเดือนก่อน

    Good

  • @minnoxzmozzesmx8915
    @minnoxzmozzesmx8915 11 หลายเดือนก่อน

    audio too low

  • @ayzhol9620
    @ayzhol9620 6 หลายเดือนก่อน

    Niiiiice

  • @jasonwilliams8730
    @jasonwilliams8730 11 หลายเดือนก่อน

    👍

  • @zherka_pill
    @zherka_pill 11 หลายเดือนก่อน

    increase audio

  • @bagboybrown
    @bagboybrown 11 หลายเดือนก่อน

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

  • @simpson6700
    @simpson6700 11 หลายเดือนก่อน

    wow another perlin noise water tutorial...

  • @ভোমরা
    @ভোমরা 11 หลายเดือนก่อน

    godot

  • @hldfgjsjbd
    @hldfgjsjbd 11 หลายเดือนก่อน

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

    • @Code_It_All
      @Code_It_All  11 หลายเดือนก่อน +1

      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
      @Darkstrawberry15 11 หลายเดือนก่อน

      @@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.

  • @MerlasPaul
    @MerlasPaul 11 หลายเดือนก่อน

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