HOW TO MAKE DISTORTION/HEAT EFFECT FOR 2D & 3D - SIMPLE SHADER GRAPHS - Unity 2019 LTS

[@ash_does_dash]

First, thank you for the tutorial, video editing is also great. Very useful stuff! Second, I think it's important to note a couple of points: 1. Shader noise. For mobile - it's an unacceptable node (any procedural noise). What can be used instead is prebaked noise (a picture, using Photoshop, GIMP, etc.) and scroll through tiled pictures (not a procedurally generated noise). This is especially harmful if you render a lot of pixels with this shader. 2. The total amount of passes and batches is almost doubled. What you do here is render [everying but distortion], then [render everything with distortion]. Your first pass fills opaque texture, your second pass re-renders the scene completely, but distortion works *only with opaque texture*. What you really need is just processed opaque texture (for SceneColor node) and you doing this in the very first pass. To optimize (in forward renderer): 2.1. Remove all features, set transparent filter to nothing. 2.2. Add feature "PassToOpaqueTexture". Event: anything earlier (higher in the list) than "BeforeRenderingTransparents" . This *ensures* you work in opaque layer/texture. Filter: transparent and everything but distortion. 2.3. Create second feature "PassAfterAndWithOpaqueTexture". Event: "AfterRenderingTransperets". Filter: transparent, and your distortion layer. What happens: you render in first pass everything. Also, you fill out opaque texture. Then in the second pass, you render distortion and nothing else (hence no more extra rendering). You also won't need to set any sorting order. It will always be higher than the first feature. If your project has opaque objects, features and filters can be adjusted accordingly. For mobile platforms doubling the number of passes is harmful.

[@SethFunk]

That is some great info! I definitely won't claim to be a shader expert. A lot of what i found out how to do was by trial and error/testing and trying my best to understand the documentation available. I think I'll pin this comment so hopefully it helps future viewers!

[@alexthompson8977]

do you know how to do this while also having 2d lights? because 2d lights and materials only seem to work with 2d renderer not forward renderer.

[@poobels]

I've had to change the event on the Distortion Feature to BeforeRendreingOpaques for it to work. This Feature was exactly what i was looking for for some time. You've helped me a great deal of the way. TY!

[@nasta4554]

This is a cool shader! You're so close to 300 subs edit: Your video quality is getting better and better every video

[@SethFunk]

Thanks man! And I appreciate you checking it out and giving feedback. It really does help!

[@vizualwanderer]

Hey great style of video. However, I have a question is there a reason the Forward Renderer functionality is grayed out and its components like Add Renderer Feature is unclickable?

[@SethFunk]

It maybe due to not having the renderer setup correctly. You need to be using URP (Universal Render Pipeline) and then go to project settings and ensure the graphics settings has the newly create pipeline asset selected. Refer to my lava shader video to better understand how to set up a project with URP.

[@fajcoo]

Thanks for tutorial. I have a difficulty that to apply the distortion to certain mesh only. I don't know how to set the layer. Is there any related tutorial?

[@SethFunk]

This type of distortion effect should only be applied to a 2d sprite object. The idea for this particular shader is a heat effect or blurring effect that can be applied to an entire scene or partial depending on the size of the 2D sprite shape. If you want to distort just a single object, this is probably an easier way. More than likely just tweaking the object's UV map would probably work.

[@fajcoo]

@@SethFunk Thank you very much!

[@charlestheninja]

Does it still works? I'm using 2020.3.16f1. The shader distorts the scene, but ignores the sprite that I want to distort. They have the same order in layer and I've tried to change the order in layer too. Everything is exactly just like yours, but I can't send screenshots here.

[@SethFunk]

There is a link to my discord if you want to send screenshots and discuss further. But here is the tutorial I made for the 2020 versions and later: kzbin.info/www/bejne/d2m9ZISsjqajpM0

[@MattBee2k2]

Nice tutorial dude. Something no one else does is go into detail of how unity is handling things behind the scene which goes a long way to just understanding how everything works together. How do we do the Render Feature stuff if i'm using a 2d renderer as I'm on 2021 unity? Or is that step all just skipped?

[@SethFunk]

I honestly have not tried unity 2021 version. I would have to assume for now that there would be an option for renderer features under your URP asset still. I will check out the documentation and might download 2021 to try it out.

[@MattBee2k2]

@@SethFunk I'll have a further look with documentation. I checked the pipeline asset and renderer but sadly didn't see anything of the sort but be nice to get it working as your effect is exactly what I need.

[@SethFunk]

@@MattBee2k2 So I did some research on the 2d pipeline supporting renderer features, and it seems that Unity does not currently have any plans to support the feature. It is recommended to use URP since it gives similar results to the 2D pipeline but has more options.

[@MattBee2k2]

@@SethFunk Interseting I'll check it out and appreciate you looking into it and getting back to me. I've used URP with the 2d pipeline as i'm on mobile and wanted to keep thigns simple. I was actually able to get a distortion effect on the go just offsetting uvs over time with noise by following gamedev bills tutorial on heat haze. On a deep dive on shaders so be binging your channel and joined the discord. Keep up the good work mate!

[@Xeridae]

@@MattBee2k2 Don't get rid of the 2D Renderer. Just add another renderer to the renderer list under the pipeline. Per Unity. The 2D Renderer includes: 2D Lights Lit and Unlit Sprite Masternode in Shader Graph Pixel Perfect Camera component As a reminder: This will be the new home for Pixel Perfect Camera. The standalone package will still receive bug fixes, but new features will only be added here. This is the same component with the same workflow as the one in the Pixel Perfect package. The main change is that Pixel Perfect is now compatible with the 2D Renderer in Universal Render Pipeline. Normal map support for all the other 2D renderers: Tilemap Renderer Sprite Shape Renderer; and Sprite Renderers that are deformed by bones. Experimental shadow caster component Post-Processing support You'll lose all of that if you try to remove it.

[@PepeVieri]

Hey! Really nice video. I had a problem with the shader, it turned out to be grey and didnt see any effects :/ What could be the problem. I am using URP with 2d lights. Also with new shader graph update i didnt have unlit master node(i think), I had vertex and fragment nodes as the master nodes.

[@SethFunk]

Hi there, it sounds like you may be working in a newer version of unity or at least a newer version of shader graph. Use the link I put at the end of this comment to download a github repository using the newer version of the shader graph which should work in the newest shader graph and any unity version later than 2020. I believe the render loop changed between 2019 and 2020 versions which requires you to change the when to render the distortion effect via the render feature. Also in the actual shader graph you just have to plug the final node into the color section of the fragment node. github.com/SnootySnootGames/DistortionShaderUnity2020AndLater.git

[@RiaanDuPiano]

Okay so I did exactly everything you said in the video to a T two times over now but my distortion image remains grey, and I can't see the image behind it. The only time something does happen is if I put my camera's background type into skybox mode and then on my camera the two settings it has there, I turn opaque texture and depth texture to on. Then i can see the distortion working however, it only uses the colors from the skybox and even so it's not completely accurate, even then it still has some transparency issues. I really need this to work for a game I'm doing but I keep hitting a wall on this, i tried other videos with the similar idea behind it. I also setup my pipeline the way you said it in your lava video but still no luck. Any help would be greatly appreciated thanks m8. Could you maybe link a project file so I can see exactly whats wrong?

[@SethFunk]

I should be able to do that. I'll post one in my discord server. I'll sned a link to you when i get the chance too. Shouldnt be too long

[@RiaanDuPiano]

@@SethFunk okay thanks

[@RiaanDuPiano]

@@SethFunk my discords not working rn for some reason, a link on here too would be great if that's what you meant

[@SethFunk]

@@RiaanDuPiano I'll send a link here for you when i get it done! Thanks for being patient!

[@RiaanDuPiano]

@@SethFunk no worries, thanks

[@Chief-wx1fj]

Is this possible to do with the "2D Renderer Data", since all of the 2D lights use a 2D Renderer instead of the typical "Forward Renderer". All of the features like "Add Renderer Feature" is missing etc :/ Anyone have a solution/suggestion? Edit: its not there yet, but coming to Unity version 2021.2

[@SethFunk]

Is there any reason you can't use the urp forward renderer? I know 2d seems convenient but urp can do almost the same things but gives more options when it comes to shaders.

[@Chief-wx1fj]

@@SethFunk the only reason are the 2D Lights and Shadows (which are great by the way), which won’t work when switching to the Forward Renderer :/ but luckily coming to the next version, will come back to this tutorial then, awesome tutorial btw

[@SethFunk]

@@Chief-wx1fj Sounds good. I know I have faked in 2d lighting using 3D geoms before and it turned out pretty interesting, but I completely understand why you want to keep the 2D pipeline. There are other ways about creating a similar effect, which GameDevBill has a couple tutorials if you follow can help you understand how to do it. It's a lot more complicated though. And I believe it even works with the 2D pipeline.

[@Filgaja]

@@SethFunk This would be great . I need the 2D Renderer because i use costum axis sorting and forward rendering do not have this. I manged to get this distortion shader to work from your tutorial but then the sorting is totaly broken :) there is literly no sorting order by y Axis anymore and i do not want to do this by code. 2D renderer is a great way for an automatical sorting by pivot or center. Here is a short preview on youtube: AYf2Monevpo As you can see i do a looooooot of sorting and forward rendering isnt working this way :D Also i think the camera was complaining about i need 2d renderer for pixelperfect camera. Never noticed you only has this few subcriber :o I came to your chanel in the past. At least i can remembered your face :D Keep up the good work

[@SethFunk]

@@Filgaja Hey, I awhile back someone on my discord channel said they found a solution for using the 2D pipeline. here is the link to the message thread (you might have to join the discord to be able to read it though) discord.com/channels/808026970439811112/808370866022121492/961031287802576967

[@farn2388]

Would there be any issue with the error message that says there's no _MainTex? I'm trying to put this shader together but I keep getting a gray square with no effect on it when it's applied to a sprite.

[@SethFunk]

Are you applying the effect to a 3d model or a sprite?

[@farn2388]

@@SethFunk Hey sorry, I was trying it out on a 2D sprite but it turns out that this doesn't work if you're using Unity's 2D lights. Unfortunately, the renderer used with that doesn't let you add renderer features. As of 2020.3 that is, not sure if they've updated it in newer versions.

[@SethFunk]

@@farn2388 there is a way to use the 2d light system but you have to use a blit script. Gamedevbill has a good video on the subject

[@farn2388]

@@SethFunk Ok thanks! I'll check out his videos.

[@SethFunk]

@@farn2388 good luck!

[@RiaanDuPiano]

sorry but exactly what version of 2019 lts are you using?

[@SethFunk]

Hey there Frozen Mango. The version I was using in the video was 2019.4.12f1 but should work with pretty much all versions past 2019.3

[@turbomixer17]

BEFORE RENDERING OPAQUES your welcome

[@SethFunk]

You must be using a newer version of Unity? I have a tutorial for 2020 and later that talks about that. The rendering pipeline changed between versions.

[@turbomixer17]

@@SethFunk Thanks, I'll check them out

[@riaan077]

doesnt work, my distortion sprite just shows up grey and doesnt do anything

[@SethFunk]

That doesn't give much to go off of. Did you set it up exactly as shown in the video? What type of renderer pipeline did you use? ect..?

[@amaurymehlman7557]

Your discord link is unavailable , can you drop a new link ?

[@SethFunk]

Sorry about that! discord.gg/YUbRk325Bz