Outline Post Process in Unity Shader Graph (URP)
ฝัง
- เผยแพร่เมื่อ 23 ก.ค. 2024
- Until now, it's been tricky to make your own post processing effects in URP. It's going to become much easier in Unity 2022 through the new Fullscreen Shader Graph, and in this tutorial video, I'm going to create an outline post process to see how it all works!
------------
✨ Snapshot Shaders Pro Sale: itch.io/s/89921/snapshot-shad...
👇 Download the project on GitHub: github.com/daniel-ilett/shade...
📰 Read this tutorial in article format instead: danielilett.com/2023-03-21-tu...
------------
📚 Get a copy of my shader book here (affiliate): www.dpbolvw.net/click-10074214...
------------
🌐 Spartan model by ikreinin: sketchfab.com/3d-models/spart...
------------
💬 Join the Discord: / discord
💖 Support me on Patreon: www.patreon.com/danielilett?f...
☕ Or throw me a one-off coffee on Ko-fi: ko-fi.com/danielilett
------------
00:00 Introduction
01:03 Setting Up
02:36 Normal Edges
04:41 Color Edges
05:09 Graph Outputs
05:59 Putting It Together
07:28 Outro
#gamedev #shaders #madewithunity - เกม
just followed the whole tutorial in play mode. i love unity
😭
Change the Unity Editor color when in playmode. Saved me a bunch of times.
😂
HAHAHAH
If anyone can't see the 'Pass Index' dropdown like I couldn't, you can click the three dots on the header for the Full Screen Pass Renderer Feature (the header where you should see the dropdown) and click 'Show Additional Properties".
helped me out, thanks!
Great video, quality as usual. Thanks for this.
Looks great! I can't wait to implement this in my game 🙌✨ Thanks for sharing!
AWESOME tutorial, Thank you so much!
That is awesome Daniel, and made so easy by your explanations ! Thanks. It feel like a good tool to get creative with URP
Ty so much, im starting to practice shaders and not only your shader, your explication it´s good for my.
I am realy looking forward for your videos thanks for sharing your knowladge with us :)
For additional thickness Change the ones in the Divide node to a higher value
Thank you so much Daniel, this is exactly what I needed to get down and dirty with custom post processing in URP
The best shader out here! Thanks, man!
Best outline shader that's i've ever seen on youtube
I love unity in many areas, but not when we talk shaders , rendering and post process. I've learned to do this and cell shading on unreal wich I feel its way more intuitive and easier to do than it is on unity but I'm really glad it getting easier to do and understand on unity that is my favored engine. Just by staying on shader graph only is a big plus. I may try diving on those waters again . Thanks for sharing!
I wonder if they could give us the option to choose a Sampler with the URP Sample Buffer.
It seems like it would allow for a much more feathered/anti-aliased result, smoothing the Outlines more during the process.
That said, I suppose you could simply try resizing the Render Texture scale to be a bit higher and/or use x8 AA settings to counteract some of the aliasing of the Outlines... or use a Sobel algorithm as opposed to the Robert's Cross approach to get a more refined result, at the cost of performance.
This is the best tutorial I have done on this, and I cant find any other videos to help, and all of it is in black and white, help please.
I had gone with a different method in the past, writing my own renderer feature and rigging up a shader graph material that utilized the depth buffer instead. This graph you have now though looks quite a bit nicer than mine, and the fact you don't need to invent a new renderer feature is a big plus. Might just have to do a bit of refactoring ;)
Yeah, there are a lot of ways you could have done an effect like this. I'm glad that this approach means you don't need to actually write a renderer feature, because I feel that's a big obstacle to a lot of people.
Great Video, thanks for this. One issue I've found with trying this is that the outlines seem to ignore the z order. So for example if I have a UI health bar (in world space etc) say above a characters head then the outline from another character in the background can be seen through the green line, making it almost unreadable. Do you know if there is a way to resolve that? Thanks again for a really informative video.
Hello! Great tutorial. Maybe you can give some advice how to add thickness and noise to outline?)
Hi!
I was hoping to eliminate the jagged edges by using TAA, but instead TAA makes it even worse!
To be precise, it makes all the edges jitter - a lot. Probably as a result of how TAA is created.
I tried to use SmoothStep instead of Step, but didn't change much.
Any suggestion on how to make this (and I suppose other shaders you may have created) TAA friendly?
for those who facing with black screen issue, make sure that you choose the outline material, not the shader graph itself
Great video, could you tell us how to control the thickness and also how to only effect certain layers?
Thickness likely can be achieved by sampling larger distance of pixels (multiply +/-1 by thickness). As far as per-layer effect, you cannot do that with this setup. You would have to use the older way of doing outlines to select layers (until Unity adds the option to filter by layers with this configuration)
You could add an Emission node to make the outline more noticable. Plug in the Overlay? into the color of the emission node and turn up the intensity of the node to your liking. Do not forget to enable bloom in your settings.
I though to blur the outline texture then step it. I'll test it.
you can change the thickness if you make an add node after the first split node. Its important you use very small values for it though
finally was researching this for the last 3-4 days and they brought up the exact thing which I wanted. a bit creepy :D is it possible to get the same effect on urp 2021 lts? would be awesome to see a tutorial for that
Fullscreen Shader and Sample Buffer came out in 2022.2
Hey I've just started unity so mind my possibly silly question. After the screen node you have the divide node followed by a split node. Given that the output of the divide is a vector2, can't you simply take the 2 outputs from that same divide node and plug them into their corresponding vector2 node?
This was a super neat video and made me understand everything quite well. Thanks a ton.
If anyone has a problem with the screen going black. Change the blend mode in the graph settings to premultiply!
great video! is it possible to get scene depth? depth is very important for effects like depthfog
Great. How to make the outline thicker
It works on the half top left side of the display
Hey nice video man! Just only one thing. Is there a way to add depth to this shader? I tried replacing nodes with the scene depth one (which barely works, in many spots the shader just does not work), but i cannot get a fully working result
is possible to make a bloom post processing shader on a specific object layer with shader graph and 2022.3lts?
ufff 10/10
Very cool! Is there a way though to control the thickness of the resulting outline?
Am wondering the same thing. Let me know if you've figured it out.
Is it possible to convert this effect per object (material/object specific) instead of being a post process effect?
Great little video!
Do you expect this to be performant (meaning viable) on mobile devices?
I guess it depends on whether you mean high-end or low-end mobile but it's probably decently efficient. You end up doing 9 samples per pixel, but other edge detection techniques sometimes do more than that. You could remove either the color-based or normal-based nodes to bring it down to 5 samples if you want to improve performance at the expense of the effect looking a bit worse. Shader Graph sometimes has a bit of overhead compared to hand-writing an HLSL shader but it's probably not that much.
That is nice. Does it work on mobile and Vulkan graphics too? Or does it need to be higher than OpenGL ES 3.0?" 😄
Great tutorial, Bro! Thanx a lot, but I have one issue with this graph - when "Overlay ?" is off there is black screen under the outline (and when "Overlay ?" is on you can actually see 3D with ouulines on it).
thats because everything that is not outline is equal to 0 in the shader, and outline is white (1) multiplied by color. Thats how this shader is intended - you either see your scene with outlines, or black screen with outlines, controlled by the keyword.
I am COMPLETELY NEW to shaders and post processing. But I was wondering if there's a way to get this effect different per character. Like some characters having different outline colors and thickness.
That looks good !
I dont have the Full Screen pass renderer feature available. Any idea why?
same thing wouldn’t appear for me, because we have older versions
2022 LTS is taking soo long, but i hope its gonna be good.
I have drawn several pentagrams on my floor to try and summon 2022 LTS but it hasn't worked yet. Fingers crossed it's soon!
@@danielilett did u place 22 candles or 23?
How can I make the lines show through the models?
got a problem where the outline only applies on half the screen in blit mode (also the outline won't appear in the game view), any idea as to why it happens? pls I am desperate
Having a problem where everything is black in scene, I looked at some other comments and changed blend modes, and all leave the scene black except additive, which just shows me the scene as normal without outline, anyone got a fix?
Hi Daniel, Do you know if we can somehow add a threshold so that if the object is far outlines are not drawn, as right now far away objects turns all back because of it
The shader is missing the depth buffer. Meaning you would also not have outlines, when another object is behind an object, and the normals + colors are matching.
So first you would need to copy paste the setup again for depth buffer.
Then, to get rid of the outlines far from the camera, add a smoothstep on the depth value, use a new threshold for that too, and multiply the output with the overlay alpha. Done.
Is it possible to change the outline thickness when using this method?
Is it possible to use this post process on a specific layer only?
Any idea how this can be applied only to certain layers?
Not to certain layers, but certain Gameobjects. Set Material in Graph Settings to StackLit. Plug the "Overlay?" into an Add node. Add a SampleTexture 2D plug it into the add node. Assign your texture in the Texture input of the sample texture node. Works in HDRP 2022.2.20
I've got the impression you only get difference of up, down, right and left pixels, but not the left up, right up, right down and left down. Am I right or do I get it wrong ?
hi, I have this issue with black and white screen after adding the outlines. Do not know why
Hey, you've probably fixed it by now, but I was having the same issue and I found the solution, so I'll leave it just in case. You go to Graph Settings and change blend mode to multiply
Is there are way to exclude objects from the outline?
You would have to render outlined objects on a different camera. You can have per-camera renderer assets, so if you have two cameras, one would have the renderer feature enabled, the other one wouldn't.
Though make sure they are renderered in the correct order.
Hmm. Is there a way to make outlines thinner depend on the distance between camera and outline?
hey did you ever figure out a way? stuck on the same problem 😅
Great video - btw. how performant is this shader and does it work with VR?
It's decently performant, in the ballpark of most edge detection and outline techniques. I don't have a VR headset so unfortunately I can't test that, but I have heard that Unity is trying to improve VR support with code-based Renderer Feature effects. Basically they're deprecating some Blit methods in favour of the new Core Blitter API which is more VR-friendly (forum.unity.com/threads/how-to-blit-in-urp-documentation-and-or-a-unity-blog-post-on-what-every-blit-function-does.1211508/#post-7735527). I assume Fullscreen Shader Graph uses the same underlying API so maybe VR support for effects is a given.
@@danielilett Thank you for your in depth response
For your information, it works great in VR. Test with a Vive Pro and a Meta Quest 3
Is there a way so separate this post process effect in a separate layer? For use in specific objects for example?
Not easily. Or at least, I'm not sure how you would with this method, or if it's even possible. That's something I definitely want to look into though, because it would be very useful to apply this to specific objects.
@@danielilett I wanted to separate it for separate characthers. One of the things I found was by making renderer features via C# code an set it up there, But I still need to study the renderer feature documentation though
Anyone tried this in Unity 6? It's all working except the effect is only happening to one half (triangle) of the screen.
Figured it out. The render feature "Pass" must be kept at "DrawProcedural" now.
2022 LTS out since yesterday, but 7:10 there is no pass index, still works tho
Ah good spot. I figured there would be minor changes between 2022.2 and 2022.3 LTS, but good to know it still works.
@@danielilett Hey, man! This works great, thank you for sharing. But I've got a question, how could I increase the outline thickness?
i'm a bit late to this, but the pass index is still there... click the 3 dots on the full screen pass renderer feature in the inspector in the top right corner and activate "show additional properties". then a "pass" option will appear, which essentially is the pass index
I exactly followed your tutorial to the end and it didn't work, was so frustrated and went to a other tutorial, the same results, the URP Sample Buffer for some reason gives me black backgrounds, but then I found your project files on your description, loaded it out from the latest unity version and seems to work just fine ^_^, so that means I kinda messed up right?, I feel dumb, and yea I'm dumb xD
This is only with the experimental features in the 2022 versions right?
Yeah! It would have been great if it were backported to earlier Unity versions, but it's only in 2022 and upwards.
How can you accomplish this effect with the depth as opposed to normals and color?
I think you can still use the Scene Depth node in Fullscreen graphs to get depth information, then you do the same process of calculating the difference in depth between adjacent pixels. Just note that there's a "Depth Texture" option on the URP Asset (in the Assets/Settings folder) that needs to be ticked to generate the depth texture.
@@danielilett Thank you very much for this info! I actually managed to get it working haha. I'm now wondering if it's possible to get a normal based outline shader that is material/object specific, as opposed to a post processing image effect. I don't want everything in the scene to have normals, so I've realized either the render feature needs to work with only certain layers, or the effect needs to be object specific. Unfortunately the URP sample buffer doesn't seem to do much unless it is on a fullscreen material, so I'll have to find a way to use the world normals instead. If you have any tips that would be much appreciated. Thanks again for your videos!
My entire scene goes black and white when I put the material into the High Fidelity Renderer. None of the object textures appear, it's all white with black outlines
Same here, did you ever manage to fix it?
@@nazarenabernal6251 Yes. You go to Graph Settings and change blend mode to multiply. Sorry it took me a bit to respond
@@helearme3744 thank you!!
Hey, I've got an issue where only the colour edge detection seems to be working but it's not detecting the normal edges at all. Any pointer on why this might be happening? I did exactly as you did in the shadergraph. I set up the edge detection correctly as the colour outlines work great. It's just the normals outlines that won't show at all
edit:
I just loaded up the sample project from the github in the description and it does work even in the newer version of unity I'm using. (2022.3.9). Which means I must have missed something, whether in the shader or the urp settings.
edit2:
So I've downloaded the example project linked in the description and been working in that instead since it has the correct settings. However I've been writing custom hlsl urp shaders and now those don't seem to have outlines even though the default materials now do. They're unlit urp shaders so I assume that is part of the issue?
Im having the exact same problem, did you figure out what it was?
@@AdrianDLGA its because I was doing custom lighting in an unlit cgprogram shader. It wasn't providing the normal information to the camers. You need to add a "depth normal pass" to the shader yourself for it to pass that information to the camera
@@fastest_mia Oh I see, but where you able to do it in a different project or you just kept using the git hub one? 😅
@@AdrianDLGA after copying the sample project files it did seem to work yea
@@fastest_mia thank you!
using this shader on HighFidelity give me fps drop from 140 to 15~40, switching to balanced works perfect,
Can’t believe post processing can be managed by shader graphic, actually just modify the last frame of the game, shader node post processing did make scenes
I have follow exact steps but I am getting outlines with black white screen. Anyone had this problem?
I have the exact same problem. did you find a solution? :D
@@erikm.hasenknopf2960 i have the same issue, did you guys find an answer?
@@kriztov @erikm.hasenknopf2960 idk if you still need this but go inside the shader graph and set the blend mode to additive
i test it and with MSSA is not the best .
Ey, maybe I am absolutely fucking dumb; but for some reason I did all the steps and is only... applying to half of the screen? Like a diagonal slice of it, the upper part to be precise. Any idea why this may happen? I am pretty sure I did all the steps right, but this just seem like I am only taking a sample of half the screen to apply the shader to and I don't know why. I have tried conecting the vector2 node that is conected to the screen node directly to the final output of the shaderGraph (to see if I somehow failed at applying the math nodes) and still only works for half the screen; it shows a yellow triangle blocking the top and left part of the screen in both the game and scene views.
Could it be the renderer? Or it is for sure something wrong with the shaderGraph?
Hey, according to the documentation:
"This error can happen when you use a full-screen shader with a custom pass C# script that uses the Blit() function, and you haven’t selected the Blit shader pass in the Inspector window or in a script.
To fix this error:
In a full-screen custom pass, set the Pass Name property to Blit.
In a post processing script, set the Blit pass to 0. For instructions, see Set the Blit pass in a C# script."
I hope it helps.
@I eventually got it working, it seems that just using default instead of Bit in the renderer dropdown works just fine.
Thx tho. :D
i ran into a very funny glitch where the entire editor including ui gets edge detected idk why
I tried applying it form HDRP but I failed :( Would be great if you could translate it into HDRP. There are missing things in HDRP like the blit, and other odd things.
wait does this mean this outline will affect the whole scene?
Yeah, this is a post process effect which doesn't attempt to filter out specific objects in the scene. It just gets applied to the whole thing. It'll work great for scenes with distinct-looking objects, but maybe not quite as well for very busy scenes with similar coloured objects overlapping.
Is there a way to change the outline thickness ?
that's what i've been trying to do, have you found any way?
@@atanki5682 yeah kinda, I used the overlay camera method. You have to make a new layer, that’s going to be the layer which the lines are not rendered and this layer should be ticked in the culling mask of the overlay camera.
@@panagiotiskaragiavouroglou1998 I'm not sure I understand.. can you please elaborate further?