3D Stylized Water with Refraction and Foam Shader Graph - Unity Tutorial

[@BinaryLunar]

📝 The Ultimate 2D & 3D Shader Graph Course: tinyurl.com/3b5zac7c 🌎 Let us know what you think about this video, also feel free to chat with us on our Discord server: discord.com/invite/b6bXKSV ❤ Support us on Patreon www.patreon.com/BinaryLunar and gain access to all our tutorial projects. 📦 Check our Assets on Unity Assets Store: assetstore.unity.com/publishers/47136

[@maistrogaming7911]

Thank you btw

[@BinaryLunar]

@@maistrogaming7911 our pleasure.

[@Ifeelmylegssubtely]

when i try connect the water colour section to the lerp how you did o the lerp it shows black even when ive checked through everything so my water is now just white is there a fix.

[@akoryou1488]

Great Video!! For any of you who had a reflextion problem, I am using unity 2021.3.27f1 create a new camera(or alternate in your main camera) under Rendering->Opaque Texture turn it ON, and also Depth Texture Then it show work in ur game view

[@ilhameffendi2737]

still relevant after 3 years. thank you!

[@BinaryLunar]

You are most welcome

[@katchup8417]

Thanks ! that's really what i had been searching for

[@killoki8538]

if you are using HDRP, you should put HD Scene color instead of scene color in the refraction part and turn on exposure, or you'll get a very bright material

[@老举温抖丶]

thank you very much！！I'm looking for a solution to this problem

[@roi_bidoushka5531]

But i with that i have nothing too, when i change the color opacity, nothing happens ( ps : i dont know where i must turn on depth and opaque texture in HDRP ?)

[@dc348]

@@roi_bidoushka5531 I activated the transparenci of the material in surface options, is the previous section to exposed properties.

[@monkeysaur4305]

I actually requested a video on this in the comments of a previous video, so thank you very much for doing this! Really appreciate your tutorials they are great and I am learning a lot from them. :-)

[@BinaryLunar]

You welcome, we glad it was useful.

[@bovineox1111]

Thanks for this. One trick that can be done, if alpha is expensive, is to render the water as an opaque object after everything else, ensuring the depth-buffer is accurate, this can give you the glow, which can be distorted, around the edge of objects without having the plane. Additionally you could have a mix of alpha planes around objects and opaque across blocks of deep water, provided you are always fading to deep colour before the edge of an alpha plane around objects, this can also reduce alpha and z reads. I may also try rendering a 'in the water' object twice, with the second time adjusting the position to always be on the plane of the water and scaling it slightly from the centre. This is not as nicely automatic as other solutions however. Some of these are not so important for desktop, but for VR and mobile they are lifesavers!

[@kadagaden]

If your depth texture and/or foams are not working in play mode while they are working in the editor scene view, make sure to enable Opaque and Depth Texture in the main camera settings. If still not working, check the URP Renderer Data settings -> Rendering -> Depth Priming mode should be "Auto' or 'Forced'. It was 'Disabled' by default for me, so the Depth and Foam stuff were not working in Play mode while they were working in the Editor.

[@obanxMolly1991]

This fixed everything for me,thank you!!

[@TheDevinhanson]

This fixed mine, with one additional tweak: your camera has to be in perspective mode. It does not work in orthographic.

[@teemoballs]

omg thank you man

[@gaelschlupp9963]

Thank you for your tutorial. Not only is the tutorial easy to follow and cut to relevant steps but you managed to give a broad sense of how to organize and build shader :)

[@BinaryLunar]

You welcome!

[@adriangonzalezjimenez3681]

One issue solution: If you follow everything rigth to 5:15 and the plane is not foggy despite you selected the surface type to be 'transparent' in the shader graph, you need to set again the surface type to transparent, but in the inspector, selecting the material

[@lflxko3912]

How do I find the material transparency option? When I click surface drop down arrow when material is selected in inspector, it has no drop down options showing?

[@199jaw]

@@lflxko3912 After messing around I found that it is actually the WaterDepth paramater that is too high. I had to set mine to like 0.2 for it to work properly

[@P134-i3p]

For me, I had to press "Save asset" for the thing to update and apply

[@LegendJ0e4]

my water is all black, it was foggy before, now it's all black... I'm at 5:55

[@sparky1377]

can you make a stylized grass tutorial ?

[@Krechevskoy]

For the life of me I cannot figure out how you don't have more subscribers. These are some of the finest tutorials on the internet.

[@vivianmenard]

Very good tutorial ! To have a better result, you can connect the new screen position (calculated for the refraction) to the sceneDepth node so that the depth map (and all the effects computed from it) will be deformed the same way as the image :)

[@shabadava62]

No matter what i do, the foam spread across all the water or none of it (o can't achieve the foam overlaping look in objects). Any idea why?

[@JeanAlvarez-h5h]

This is 100% what I needed to learn for my project. Thank you!

[@BinaryLunar]

@@JeanAlvarez-h5h glad to hear that, you are welcome )

[@OHSWZ-jj8qd]

Great tutorial, I can't find a tutorial related to some platforms in China but your video helped me

[@sajugs8697]

Thanks for the tutorial! It's not often a Unity tutorial on KZbin works perfectly without any problems :)

[@包子西施]

It's very nice. But i want to know why split Screen Position a channel? why not z channel? At 3:34 of video.

[@gotnixmedi8461]

This was always explained in a very comprehensible way. Thank you for the time you have invested.

[@DeadpoolMr]

Hello, when I'm connecting Lerp, Scene color, and split to another lerp, my lerp material doesn't become blue as yours and stays black, after that there is no transparency in water, did anybody stumble upon that and know how to fix it?

[@BinaryLunar]

Make sure that enable depth and opaque textures on the renderer 2:20.

[@mencowsky]

@@BinaryLunar i still have this problem and it seems to dont want to go away. My cube stay grey all the time but i've did everything in the video

[@francescagreetham1804]

@@BinaryLunar Thank you! I missed this part and it went from a blue blob to working instantly. The relief!

[@brianmcalpine822]

@@mencowsky I had to switch the A & B around on the last lerp

[@quintonneal2881]

@@brianmcalpine822 Love this. I was about to go insane XD

[@bovineox1111]

what might be missing for some people is that your water plane MUST have UVs or you're going to get crazy results. If it doesn't you can map the world XZ co-ords to the UV vector for the movement node and crank the speed, scale and strength way down

[@jonytitan3467]

Adoro tu canal bro. Me encanta tu contenido y tus explicaciones sublime 🤩

[@GruulGaming-ku7vf]

once I get to 10:20 and set the colors alpha to 0 the shader just goes sraight to white. Are you able to tell what setting might cause something like this?

[@CMS-th9oe]

Hi, I experienced the same problem with @ANJ_gaming, which is that the refraction not working after finishing the refraction block. The water with both the colors' alpha decreased still has a grey base color, therefore not really transparent. And then I tried connecting the splitted alpha channel to the alpha of the unlit output and it still does not work. Any help on this please?

[@intingido9751]

If you go on your water GameObject inside the editor hierarchy and you go down to your material, the color's transperancy setting is probably maxed out

[@baulator]

All seems to be working until 5:10. My "Water" object isn't transparent at all. Does anyone have an Idea why? I did everything until this point like it is shown in the Video (apart from the Assets). Do I have to enable something on the objects that should be visible through the Water?

[@BioHazardAlBatros]

Enable DEPTH and OPAQUE textures in rendering camera's properties. It should be visible when u launch test

[@baulator]

@@BioHazardAlBatros Thanks. The problem was that I forgot to save the shader asset.

[@BioHazardAlBatros]

@@baulator lol

[@ducky4303]

such a good vid, perfect use of sub shaders and organised grouping

[@BinaryLunar]

Thanks!

[@ohnedich9960]

Any idea on how to refract the objects that are only in the water and not outside of it? I'm getting refractions on my hand held objects. Thanks!

[@da_drood-digitalart]

Have you found a solution yet? :O

[@alonshini]

Great work man - clear and comprehensive, thank you

[@BinaryLunar]

Kind of you!

[@Ecan_Au]

Absolutely love it, mint tutorial

[@BinaryLunar]

Glad you enjoyed it

[@雨幕殇]

According to the video 10:26,I changed the ShallowWater alpha and DeepWater alpha but it didn't become transparent，still like blue fog,I don't even know why，could you please help me fix it?thank you!

[@mr.ndreson3759]

same problem, cant figure it out why

[@mr.ndreson3759]

Okay, I got it, at the beginning he says go to edit and project settings then to graphics, click on the urp thing and then check those two things in the inspector

[@jamesskyhigh946]

This is working and 100%error-free if u closely follow the tutorial, thank u so much❤

[@BinaryLunar]

You are most welcome

[@MattSayer1080]

Excellent tutorial. Thank you so much!

[@BinaryLunar]

You welcome!

[@infinityvy]

in case anyone is also having issues with the depth not working: for me the issue was that i had orthographic camera enabled. in hindsight makes a lot of sense since it kinda takes the depth away but took me a while to figure that out

[@pchris]

set playback speed to 1.5 and this tutorial is amazing! It covers so many techniques I was looking for to make my water look much much better!

[@huytruong2636]

Your tutorial is amazing , thanks much

[@BinaryLunar]

you are most welcome!

[@tommywilkinson33]

In HDRP the foam effect doesn't work. Not sure what nodes to use to get the edge effects like in this one.

[@ANJ_gaming]

Everything worked for me up until 10:04 . After adding the refraction+movement and lerping it into the water color and saving the asset nothing changed, no movement. However I read there is an updated video so I'll try to find that.

[@carolinkohn4833]

found it yet? same problem!

[@ANJ_gaming]

@@carolinkohn4833 unfortunately no, I just abandoned this one and took what I could out of it.

[@CMS-th9oe]

same problem, any luck getting it working now?

[@ANJ_gaming]

@@CMS-th9oe Unfortunately not, I just shifted away from this tut for the time being, sorry!

[@Piiietsch]

I found the solution, some people said it here in the comments: There is a setting in the universal render pipeline asset that you have to turn on to make the movement work in URP

[@schnerror]

Well and with focus explained, tyvm

[@galamotshaku]

For some reason my foam is only showing in the scene view but not in game mode.

[@alphatachi]

Incredible tutorial!

[@BinaryLunar]

Thanks!

[@guimosoft4753]

Really Nice!!! Its beautiful

[@BinaryLunar]

You are most welcome!

[@mattgreen753]

Thank you for the awesome tutorial!

[@BinaryLunar]

You welcome!

[@antoniomagic6]

Fantastic tutorial! 10/10

[@onlyace8279]

my refraction doesnt work, any suggestion?

[@poly.morphine]

Same here, did you find a solution?

[@mkaram4893]

How come nothing is connected to the Alpha channel on the shader node and the water is still transparent? :D

[@北科大-謝妤羚]

Can you make this tutorial by the new shader graph version (Unity 2020) ? plz

[@BinaryLunar]

kzbin.info/www/bejne/Z6rIp6N5dqaSqLc

[@shiv-iwnl8188]

Great tut, but I have a problem with the refraction on surfaces like planes that are single sided, how could I fix it?

[@captain_fact]

Nice vid it actually works🔥🔥

[@BinaryLunar]

You welcome!

[@ikizlerlebirgun7119]

Definitely what i need! Thank you man!

[@BinaryLunar]

You welcome ^^

[@polyforge3d]

Hmmm, I followed all the steps, but I get fully transparent water with refraction but no color and the foam also is not showing up...

[@bovineox1111]

Is your zbuffer enabled as a shader source?

[@polyforge3d]

@@bovineox1111 Thanks for the suggestion, I don't remember, but nevermind, I no longer need it :)

[@alexp.9410]

Thanks for sharing 👌

[@BinaryLunar]

You welcome!

[@frodox10]

Great video mate, really useful thank you!!

[@BinaryLunar]

Your welcome!

[@RausanSinha]

Amazing tutorial with explanation!

[@BinaryLunar]

Thanks!

[@connieduartepetti]

this was awesome! thank you, just what I needed! c:

[@BinaryLunar]

You welcome!

[@drake_eric9799]

cant see the water in far only shadow i see , but i see water if I'm near in water what is my wrong?

[@dokhtaroneh]

There is a problem in this shader. Look at the edge of the purple rocks in the water. They blended with the water behind them. It should not happen.

[@WISPRINGS]

What would be your solution?

[@SuperDianaka]

@@WISPRINGS I am looking for an answer as well.

[@AmgedAlfakih]

try to put the value to the minimum

[@tariqr9737]

kzbin.info/www/bejne/enqoZKSceKyLopo this link would be the answer

[@naxo175_]

3:47 I have not the Vector1. I'm using Unity 2021.1.12f1. However this looks amazing :)

[@BinaryLunar]

Vector 1 changed into float in Unity 2020.

[@djcoll123]

Nice tutorial this works in Amplifer

[@BinaryLunar]

yeah same concepts can be applied.

[@djcoll123]

@@BinaryLunar but in unity 2017 shows that water in white .c in 2018 and that one you showed in video works fine

[@djcoll123]

@@BinaryLunar ok i solve that problem by self i had an light that have no shadows enabled didnt know that i needed to prevent that water shows white

[@poweredbygeeko]

awesome tutorial! thanks!!

[@spideyman1909]

the foam nor the moving water ripples work for me and I followed step by step can someone help?

[@Gregasaurus]

nice one! great tutorial.

[@BinaryLunar]

Thanks!

[@RoseWoodKitty]

I loved this tutorial but im having this weird issue where in the game camera the foam still takes up the whole of the object its on, ive tried to no avail on fixing the issue and was wondering if anyone may have had a similar issue?

[@Slort_]

I also had this problem, I fixed it by taking the Add node after the Step and Split in the foam section and replaced it with multiply.

[@Auliszek]

Thanks for the awesome tutorial! Did any of you guys have this issue: the higher refraction scale you set, the more pixel-ish the water gets? It looks decent in the areas near to the camera, but from a distance it looks like a huge pile of pixels - no idea how to fix that :)

[@spicedruid]

I have the same problem too. I think its because the further away you are from the water the less pixels there are to refract, so i guess turning refraction off at a range where you cant notice it would be a good idea

[@marianmarian8882]

its because of the noise texture that dont get scaled when in distance, the fix is to use a made water texture and make sure to have mip maps enabled the best looking for water is voronoi textures

[@ttttkk2]

Hi, i can't find the unlit graph at 4:30

[@thelittlemob]

Thanks for this tutorial

[@BinaryLunar]

You welcome!

[@growguru2020]

wow really nice! can you show pls how to make this water shader works with interactive objects?! like...your player walk into the water...or swimming objects on it

[@RausanSinha]

How can i add reflection to the surface of water?

[@BinaryLunar]

we might do new water shader with reflection during this year.

[@ezzadesa]

Thank you so much for this tutorial!

[@BinaryLunar]

You welcome!

[@teotot2116]

hey, i have a trouble that my shader is gray for some reason. What can be the problem

[@dairrizzle9715]

Am having some problems the depthfade node in the stylize water part doesn`t have the distance point to it

[@rorschacht8478]

You need to save the DepthsFade shader before it can take an input in the main shader. Click on "save asset" in the top left corner of the shader editor window.

[@dairrizzle9715]

@@rorschacht8478 thanks man got it working now, kinda of a stupid mistake on my part, thanks 👍

[@rorschacht8478]

@@dairrizzle9715 Glad I could help.

[@cheftechnique]

@@rorschacht8478Thank YOU! One little thing can really get you stumped this saved me!

[@rorschacht8478]

@@cheftechnique 👍👍

[@michaelkaler3138]

Great Video! I keep getting a shadow (best I can describe it) when my camera is close to the water. If I zoom out it goes away and I can see it grow as I get closer. Any idea what I missed in the process to revisit?

[@777cube777]

It's because you have "cast shadows" turned on on the mesh with the water material It fades when you zoom out because on your urp setting the "Max Distance" for the shadows is set to 50 (so it just stop rendering them)

[@michaelkaler3138]

@@777cube777 Thank you so much! So much to learn.

[@while.coyote]

Great one, thanks!

[@diabolo_44]

Depth and foam dont work in orthografic view, plus someone know why i can see the foam effect through walls ? im using hdrp in 2021 version.

[@diabolo_44]

Solved, i accidentaly changed the depth teste in surface options --'

[@Pukkichen]

Can you please tell me how you make it work with orthografic view? I have no depth..

[@thatguyinvop]

Nice video!

[@vitolist8161]

Thanks, helped a lot

[@BinaryLunar]

You welcome!

[@Klerosine]

is this compatible with vrchat? cause I really wanna make this

[@ChernobylComedyAndWings]

i was a little confused because my depth was not working right off the bat, but then i just lowered the scale from 10. make sure you all adjust everything to 0-100 to see what is working where. good video but the very end you make it hard to see what youre doing.

[@benayamanuel]

Can you make the 2D version of this ? This just simply amazing

[@WelshGuitarDude]

What about caustics and it should be a lit shader no?

[@topusku]

Hmm, for some reason I can't seem to find the "Unlit Graph" option. It seems like the only options I can use are either a Blank Shader Graph or a Sub Graph.

[@MaximumLowBlow]

Did you ever find a solution for this? I'm stuck on this now

[@brianmcalpine822]

@@MaximumLowBlow Using URP?

[@letterborneVods]

The depth fade isn't working. I did everything exactly like in the video, am using URP, but it just shows solid white. Any ideas?

[@letterborneVods]

Nevermind! Found it out. If anyone else wonders or comes across a similar issue, check out which shaders you are using around the scene depth, I was using a toon shader from the asset store and somehow it prevented the scene depth node from working.

[@romyeichner9038]

I tried to create this beautiful water but there is no "DepthFade" node. I only have Scene Depth and this doesnt work. Can you help me please?

[@BinaryLunar]

DepthFade node is sub-graph node , watch the section of creating "Depth Fade" sub-shader from 2:30 to 4:30.

[@romyeichner9038]

@@BinaryLunar I missed this step for some reason. Thank you very much!!!

[@mfransisw]

Why can't I export the water ? The refraction, and the depths are gone?

[@evmoFPV]

Any Ideas why the foam wouldn't render on mobile? Works perfectly in the editor.

[@MrLonelyDK]

for some reason the depth fade works in scene but not in the game tab

[@NathoSteveo]

Great tutorial :)

[@BinaryLunar]

Thanks /

[@danieldarko]

Does anyone know how to make the water(any unlit graph) be affected by the directional light color? I have a day and night cycle in my game but when it goes night time the water is unaffected and remains bright colors.

[@dinendash1166]

make another water cube with the same shader but different colors for night and when it switches to night you change the night water cube to active and disable the day cube.

[@marianmarian8882]

or make it lit why would you keep it unlit?

[@mariotudon7982]

my shader is only seen in game view but it is not seen in scene view, although in the tutorial it is seen that it should also be seen in scen view, is it something that I have not configured?

[@vizualwanderer]

Do you think this logic would work on 2D, with few changes? currently I'm just using animated tiles this looks amazing!!

[@Gorushkaa]

Please let me know how you managed to get this shader to work with a 2d sprite?

[@tekniko8213]

Foam and some of the depth doesn't work with orthographic camera.

[@EngGameDev]

Is there a way to convert this into an ortographic viewmode?

[@BinaryLunar]

I dont think so because that way eleminating the depth

[@sabakunoxs7182]

my depthfade has no distance slot

[@Dhieen]

the foam doesnt work for me i dont even know why...

[@captain_fact]

Try changing the alpha of your foam color. Mine wasn't working at first then when I changed it it worked

[@inteletronx3564]

Thanks. Looks Great! Now, can we swim in the water and see the shader of water intact while diving into it?

[@xXbananaXxist]

How come my substract is black and not white when connecting split and scene depth ?

[@MrNaylor007]

Hi, did you find an answer for this? I'm experiencing the same issue now. If I find an answer I'll post it here

[@MrNaylor007]

So I figured it out, maybe 2 months too late for yourself. But if anyone else has this issue then on the Scene Depth node, where it says Linear 01 change that to Eye and it should make the subtract node white now!

[@Reakol]

@@MrNaylor007 Absolute life saver mate!!!

[@MrNaylor007]

@@Reakol glad someone found my comment helpful! It was an easy one to miss

[@NockCS]

Does this also work projects using the built in render pipeline instead of URP?

[@BinaryLunar]

Yes recently Unity added the support of Shader Graph to the Built-in Render pipepline, just install shader graph from the pakage manager.

[@ken880715]

Thank you very much!

[@BinaryLunar]

You are most welcome 😊

[@mohamadazharahawan7457]

why my DepthFade only has Out_Vector only but the distance is gone??? help me

[@P134-i3p]

When you're in the subgraph, make sure to press "Save asset (top left of the window)" for the thing to update and show up

[@supersentaimexicano1967]

Could u update the tutorial? For Unity 2020. There is no DepthFade and if you try to use Scene Depth It doesnt work

[@13erk]

He spends from 2:35-4:20 showing you how to make the DepthFade subgraph. You make it first, then you can add it to the main graph

[@deanfuest4129]

Great shader and tutorial! Any chance you can explain how to get rid of the camera clipping effect that occurs as the camera gets close to the edge of the water?