your first water shader

Поделиться
HTML-код
  • Опубликовано: 1 янв 2025

Комментарии • 227

  • @StylizedStation
    @StylizedStation  2 года назад +72

    I've revamped my Patreon so it doesn't suck now! Now the monthly bonus videos are all available for $5 instead of $25. I'm going to be doing at least one bonus video tutorial every month, so if you're more serious about game art or if you just want to support the channel, you can do that in one easy tier. patreon.com/stylizedstation
    Lots more fun videos planned for the future. Keep creating!

    • @abysmalodin
      @abysmalodin 2 года назад

      Is the content different then 2 stylized station courses? Just bought the last one yesterday XD

    • @StylizedStation
      @StylizedStation  2 года назад +1

      @@abysmalodin yes there are different projects

    • @orakogamez
      @orakogamez 2 года назад

      How they create elements like artifact and there advantages for characters and how to do vaporize and electro+water some like that can you explain that to us by details

    • @oscarrivas5851
      @oscarrivas5851 2 года назад

      Lol

    • @DarkeyPro
      @DarkeyPro 2 года назад

      hey can you make sky shader heres a gdc for it :ruclips.net/video/-JFyAdI_rO8/видео.html

  • @bdenix1997
    @bdenix1997 2 года назад +227

    making "still" water is maybe the easiest thing. but making a dynamic water with all those waves, buoyancy, foam, ripples and wave interaction is one of the most complicated things in game industry.
    so making water and making water are the easiest and the hardest things at the same time.

    • @Markyparky56
      @Markyparky56 2 года назад +10

      Yeah, one's a simple mesh with a nice shader on it, the other is a simple mesh driven by compute shaders and enough math to make your eyes bleed. (I am of course referring to Jump Trajectory's FFT water simulation.)

    • @bdenix1997
      @bdenix1997 2 года назад +14

      @@Markyparky56 actually i tracked the actual shader down and its just a bunch of textures being feed into shader and sampling from them. If you pre compute and save them, you can have the same results. Just feed them into the shader. Which is going to be much more smoother than generating different textures every frame and then sending it. Maths bypassed. But yeah. Ill solve it one day. Im halfway there. Came a long way compared to like 6 months ago when i knew nothing about.

    • @Markyparky56
      @Markyparky56 2 года назад +10

      @@bdenix1997 aww you're no fun, with all your sense and optimisations! What if we want to spend 90% of the frame budget on the water!

    • @ismahilinumbganva3767
      @ismahilinumbganva3767 2 года назад +4

      I've spent 3 months watching all kinds of paid and free lessons and tutorials and exactly 11 sleepless nights adding my own spin to it and it still looks bad from the distance.
      Saw your comment and instantly felt that.

    • @Faaaaaaaaaaaaz
      @Faaaaaaaaaaaaz Год назад

      There are couple of addons doing that already.

  • @aleminha
    @aleminha 2 года назад +158

    hey have you considered making a video about how they do caustics in stylized games like genshin? such a cool effect but i have no idea where to even begin with that

    • @mattiamerenda8121
      @mattiamerenda8121 2 года назад +8

      Probably a texture on the seabed/riverbed

    • @HannahAgra
      @HannahAgra 2 года назад +7

      I’ll tell you what I came up with, which might give you ideas. In blender, try plugging a noise texture into the vector (aka mapping logic) of a voronoi. From the voronoi, you only want to get the lines where the points meet. The noise makes these lines wabbly. It is best achieved if you mix the usual everyday coordinate mapping with that noise texture, so you still have a more “stable” mapping, but a bit distorted. That should get you started :)

    • @PranjayMittal
      @PranjayMittal 2 года назад +8

      i think its a texture scrolling across the floor

    • @hungvominh2490
      @hungvominh2490 2 года назад +1

      The answer is always textures hehe

    • @bdenix1997
      @bdenix1997 2 года назад +1

      i think its just a voronoid noise or a caustics texture scrolled up and projected if screen depth normal values are below a certain angle. genshin's caustics are not a big deal.

  • @nounourd_
    @nounourd_ Год назад +12

    for issues with black material set opacity to 0, for me it works

    • @SmVH
      @SmVH 9 месяцев назад

      Thank you sooo much

  • @francescagreetham1804
    @francescagreetham1804 2 года назад +7

    This was one of the best water shader videos I think I’ve seen. Just beautifully succinct

  • @thespinningcube
    @thespinningcube 2 года назад +26

    To make it more realistic consider adding a little bit of blue to the absorption color, or else none of the blue light gets absorbed at all. I think it’ll make it look less like flat color tinting and more like proper light absorption.

  • @DogOnAKeyboard
    @DogOnAKeyboard 2 года назад +3

    I love this and one of the things that made me want to try Genshin Impact was purely just seeing all of the anime-esque scenery and how they might've done things in 3D for the stylized game! Thanks for the handy info!

  • @JustSander
    @JustSander 2 года назад +31

    Great tutorial! Can you make a follow up/"advanced" water tutorial with stuff like white foam edges around the edge of the water and objects in the water, and maybe a beach area where the waves roll onto the sand and back? :D

    • @literallyjeff
      @literallyjeff 2 года назад +1

      you should check out Prismatica tutorials on distance fields

    • @iflowlee
      @iflowlee 2 года назад +2

      there is also a pretty cool free asset pack on the epic marketplace with like 10 different water materials and waterfalls called "water materials"

  • @karakadir8860
    @karakadir8860 2 года назад

    man i so much appreciate your work... and also your announcement at the end seems like you are really trying to enable future artists
    thank you very much

  • @nemsix4185
    @nemsix4185 2 года назад +5

    I love the scene tbh, really well done. We want more videos like these xD

    • @nemsix4185
      @nemsix4185 2 года назад +1

      @Georg Klein 😭🐼

  • @And_l_Wonder
    @And_l_Wonder 2 года назад +13

    Awesome! Could you maybe continue this tutorial and do interactive water? Keep up the great work though!

    • @ismahilinumbganva3767
      @ismahilinumbganva3767 2 года назад +1

      You can use render targets to do that

    • @ismahilinumbganva3767
      @ismahilinumbganva3767 2 года назад

      on the second thought. If you're making a game where your character is visible on screen, there's much more simple method, making use of refraction. Prismatica Dev has a tutorial on water shader where he explains his interactive waves setup based on just that.

  • @aidengoesham3970
    @aidengoesham3970 2 года назад +2

    idk why, but I love water in video games. even when I was a kid water in games just blew me away lol

  • @DileepNow
    @DileepNow 2 года назад

    I am new to Unreal and this was very helpful. I also added a tiny bit of scattering color and it gave a nice murky water effect.

  • @JohnSmith-wj2wd
    @JohnSmith-wj2wd Год назад +4

    I'm already stuck at the beginning. Added the single layer water material node, set the blend mode to opaque and shading model to singlelayerwater, and copied the constants as seen on screen, but the material is just black. Can anyone please give a clue on what causes this? This seems to be the only tutorial that covers absorption.
    Edit. Found the solution! The color of the absorption has to be 100% saturated. As little as 99% saturation will render the material pitch black.

    • @LordPuzzler-9xg
      @LordPuzzler-9xg Год назад +1

      I set the saturation to 100 but now the material is white, I'm not seeing any blue. Any idea why?

    • @neilb143
      @neilb143 Год назад +2

      @@LordPuzzler-9xg u found a solution?

    • @Ryuuoujin
      @Ryuuoujin Год назад +1

      @@LordPuzzler-9xg i have the same problem, any idea how to solve it?

  • @_3Leon
    @_3Leon 2 года назад +1

    Please make a course on how to create that beautiful scene you have in this video!

  • @poluefemus
    @poluefemus 2 года назад +1

    wow, i love water

  • @worzazat
    @worzazat 2 года назад

    Dude... u give hope

  • @AlexanderThePerfect
    @AlexanderThePerfect 2 года назад +2

    How did you add the color parameter?

  • @Byeagle7
    @Byeagle7 2 года назад +2

    I did everything as you said, but my water is not blue, please help.

  • @holyciwa
    @holyciwa 2 года назад

    you have about the software. I personally enjoy learning so it was a little bit easier to do it over ti. But you’ll get there brother

  • @mondzahn
    @mondzahn 2 года назад +5

    Looks awesome
    Could you make a video about underwater? So a character can dive

  • @zombieallen
    @zombieallen 2 года назад +2

    Ugh, for some reason adding the orange color to the Absorption Coefficients node in Single Layer Water material does nothing for me....

  • @mappen614
    @mappen614 2 года назад +1

    What are the nodes put into Coordinate? You kind of skipped that part.

  • @oguzmuslu
    @oguzmuslu 2 года назад

    science and character very nice

  • @danialsoozani
    @danialsoozani 2 года назад +1

    the youtube algorithm is a good excuse ;) thaanks for the great tips!

  • @h4nl0uise73
    @h4nl0uise73 7 месяцев назад +3

    I am possibly a year too late however I am leaving this comment for anyone struggling with their material only staying black. In the beginning of the tutorial the creator plugs 1 into opacity when it actually needs to be a 0 that's plugged in (Creator changes it in the video but never mentions doing so). Hope this helps :)

    • @yourresultsmayvary2955
      @yourresultsmayvary2955 7 месяцев назад +1

      Just found it for mine.
      Don't know if you have to have opacity super low, or the saturation has to be super high.
      For me, the fix was turning the refraction from disabled to Index of Refraction. You can find it by clicking on the name of your material and searching for "refraction" in the details panel.

  • @xrecruit
    @xrecruit 2 года назад +1

    Usually I skip through drawn out tutorials but I didn't for your video....I also knew these things but didn't understand why they did what they did. A lot of people would tell you what to do step by step but not explain why and what it does. So if I decide to do something a little differently I have to spend a lot of time experimenting. Thank you good sir....person 👍

  • @zoso3103
    @zoso3103 8 месяцев назад

    i did the water but when i put above something the color changes dependent on what 's under it, why is that

  • @OdinAnon
    @OdinAnon Год назад

    This was really helpful, thank you

  • @Wishbone_Games
    @Wishbone_Games 2 года назад

    Thank you! This will be perfect for my new project!

  • @kenjibailly
    @kenjibailly 2 года назад +2

    Awesome! Can you do the same in Blender? 💜

  • @sreedhar7266
    @sreedhar7266 5 месяцев назад

    Refraction is disabled, how to enable it? its not working without it iguess

  • @UltraCole
    @UltraCole 9 месяцев назад

    what are the nodes that are 1,1,0

    • @UltraCole
      @UltraCole 9 месяцев назад

      also the refraction is disabled and i don't know why

  • @therealpeter2267
    @therealpeter2267 2 года назад +1

    What about the shoreline foam and planar reflections😭

  • @Jackson-ub1uv
    @Jackson-ub1uv 2 года назад

    What I want to know is how Portal 2 makes the fizzler and goo textures move, and how they make the fizzlers glow when cubes get close to them

  • @pchris
    @pchris 2 года назад +3

    The distortion effect offten catches items in the forground like your player character which can result in a really bad looking effect. Genshin Impact doesn't seem to suffer from this. Could you make a video showing how?

  • @D3FA1T1
    @D3FA1T1 2 года назад

    hey stylized station, for the refraction you can change the refration mode from IoR to Pixel Normal offset, it fixes the line disontinuity, but works a bit different (and less intuitivly)

  • @maxfort7896
    @maxfort7896 2 года назад

    OMG! Thank you so much bro!

  • @shawns4354
    @shawns4354 2 года назад

    I'll be joining your patreon after work. I want the rest of this tutorial and love your videos.

  • @adlerkampf
    @adlerkampf 2 года назад

    Could you please make a tutorial where you cover how to create these stylized clouds that are also present in the example scene of the video

  • @rickfuzzy
    @rickfuzzy Год назад

    This was amazing

  • @MrInternetMan
    @MrInternetMan 11 месяцев назад

    Would this work with water made with a spline? WaterBodyRiver, to be exact.

  • @henrettalee2781
    @henrettalee2781 7 месяцев назад

    why does it turn black when i plug (1,0,0) in to single layer water material, may someone tell me please : /

  • @markcarier
    @markcarier 2 года назад

    How would you do ripples along the edge? thanks.

  • @ivzu1700
    @ivzu1700 2 года назад

    Awesome content ! Will also consider joining the patreon soon, it's great man :)

  • @vakuzar
    @vakuzar 2 года назад +3

    Would be awesome if you made a unity version of this too. Would be awesome.

    • @Kio_Kurashi
      @Kio_Kurashi 2 года назад +2

      And then maybe with that I could figure out how to put it into Godot. Since, i don't think there's any 'absorption' parameters in godot shaders.

  • @godlgyro5233
    @godlgyro5233 2 года назад

    What about importing midi files because most midis freezes my program. What can I do about it? I'm using soft soft Bundle Pack by

  • @Surburis
    @Surburis 2 года назад +2

    (I fixed it) I couldn't even get just the single layer part to work, my nodes are identical and I set the Blend Mode to Opaque and the Shading Model to SingleLayerWater and my material is just black, has anyone had the same issue or know how to fix this?

    • @emilyporterfieldart
      @emilyporterfieldart Год назад

      Having the same problem. What was the fix?

    • @Surburis
      @Surburis Год назад

      Being completly honest I ended up using another water method and I really don't know how I fixed it originally, im sorry

    • @JohnSmith-wj2wd
      @JohnSmith-wj2wd Год назад +1

      @@emilyporterfieldart If you're still wondering. This happens if the absorption color isn't 100% saturated. As little as 99% saturation will render the material pitch black. It would be nice if such a thing was mentioned in a tutorial like this.

    • @GIGANTOMECHA
      @GIGANTOMECHA Год назад +1

      @@JohnSmith-wj2wd ur a real one

    • @neilb143
      @neilb143 Год назад +1

      @@JohnSmith-wj2wd still doesnt work

  • @Zero_hk
    @Zero_hk Год назад

    how can i put ripple effects on a water mesh material when a character walks or swims on?

  • @YourGamingTeam
    @YourGamingTeam 2 года назад

    What about water wave?

  • @syneydesign
    @syneydesign 2 года назад

    Is there a unity alternative process?

  • @juliestrator
    @juliestrator 2 года назад

    Wow great video!

  • @ShiftyOnYT
    @ShiftyOnYT 2 года назад +1

    Really cool!

  • @sergiosoba
    @sergiosoba Год назад +1

    I can not get the blue color :(

    • @Ryuuoujin
      @Ryuuoujin Год назад

      me neither

    • @sparklydavid
      @sparklydavid Год назад

      Abosort Color : you have to scrow "R" all the way up to 1 and "G" "B" to 0.
      For Refraction: You have to select Refraction Method from Detail pannel.
      (I choose "Pixel Normal Offset", but I might change it, still experimenting...)

    • @Ryuuoujin
      @Ryuuoujin Год назад +1

      @@sparklydavid still just pitch black for me, no matter what refraction i chose

  • @EliteInExile
    @EliteInExile 11 месяцев назад +1

    I uh, tried following along, and right now it's just a black square that blocks out the skylight only. Objects and assets are just the same color from before
    Edit: Dunno what I was doing wrong, but it all works now! I really appreciate the tutorial!

  • @joelpires2020
    @joelpires2020 4 месяца назад +1

    I try to follow the tutorial because I'm just starting in unreal, and in part 1 you add 3 nodes that you never show what they are, ok

  • @JohnCivor
    @JohnCivor 2 года назад

    Nice guide thank you for this.

  • @matteoramanzini1842
    @matteoramanzini1842 Год назад +2

    am i the only one wondering how to create the thing of the absortion?
    i don't know how to make it

  • @shawnmarsee7180
    @shawnmarsee7180 2 года назад

    Can you make a tutorial on how to make the tree seen in the water example? That’s would be awesome

  • @darkmallet7233
    @darkmallet7233 2 года назад

    would this be added to the survial kit

  • @luc1743
    @luc1743 2 года назад

    every video of yours is sick

  • @sujansarkar3720
    @sujansarkar3720 Год назад +2

    Make it on unity please 🥺🥺🥺🥺🥺🥺🥺

  • @architv5123
    @architv5123 11 месяцев назад

    0:50 WTF ! why you don't explain how you do this windows... i'm beginner and i don't know how pop this windows ans other little 1...

  • @sleepykittyMMD
    @sleepykittyMMD Год назад

    is this possible in unity and godot? is it possible to export this from UE to other game engines?

  • @ryanpatton1795
    @ryanpatton1795 2 года назад +4

    Why is my material black? Literally plugged in 4 things and all ive got is a black material. pissing me the fuck off.

  • @Andy.R50
    @Andy.R50 2 года назад

    I’m sold.

  • @frossinaskylor3604
    @frossinaskylor3604 2 года назад

    You should check archeage's waters. For a non-anime mmorpg, the developers did a very good joob in creating it.

  • @hexcrown2416
    @hexcrown2416 2 года назад

    You missed the blurring effect genshin does, they do some sort of soft blur for stuff under water

  • @RmaNYouTube
    @RmaNYouTube 2 года назад

    I have Ray Tracing Enabled on my Project and weirdly all my single layer water materials all Black & Completely Opaque, WTF?!

    • @Narr2590
      @Narr2590 2 года назад

      did you fix this issue? How?! :(

  • @DaveUnreally
    @DaveUnreally 2 года назад +4

    Don't forget to set Refraction Mode on the material to "Pixel Normal Offset!"
    Great work, very well presented!

    • @TheWaymaker
      @TheWaymaker 2 года назад

      Thank you! was so confused why my material looked different 😅

    • @DRockafella
      @DRockafella 9 месяцев назад

      Thank you so much

  • @xXBrutus67Xx
    @xXBrutus67Xx 2 года назад +1

    Nothing to do with water shader but in Genshin there is this interesting illusion at the Mondstadt bridge. When we lower the camera to the floor, it gives the illusion that the pavement on the bridge has actual geometry. And if we pay attention and look from above, it looks like the feet of our character go through the pavement. What is this technique called ?

    • @Fabio-zc7bs
      @Fabio-zc7bs 2 года назад

      There are many ways of doing this. Height maps in a tesselated mesh, reducing the tesselation amount accordingly with the distance to the camera and you can use several types of parallax to achieve a similar results.

  • @maxrotceig
    @maxrotceig 2 года назад

    I love so much your videos thanks man :)

  • @toniandpixels3976
    @toniandpixels3976 2 года назад +1

    Can we make the same material in blender ?

    • @GODHBLC
      @GODHBLC 2 года назад +1

      this.. I would like to know if I can recreate this in Blender..

    • @thespinningcube
      @thespinningcube 2 года назад +1

      You can use a volume absorption shader set to some blue color (also the color’s brightness must be less than 1) for the volume input, and also something like a glass shader for the surface input. You can use a bump map to add the waves. Apply this material to a cube or whatever body of water you have.

  • @krishanth5750
    @krishanth5750 2 года назад

    Is there gonna be an update to your teachable courses which include water?

  • @VEOdev
    @VEOdev 2 года назад

    Can you make one for unity ?

  • @sidi_c9991
    @sidi_c9991 Год назад

    Can you make à part 2 tutorial for swimming in this water ? Thank very much , it was à help full tutorial . +1 Like from France 👌

  • @1160wILlArD
    @1160wILlArD Год назад

    quick question" can water be created as a placeable object for Arma 3 specifically?

  • @duplo2920
    @duplo2920 9 месяцев назад

    You are a genious

  • @Memenov1
    @Memenov1 2 года назад

    Wait, so does your patreon include your survival kit course?

  • @EeVeE3D
    @EeVeE3D 2 года назад

    Looks nice...

  • @caedmonkehler7312
    @caedmonkehler7312 2 года назад +14

    This video made me mad because people actually took the time to DISLIKE IT. Who in their right minds doesn't like this video. Its INCREDIBLE

    • @rein556
      @rein556 Год назад

      RUclips doesn't show dislike count , Sus

    • @caedmonkehler7312
      @caedmonkehler7312 Год назад +2

      @@rein556 I definetly dont have any extention that adds back the dislike count

    • @ddlonglegs
      @ddlonglegs Год назад

      My guess is because it's not beginner friendly for people who are new to materials in UE

  • @cybermats2004
    @cybermats2004 2 года назад +2

    my men studied physics

  • @tannerthefishman
    @tannerthefishman 2 года назад

    When I fill in steps of GMS the in channel rack instead of giving a soft like 'brrrrrrrrrrrrrrrrr' instead of 'br br br br'

  • @Sinanisler
    @Sinanisler 2 года назад

    thanks bru

  • @RonBillWeasley
    @RonBillWeasley Год назад

    Why do you have a phisical sword on kazuha

  • @3tomke
    @3tomke 2 года назад +1

    How about Unity tutorial? :3

  • @maailmonlahe
    @maailmonlahe 10 месяцев назад

    does not work idk why

  • @killerbite_
    @killerbite_ 6 месяцев назад

    i love when its been years and cant find any of the nodes nor do i remeber the hot keys for them XD makes pretty much all tuts useless lol

  • @jacobburnette6345
    @jacobburnette6345 2 года назад

    I've always had a extreme interest in digital art and design and graphical design and a lot of things like this but unfortunately with money restrictions and priorities being more focused on what's needed instead of what's wanted I have not been able to have a proper PC to be able to experiment with these things or the money to afford the programs I've only been able to play around on model programming and animation while I was in school and that was a very small amount but I enjoyed every last bit of it I would like to say thank you for keeping the dream alive even though I don't know when I'm going to be able to act on it I appreciate videos like this that keep that fire burning until I am able to act on it

  • @OPTactics
    @OPTactics 2 года назад

    Instant subscribe to youtube and I'll be joining your patreon. Truly incredible

  • @fabioarias4777
    @fabioarias4777 Год назад +1

    "youtube algorithm requires you to edit the videos like we all have ADHD" ... and here I am watching this at 2x speed because it's not fast enough for me...

  • @Sioox
    @Sioox 2 года назад +1

    And I always thought that the sky and water are blue due to "rayleigh scattering". Most of red and green light beams go through the water and hit the ground, while blue light bounce back and forth on the molecules. (The different is: Its not about absorption) [Maybe I am wrong]

    • @thespinningcube
      @thespinningcube 2 года назад

      Apparently the effect of Rayleigh scattering in water is much less significant compared to the effect of absorption.

  • @Izmblueskydownizm
    @Izmblueskydownizm 8 месяцев назад

    I am watching your vid cuz i am using that same wallpaper

  • @LordPuzzler-9xg
    @LordPuzzler-9xg Год назад +1

    this doesn't work, I don't get the colour but I followed everything

    • @Ryuuoujin
      @Ryuuoujin Год назад

      same here

    • @sparklydavid
      @sparklydavid Год назад +1

      @@Ryuuoujin Abosort Color : you have to scrow "R" all the way up to 1 and "G" "B" to 0.
      For Refraction: You have to select Refraction Method from Detail pannel.
      (I choose "Pixel Normal Offset", but I might change it, still experimenting...)

  • @Conversation_Dev
    @Conversation_Dev 2 года назад +1

    At this rate you'll be creating your own Genshin Impact.

  • @dannywaterss
    @dannywaterss 2 года назад

    Nice, Thank you)
    Can I create game similar to this without code knowledge?

  • @OriginRow
    @OriginRow 2 года назад

    Seems works for mobile devices also

  • @hailahh2115
    @hailahh2115 2 года назад

    I Fcking love your channellll!!!!

  • @Clustered_ivy
    @Clustered_ivy 2 года назад

    Can it be done in UE4?

    • @AdulAhmad68
      @AdulAhmad68 2 года назад

      @@HenryLobber Apparently it was bugged, I made the SingleLayerWaterMaterial before I set the Material Shader Model to SingleLayerWater, which apparently is an illegal move or something...

  • @-SP.
    @-SP. 2 года назад

    Can we get more genshin shader videos? They are so satisfying to watch