Unity - Water Surface Ripple Effect Tutorial

[@paro456]

Some people may not know how to apply this effect to the player object, so I made a short video to show you how to do it. kzbin.info/www/bejne/i2jTeWiifrWNhbc

[@Tukyo]

Thank you for sharing the channel that inspired this! You are seriously one of the best channels on here, your shit looks amazing and I really appreciate how open you are to share all this, in such a clear way.

[@BuyMyBeard]

I gotta say, using an invisible particle system for this is GENIUS, I was trying to find a way to make a ripple system mathematically, and had trouble when I noticed compute shader delay was insane. I submitted a PR to your repo to improve the ripple effect because I noticed it was pretty pixelated. Make sure to check it out!

[@paro456]

I've been experimenting with using compute shaders to create ripples recently, and I think the results are quite good. Also, thanks for helping me fix the pixelated normal map issue.

[@BuyMyBeard]

@@paro456 how have you done it? Mine involved sending a buffer containing ripple origins and timestamp, and iterating over the buffer to calculate ripples on a texture and blending them onto a heightmap. I think what made it not work was the delay to dispatch the compute shader, making it not update every frame. I've also thought of a really cool idea for large planes of water (tiled or not tiled). Instead of having a static camera over the water, having a dynamic camera following the player and then projecting that on the plane at the position of the player. There are some cons like not sampling the entire water for other ripple sources, but I was planning on trying this implementation for my own water shader

[@paro456]

@@BuyMyBeard I'm exploring ways to achieve ripple effects without using a camera but by object positions XZ. A friend mentioned that adding another camera might increase the computational load on the game scene. By the way, the compute shader for the ripple effect that I created is mainly based on this tutorial. kzbin.info/www/bejne/anSxkpdri56qepo

[@BuyMyBeard]

​@@paro456 I've seen it both in video form (from that video) and in your source code. The implementation is lackluster and mediocre though. The algorithm is very naive and samples heights around it without trying to create any pattern. The implementation I was trying seems decent, but I think the issue is agressive loop unrolling (I have to iterate over a buffer of variable size depending on the amount of ripples sent to the GPU)

[@PyubX]

can you explain how you fixed the pixelization

[@atirutwattanamongkol8806]

This is some really clever tricks. Nice one.

[@IslamAudioStation]

Your tutorials are soo good man. Thank you so much.

[@__thytran]

Good work! thanks for the video

[@MadMarcWinnipeg]

Awesome! Thanx bro. I really appreciate this.

[@donna2016..]

How to combine this ripple effect with the realistic water shader?

[@paro456]

You can use the Lerp node to blend normal maps.

[@권승준-g7m]

I want to make the water transparent like in the video, how can I do it?

[@paro456]

First, change your shader from opaque to transparent. You can use the Scene Color node to obtain the color of opaque objects beneath transparent ones. If the water surface appears gray, it means you haven't checked the Depth Texture and Opaque Texture options.

[@권승준-g7m]

Wow, it worked. Thank you so much! Another thing I'm curious about is that even though the particles are above the surface of the water, they're still dripping. How do I fix this?@@paro456

[@권승준-g7m]

It's 1.4 points away from the Y-axis, and if I go below it, it doesn't touch the surface of the water, but it shows the surface of the water shaking @@paro456

[@paro456]

@@권승준-g7m You can make the character or objects emit particles only when touching the water surface.

[@권승준-g7m]

@@paro456 Does that mean I have to create and put in a script where particles only run when they touch the water surface?

[@chimpchase]

is there a way you can make the ripples fade out instead of going everywhere

[@paro456]

You can decrease the value of *d *= 0.98f;* in the ripple shader.

[@PyubX]

I saved it on a very nice subtle 0.035 normal strenght on thr material where it was a pretty wake and mostly noise free. Upon restart its all jumbled up.. could it be because of the auto random seed in the particle system??

[@PyubX]

How would you make it leave a good thick wake and not too many ripples?

[@paro456]

@@PyubX Could you share your game footage with me on discord? This will make it easier for me to help you.

[@PyubX]

@@paro456 i fixed this by adding a property to the shader with which i slowed down the propagation of the circles so now when i move fewer shoot out in front of me and they leave more of a wake. I would very much like your help with the pixelization if the offer stands however

[@PyubX]

any way to get rid of the pixelization?

[@paro456]

discussions.unity.com/t/low-resolution-or-bad-anti-aliasing-on-normal-from-height/827399/4

[@pancwake8444]

The ripples are way too fast with higher fps? How do i make them seperate from fps like fixedupdate does?

[@paro456]

You can move the code to FixedUpdate.

[@thegrey448]

welldone. thanks

[@pancwake8444]

It works great for small planes. But with a big plane the effect is barely visible. How do i make it work with big planes?

[@paro456]

I'll think of other possible solutions.

[@pancwake8444]

@@paro456 Changing the texture size from 512 to 16000 made it way better

[@paro456]

@@pancwake8444 "I don't recommend doing that. A 512 resolution means your computer has to render a 512x512 image every frame, and higher resolutions will take even longer."

[@pancwake8444]

@@paro456 seems to be doing fine tho

[@pancwake8444]

@@paro456 Nevermind. Its fine in the unity editor but when i build the game i have 0.2fps Putting it on 5120 makes it playable but also barely visible. Would love a solution

[@sprythedragon2253]

Where can I find the last script you mentioned? 6:26

[@paro456]

You can combine this ripple effect with the water shader tutorial I previously created.

[@thenewchicken1339]

Im already confused at 1:35, I don't have the option to create a unlit shader graph. Only a shader itself I'm unsure if this is the same thing.

[@paro456]

You need to install Shader Graph in the Package Manager first.

[@thenewchicken1339]

@@paro456 okay Thank you

[@dertobbe1176]

hi, so far its good, but how to setup this for a big landscape? i mean i want to just setup one camerea for multiple objects

[@Flimcy]

hey paro i am probably just really dumb lol but how do i change the size of the ripple as every way i have tried doesnt actually size down the ripple

[@paro456]

You can raise the resolution in the inspector, but I wouldn't recommend going above 1024.

[@Flimcy]

@@paro456 thank you

[@MrElfVR]

Thank you so much

[@TylerGlenn-ud4ei]

are u using gorilla rig?

[@kyd_99]

hello, I'm having trouble with camera that mine doesn't have output texture, instead of it, i have target texture so I just put my render texture in it. but it's not working i think i made mistake here so do I need to download something to see output texture in camera?

[@paro456]

what version of unity you use?

[@kyd_99]

@@paro456 I use unity 2022.3.9f1 version. I need to use this version to connect with other system. is version is the problem?

[@paro456]

@@kyd_99 I'm using the 2022 version, and there is an 'output texture' option in the output settings. Maybe you should check again. If it's not there, let me know.

[@kyd_99]

@@paro456 I opened new project and checked camera again but still it's not there..

[@paro456]

@@kyd_99 Could you please provide some screenshots of the camera inspector?

[@sorathedev6739]

really cool, but I just wonder is there anyway to implement tessellation to urp

[@paro456]

I currently know two methods. The first one is to use Amplify Shader Editor, which supports tessellation in the URP pipeline. The other one is to add tessellation functionality in your shader code.

[@munyunu]

Thank you~!!

[@WheatyVR]

Can you send me the finished shader?

[@GianDev]

Hello, I have a question, is it possible to create waves as high as the sea? I was looking at how to use your github repository but when I opened the project, the water textures were not loaded and it did not have the function. I would like to learn how to make a sea without the computer exploding. u.u

[@paro456]

You can contact me through Discord so that I can provide some images and videos. paro456d

[@Thesomeonevr]

how do i combine it with the last water shader

[@paro456]

You can download the shader I uploaded on GitHub, or wait until I have time to make another video about water.

[@matawaristudio4805]

how if the plane is a rectangular shape? I`ve try it but the effect is streched

[@paro456]

When I initially created this effect, I only considered surface, not other shapes.

[@HansPeter-gx9ew]

you should spawn the ripples in front of the object extrapolated with the velocity vector (has lag bcof CPU-GPU transmission). But nice project

[@paro456]

Thank you for your suggestion! :)

[@BuyMyBeard]

wouldn't that cause the risk of overshooting a ring when the player stops?

[@HansPeter-gx9ew]

@@BuyMyBeard I think yes, but then you ahve one slightly missplaced ring instead of all. Also the player shouldn#t stop instantly anyway

[@BuyMyBeard]

@@HansPeter-gx9ew at this point it comes down to a design decision

[@HansPeter-gx9ew]

@@BuyMyBeard true; imo having such an effect is difficult enough; shader logic is simple but all the thing around it like how to get acces to texture etc. are extremely annyoing and badly documented. I really hate Unity for making it so complicated. Like making a custom post processing effect

[@masonblue62]

How do you make the water reflect and move litgh under it

[@paro456]

You need to add a reflection probe in your scene.

[@masonblue62]

@@paro456 thank you I appreciate it

[@TylerGlenn-ud4ei]

Hey, im having troube with the gorilla tag player script, like it wont play the effect, and you can barely move, can you tell me how to fix these issues, Thanks

[@paro456]

You can discuss your script issues with me through Discord.

[@TylerGlenn-ud4ei]

@@paro456 how do i add you on discord

[@TylerGlenn-ud4ei]

can you sent a link to ur serv if u have one?@@paro456

[@ezequielmartinez9583]

Hi. I redo your example here and the only ripple working is at the center of water... the player ripples are not working when the player is collides with water... Did you forget to talk about any script to control this?

[@ezequielmartinez9583]

Ripple is not working at player's collision position

[@paro456]

I mentioned how I did it towards the end of the video because the process is the same, so I skipped it. If you're not quite clear, you can reach out to me on Discord.

[@TylerGlenn-ud4ei]

Now the issue is that the water ripples spawn at the wrong spot, please help. Thanks

[@paro456]

My Discord : paro456d

[@pranavmohite8581]

@@paro456 same issue bro sent u a discord friend request please respond

[@KashishSharma93]

great video. have you tried using this with unity's new water system? just curious

[@paro456]

I have tried, but I currently don't have a good understanding of how to use it, so I might learn more about it in the future.

[@KashishSharma93]

@@paro456 i will try it out as well

[@GrapeMonkeGT]

how do i add it in the water shader u made like the shader u made in the other video

[@paro456]

You can use the lerp node to do that. Connect the water surface normal map to A and the ripple normal map to B. Finally, connect the R channel of the ripple texture to T then done.

[@Kaerfca95]

@@paro456 Hey! I know this is probably the simplest thing, but do you have a screenshot showing this? I've copied both of these tutorials but I'm just not able to get them both connected. Sorry to bother you. Both videos have been super helpful.

[@paro456]

@@Kaerfca95 This is how the screenshot of the connection should look like. and change the mode of the ripple texture to black. imgur.com/a/do8q8uG

[@MonstrumReborn]

Please do a tut on sunbeams for urp. Would be sick

[@chunchaulam9925]

is this compatible with HDRP?

[@paro456]

no

[@Jigglefrizz]

it is - i tried it

[@tcilla3874]

nice video, bro can you make a tutorial on volumetric sunbeams with urp graphics.

[@paro456]

Perhaps when this video reaches 10k views, I will consider it.

[@Syeda_Dev]

can you make that a unity package please

[@paro456]

Maybe but not now

[@ttsvibelounge]

What text to speech engine are you using?

[@SuperFunJeffy]

How can I get this to work with any object

[@paro456]

You can make the character or objects emit particles only when touching the water surface.

[@МихаилДемяненко-б5х]

what program do I need to open shader graph?

[@paro456]

You need to install URP and Shader Graph from the package manager.

[@cosmicnarwhalgaming]

I'm very new to unity. I have completed your two part water shader video, just wondering how to combine this ripple effect with the other plane because there can only be one shader on a plane, Also, in the shader graph, only one node can go into the normal tangent space, so how do I put the water shader and ripple shader onto the same water plane?

[@paro456]

That's a drawback of this method, but I think it can be improved by modifying the code. Perhaps I'll look into it when I have the time.

[@paro456]

You can combine the normal map animations using Lerp. I remember there was a comment asking about this issue before; maybe you can take a look.

[@hyperbatata]

This is great, worked perfectly for me. One question. How can you do it for larger bodies of water? From my testing, it looks great for small planes (maybe up to 5 units big) but quality deteriorates over that. Can it be made as the ripples do not bounce at the edges? Thank you so much!

[@paro456]

In the script inspector, there's a parameter called Texture Size that controls the resolution of the rendertexture. However, changing it may affect the speed of ripple dispersion. You may need to adjust it several times to find the desired value.

[@kfj795]

very cool but i noticed its bound to the Framerate and setting the fps to be higher than 60 breaks the water s:

[@paro456]

I think moving the code from Update to Fixed Update can solve this issue.

[@kfj795]

@@paro456 that night be the best choice cuz nowadays ppl want the best FPS and more and more screens are High refresh rate.

[@mjin.mtd0604]

how to add unlit shader graph ?

[@paro456]

1:30 If you don't have that shader graph option, then you need to install shader graph first.

[@mjin.mtd0604]

@@paro456 thank u but I want to ask Why I don't have any setting of the camera

[@paro456]

@@mjin.mtd0604 what camera

[@徐龙-h1v]

Can you send me the demo project in the video?

[@paro456]

You can find the GitHub link in the video description.

[@joshuabidwell2614]

Champion

[@daniionas2888]

The best

[@itzdrify5678]

Can I make this on hdrp?

[@paro456]

Yeah, you just need to choose HDRP when creating the graph.

[@KENISEG]

using extra camera - this is bad way

[@paro456]

This is a fundamental idea, and you can also optimize it further.

[@NeroForte_]

urp?

[@paro456]

yes

[@turkey_gaming7570]

hi

[@paro456]

im real one

[@turkey_gaming7570]

@@paro456 Pin me then

[@MonkiiMousii]

gorilla tag@@turkey_gaming7570

[@miyeonpipi]

hi, i can't find "Unlit Shader Graph", where is it can i find?🥲

[@paro456]

Maybe you haven't installed Shader Graph.

[@miyeonpipi]

@@paro456 then, i dl Shader Graph on Unity Store right? or on package manager?

[@paro456]

@@miyeonpipi package manager