Finding this in 2024 still helps a lot, thanks! I've spent some extra time wondering why everything looked way too blurry in my project until I noticed Opaque Downsampling setting in the Universal Render Pipeline config, setting that to "none" gives that nice crispy final image with all the distorting effect still looking great :)
Guess I don't fully understand your issue, The effect is viewed through an object such as a plane or sprite shape. Those objects will depend on where you see the distortion. As for how the distortion itself looks, that's fully based on the shader, which I walk through it in the video.
Dont multiply the screen position and your noise maybe try to create a UV node and add your noise to and then multiply it with your distortion power (didnt try)
For those following this video but having problems, make sure you are using the "URP Universal Renderer". If you use "URP 2D Renderer", the distortion effect shown in the video does not appear. (I don't know why)
Hello I am using Unity 2022.1 but I couldn't find forward renderer. The closest one I can find is "renderer 2d data". Some of the options in the video are not there in the inspector and I couldn't make it work. Will you post a video about the same trick Unity 2022? Thanks!
Very well done, thanks. But I can't get it to not duplicate some sprites (like, a second player appears on the distortion effect). I've made sure the sorting layers are correct. What could I be doing wrong?
This shader is effectively take the pixels on the screen beneath the object that you are using the distortion effect on. Those pixels then get moved around based by the shader which is the very simplified version of how the shader works. This means any object you move the distortion effect over can possibly be seen in two places depending on where it is near the "distortion" object. One way to help prevent this is you could use the "distortion" object as a mask as well an when it covers an object, that portion of the object is hidden. But then you'd need to learn how to utilize the different rendering passes such as the stencil/mask buffer. It can get complicated very quickly once you go outside of the scope of this video.
@@SethFunk hmmm I see... I have very limited knowledge of shaders. If I want to have, say, a top down distorted water and a boat on top of it. What would you say is my best bet then? Would it be easier to just apply the distortion in a texture?
@@SethFunk I did it!! I used 2 cameras, one with lower priority filming just the water effect and another one filming the rest of the game with no bg color or skybox. now I just need to leave the space empty and the water effect is there! Thank you so much for this video!
@@giordanonin That's definitely an option. You just have to be careful with the overhead you get from using 2 cameras in a scene. (rendering a scene 2 times is very resource heavy)
@@alexthompson8977 good question. Depends in which version of unity you are using. For 2020 and 2021, i believe you'd need to write a custom blit script. Which if you do that you minds well figure out how to write shader code. In the newer versions of unity, i know they changed the pipelines again so it might be possible. Haven't looked much into doing it though
@@alexthompson8977 I'm assuming you are fairly new to programming or game design in general. There are no one size fits all solutions. So you'll need to do the trouble shooting to figure out what and will not work if you are not following this process 100%. But short answer is there is a way to achieve this effect, but you'll have to figure it out.
Great Video! This helped me understand so much about Shader Graph. One note, I did need to change my Material in 'Sprite Unlit' in the Graph Inspector to get it to work, but otherwise this was a flawless tutorial, very detailed and the explanations are super helpful!
@@SethFunk I have an issue. The shader works however I distorts my images(not sprites) when I don't want them to be distorted. This is even after I have it set to a layer that's not supposed to be affected
@@alexthompson8977 could be a few things. Not sure if i tested this with ui elements (images) so it could be getting effected due to the rendering order. But the layer tag should help prevent this from being an issue either way. You could always try changing the render order in the forward renderer asset. Its always hard to help troubleshoot with out seeing how your current project is setup. Shaders/graphics are a complex subject with a lot of moving parts. These tutorials are more of a guiding hand to get you in the right direction and usually some additional self troubleshooting can be used to get the result you want.
Hey are you open for specific questions somewhere on discord or so? I'm struggling to get the right effect for my game and you might be able to help me figuring it out.
probably not with this method. This relies on a certain part of the render pipeline which uses the layers to determine which items to process when. Newer versions of unity 2022 and later does have an improved shader graph, so you might be able to do it using the newer nodes. Distortion is basically offsetting a UV over time with a unique pattern. Once you understand that, might be able to build your own shader graph, or use that info to write a a normal shader.
Liked and subscribed, thank you! You've provided me with a simple solution for something I've wanted to do for a long time. I have one problem though, in my URP renderer list I already have a Renderer 2D Data. I use 2D light in my game but it ceases to function when I set the Universal Renderer Data as default. When I set the Renderer 2D Data as default, the 2D light works again but the texture supposed to give off the distortion effect just becomes a gray block. Is there any way to get support for the distortion effect AND 2D light without having to choose one or the other?
I believe there is a way to do something similar with the 2d forward renderer, but you have to use a custom blip script. GameDevBill had a shader video that mentioned something like this.
Honestly there could be a lot going on in this case. The object shouldn't be culled during the rendering or overdrawn, but it depends on all the settings of your render pipeline, which unity version you are using (each version has some unique changes to the pipelines), if the object is opaque or has transparency, ect.. Technical art is very difficult. These videos I did was more for sharing a method I found to work for the situation I needed, not a silver bullet solution. I know this isn't super useful for your current issue, but I hope you can find a solution for your project.
@@SethFunk Thank you, it really was the way it has been updated. So imanaged to figure out how to do it and now i wanted to do it again, but i forgot how id did it exactly hahahahahaha
I just tested UI buttons with the method I show in this video, and it works. All you need to do is drag the object being used to distort over your UI elements
Thanks a lot for your tutorial, after some tries i almost made it work. Im having a problem with what i think its the camera, since my disortion effect looks good in the Scene tab, but it's not shown on the Game tab and when im playing. Im using Images components since im doing it on a UI, i have a background with a river and i want to make the water distort following the waves. Dunno if the problem comes from the camera or from the images components. Anyways the distort i seems to be on the whole screen, and not only on the waves image isolated, so i don't really know if this would work for me lol Anyways, appreciated your tutorial, made me get a first contact on with the URP assets and all of that. Thanks buddy, let's see if i can fix this :)
Interesting. I honestly am not sure how to fix it once it is a UI component. I believe UI is handled differently in the rendering stack, which could be one of the reasons why you are seeing issues. But it is great to hear that you were able to learn from this video!
@@skyrod5823 glad to hear you got it to work. These types of tutorials aren't meant to give you the "only solution" but rather they are here to help expand yoyr knowledge on the basics of shaders that way you can start learning how to tweak them yourself. As for the transparency issue, thats typically due to the version of unity that you are using, due to the order of the rendering stack changing between versions
discord.gg/6CeqcEFCM3 Sorry about that. Those links are never suppose to expire but discord is pretty janky at times. But hopefully the 2020 tutorial is more helpful!
@@angelbaby3342 this technique is basically just a filter over an area. It sounds like you are looking for vertext displacement. Which is different then this
Did you install the universal render pipeline package? Did you create the urp asset via right mouse click universal render pipeline in the assets folder?
@@kuntycat oh that makes sense now! I believe all pbr shader functions are considered to be under any type of lit shader graph. It had something to do with unity trying to make it easier for cross platforms and how shaders work
It works with 2d and 3d objects. There is a disclaimer in the video that states the 2d render pipeline does not work, but a 2d game does not necessarily need to be made using the 2d renderer pipeline.
Finding this in 2024 still helps a lot, thanks!
I've spent some extra time wondering why everything looked way too blurry in my project until I noticed Opaque Downsampling setting in the Universal Render Pipeline config, setting that to "none" gives that nice crispy final image with all the distorting effect still looking great :)
I'm really glad to hear that these videos are still helping people. Thanks for checking it out in the first place!
Why is it that the more to the left on the screen, the stronger the distortion?
Guess I don't fully understand your issue, The effect is viewed through an object such as a plane or sprite shape. Those objects will depend on where you see the distortion. As for how the distortion itself looks, that's fully based on the shader, which I walk through it in the video.
Dont multiply the screen position and your noise maybe try to create a UV node and add your noise to and then multiply it with your distortion power (didnt try)
For those following this video but having problems, make sure you are using the "URP Universal Renderer". If you use "URP 2D Renderer", the distortion effect shown in the video does not appear. (I don't know why)
after 3 days of trying to make a distortion wave in my game, you solved all my problems :D
Thanks mate
That's awesome dude! Good luck with your project!
@@SethFunk good luck for your channel!
Hello I am using Unity 2022.1 but I couldn't find forward renderer. The closest one I can find is "renderer 2d data". Some of the options in the video are not there in the inspector and I couldn't make it work. Will you post a video about the same trick Unity 2022? Thanks!
Just found out! It's called URP Universal Renderer instead of URP 2D Renderer.
@@tomxuan9050 I'm glad you found it!
Very well done, thanks.
But I can't get it to not duplicate some sprites (like, a second player appears on the distortion effect). I've made sure the sorting layers are correct. What could I be doing wrong?
This shader is effectively take the pixels on the screen beneath the object that you are using the distortion effect on. Those pixels then get moved around based by the shader which is the very simplified version of how the shader works. This means any object you move the distortion effect over can possibly be seen in two places depending on where it is near the "distortion" object. One way to help prevent this is you could use the "distortion" object as a mask as well an when it covers an object, that portion of the object is hidden. But then you'd need to learn how to utilize the different rendering passes such as the stencil/mask buffer. It can get complicated very quickly once you go outside of the scope of this video.
@@SethFunk hmmm I see...
I have very limited knowledge of shaders. If I want to have, say, a top down distorted water and a boat on top of it. What would you say is my best bet then? Would it be easier to just apply the distortion in a texture?
@@SethFunk I did it!! I used 2 cameras, one with lower priority filming just the water effect and another one filming the rest of the game with no bg color or skybox. now I just need to leave the space empty and the water effect is there!
Thank you so much for this video!
@@giordanonin That's definitely an option. You just have to be careful with the overhead you get from using 2 cameras in a scene. (rendering a scene 2 times is very resource heavy)
I can't find the forward Renderer, does anyone have same problem?
I linked the video to the lava shader graph tutorial that covers the renderer stuff:
ruclips.net/video/6Yloso8vTQ0/видео.htmlsi=NFvS7Gmknsf9v5zA
Great stuff thanks man! I was struggling with a 2d project where I needed distortion. You rock!
Thank you, glad it helped out!
@@SethFunk is there any way to get this to work with 2d renderer? Because I would like to be able to use this along with 2d lights
@@alexthompson8977 good question. Depends in which version of unity you are using. For 2020 and 2021, i believe you'd need to write a custom blit script. Which if you do that you minds well figure out how to write shader code. In the newer versions of unity, i know they changed the pipelines again so it might be possible. Haven't looked much into doing it though
@@SethFunk so if I do that it'll work in 2d renderer?
@@alexthompson8977 I'm assuming you are fairly new to programming or game design in general. There are no one size fits all solutions. So you'll need to do the trouble shooting to figure out what and will not work if you are not following this process 100%. But short answer is there is a way to achieve this effect, but you'll have to figure it out.
Great Video! This helped me understand so much about Shader Graph. One note, I did need to change my Material in 'Sprite Unlit' in the Graph Inspector to get it to work, but otherwise this was a flawless tutorial, very detailed and the explanations are super helpful!
I am glad it was helpful for you. Good luck with your future shader adventures!
@@SethFunk I have an issue. The shader works however I distorts my images(not sprites) when I don't want them to be distorted. This is even after I have it set to a layer that's not supposed to be affected
@@alexthompson8977 could be a few things. Not sure if i tested this with ui elements (images) so it could be getting effected due to the rendering order. But the layer tag should help prevent this from being an issue either way. You could always try changing the render order in the forward renderer asset. Its always hard to help troubleshoot with out seeing how your current project is setup. Shaders/graphics are a complex subject with a lot of moving parts. These tutorials are more of a guiding hand to get you in the right direction and usually some additional self troubleshooting can be used to get the result you want.
@@SethFunk never mind I solved it by switching to sprites
Another severely underrated RUclips gem. You saved me a ton of time and frustration. Thanks man
Thanks for watching! I'm glad it helped!
Hey are you open for specific questions somewhere on discord or so? I'm struggling to get the right effect for my game and you might be able to help me figuring it out.
The link to my discord channel is in the description.
@@SethFunk ah sorry, it didn't work for me first but was a discord bug
@@StardustTyphon Gotcha, yeah sometimes those links randomly break. Discord can be frustrating at times lol
Distorted Tuna makes me laugh! Great video (:
Is there a way to do this without messing with the layers and it just be the shader?
probably not with this method. This relies on a certain part of the render pipeline which uses the layers to determine which items to process when.
Newer versions of unity 2022 and later does have an improved shader graph, so you might be able to do it using the newer nodes. Distortion is basically offsetting a UV over time with a unique pattern. Once you understand that, might be able to build your own shader graph, or use that info to write a a normal shader.
Liked and subscribed, thank you! You've provided me with a simple solution for something I've wanted to do for a long time. I have one problem though, in my URP renderer list I already have a Renderer 2D Data. I use 2D light in my game but it ceases to function when I set the Universal Renderer Data as default. When I set the Renderer 2D Data as default, the 2D light works again but the texture supposed to give off the distortion effect just becomes a gray block. Is there any way to get support for the distortion effect AND 2D light without having to choose one or the other?
I believe there is a way to do something similar with the 2d forward renderer, but you have to use a custom blip script. GameDevBill had a shader video that mentioned something like this.
@@SethFunk I'll look into that, thank you!
Use "URP Universal Renderer" instead of "URP 2D Renderer". The formal one has options that this tutorial needs.
@@홍윤표-j7v i tried using URP Universal Renderer but i still get a gray block too
i would like to have an object that is not affected by this effect, but when i change this, the object gets invisible D:
Honestly there could be a lot going on in this case. The object shouldn't be culled during the rendering or overdrawn, but it depends on all the settings of your render pipeline, which unity version you are using (each version has some unique changes to the pipelines), if the object is opaque or has transparency, ect.. Technical art is very difficult. These videos I did was more for sharing a method I found to work for the situation I needed, not a silver bullet solution.
I know this isn't super useful for your current issue, but I hope you can find a solution for your project.
@@SethFunk Thank you, it really was the way it has been updated. So imanaged to figure out how to do it and now i wanted to do it again, but i forgot how id did it exactly hahahahahaha
Hey Seth, Thankyou for this amazing tutorial! I just wanted to know if you could maybe make a tutorial on how to use this distortion on UI
I just tested UI buttons with the method I show in this video, and it works. All you need to do is drag the object being used to distort over your UI elements
great tuto! you save my life XD
Unity shader graph tutorials to the rescue! 😂
i liked it for tuna, but also great vid!
Hey I appreciate the positivity!
Thanks a lot for your tutorial, after some tries i almost made it work. Im having a problem with what i think its the camera, since my disortion effect looks good in the Scene tab, but it's not shown on the Game tab and when im playing.
Im using Images components since im doing it on a UI, i have a background with a river and i want to make the water distort following the waves.
Dunno if the problem comes from the camera or from the images components. Anyways the distort i seems to be on the whole screen, and not only on the waves image isolated, so i don't really know if this would work for me lol
Anyways, appreciated your tutorial, made me get a first contact on with the URP assets and all of that. Thanks buddy, let's see if i can fix this :)
Interesting. I honestly am not sure how to fix it once it is a UI component. I believe UI is handled differently in the rendering stack, which could be one of the reasons why you are seeing issues. But it is great to hear that you were able to learn from this video!
It dont work on transparent shaders. Is it normal?
Fix it by setting the "event" on "BeforeRenderingSkyBox"
@@skyrod5823 glad to hear you got it to work. These types of tutorials aren't meant to give you the "only solution" but rather they are here to help expand yoyr knowledge on the basics of shaders that way you can start learning how to tweak them yourself.
As for the transparency issue, thats typically due to the version of unity that you are using, due to the order of the rendering stack changing between versions
Very helpful ! Thank you !
I'm glad it helped!
thank you man you are awesome !!
I hope the video helped you out! Technical art can be pretty difficult without any support!
Are you going to play Brackeys Gamejam games?
I can play the games, but not rate them. Sadly I did not participate in this jam this go around!
@@SethFunk oh ok I wish atleast you play those games and give feedback :)
The discord link is not valid! :(
discord.gg/6CeqcEFCM3
Sorry about that. Those links are never suppose to expire but discord is pretty janky at times. But hopefully the 2020 tutorial is more helpful!
Can this be applied in 3D?
Depends on what you mean. It works on 2d and 3d elements.
@@SethFunk Yeah the focus as a 2D interface so I was confused if this was only for 2D
@@angelbaby3342 this technique is basically just a filter over an area. It sounds like you are looking for vertext displacement. Which is different then this
I can't find URP-Forward-Renderer ㅡ
Did you install the universal render pipeline package? Did you create the urp asset via right mouse click universal render pipeline in the assets folder?
Dont search it. You have to use the render you re using in the folder parametre
It didnt work... using unity 2020.3.20f1 ... I watch 3 of your tutorials about distortion but still cant figure out what is the problem...
Are you using the correct render pipeline? Did you follow the videos step by step? What do you mean by it doesnt work? What is happening?
@@SethFunk not pbr shaders unity 2020
@@kuntycat I guess I don't understand your comment. I don't use a pbr shader graph for these projects?
@@SethFunk yaps, PBR graph doesn't exist in unity 2020 , help me
@@kuntycat oh that makes sense now! I believe all pbr shader functions are considered to be under any type of lit shader graph. It had something to do with unity trying to make it easier for cross platforms and how shaders work
should probably take '2D' out the title -- this shader doesn't work with URP 2D renderers, so its incompatible with pixel perfect, unity tile sets etc
It works with 2d and 3d objects. There is a disclaimer in the video that states the 2d render pipeline does not work, but a 2d game does not necessarily need to be made using the 2d renderer pipeline.
BADGER FROM BREAKING BAD