Creating an Outline Effect as a Post-Process in Unity
Vložit
- čas přidán 28. 08. 2024
- Outlines can be tricky to do in a mesh shader. So, let's do it in post instead...
--------------------------------------------------------------------------------
Want to support the channel?
▶️ Help fund new episodes by joining the Patreon - / gamedevguide
💡 Get One-Month Free of Skillshare Premium - skl.sh/MKR826
Use these links to grab some cool assets from the asset store:
Get the Must Have Assets! - assetstore.uni...
Free Unity Assets! - assetstore.uni...
New on the Asset Store! - assetstore.uni...
Top Paid Asset Store Packages - assetstore.uni...
Asset Store Partners - assetstore.uni...
--------------------------------------------------------------------------------
Socials and Other Stuff:
• Subscribe - www.youtube.co...
• Join the Discord - / discord
• Twitter - / gamedevguideyt
• Facebook - / gamedevguideyt
• Instagram - / gamedevguideyt
As someone with not a lot of experience with shaders (especially post processing shaders), this was a bit tough to follow, frustrating in some places where even a small tip could have saved hours of headache. I managed to get the outline part working at least, took a custom route for mouse detection and didn’t bother with the occluded silhouette as line of sight obstructions were part of my project.
In case any beginner is stumbling when trying to follow this, here are some tips that can hopefully spare some time and avoid some hurdles:
Make sure that you have the Post Processing library installed in your project in the Package Manager (duh!);
For the PostProcessOutline c# script (2:37-3:26, 7:00-7:11) make sure to import System and UnityEngine.Rendering.PostProcessing (at the top of the file), should be smooth sailing from here. Feel free to copy from this file when making the code for the PostProcessOutlineComposite script (7:28-7:36);
For the OutlineShader script (4:05-5:00) you can start by creating a Unlit Shader and removing some unnecessary stuff: the Properties, the commands in the SubShader before the Pass and keeping only the #pragma vertex and fragment lines in the CGPROGRAM code block;
From here you can follow the code from the video up to 4:30, placing this code before the Pass (and add a ENDHLSL for the HLSLINCLUDE block at the start). For the rest of the code you will need to swap the “CGPROGRAM [...] ENDCG” code block for HLSLPROGRAM [...] ENDHLSL and place the Vert and Frag functions there (if you are not familiar with the structure of shader code blocks, try searching “ShaderLab: adding shader programs”, Unity Manual should have you covered);
Make sure the name at the first line of the shader script is the same as the one used in the Shader.Find in our PostProcessOutline script. Also add the commands “Cull Off ZWrite Off ZTest Always” before the Pass;
Again, you can copy the OutlineShader code when creating the OutlineCompositeShader script (7:15-7:24) (not mentioned but you can copy the needed Vert shader from the first script);
Make sure your MainCamera and OutlineCamera are assigned different layers and its Post-process Layer components are set to their respective layer only, else the post processing effects may try to apply themselves on both cameras. Set the Post-process Volume components to global as well;
If your MainCamera has the build-in Tag “MainCamera”, the scene view camera in the editor will also render the post processing effects of your camera, this means your scene view camera will be having an outline overlaid that does not match the position of the overlaid object, since the render texture is created from the OutlineCamera perspective. THIS IS NORMAL! One of the buttons at the top of your scene view can disable post processing for its camera if this becomes too distracting;
(*EDIT) I also should add that if the outlines are displayed properly in the unity editor but don't show up in the compiled builds, you may need to force unity to include your shaders in the final build (Edit->Project Settings-> Graphics->Always Included Shaders).
TLDR:
[GITHUB]/EnderCheid/outline-post-processing-demo
@@EnderShade Another tip for beginners, don't follow tutorials. Read documentation.
@@Rinsakiii But then tf is the point of tutorials.
@@geekazodium tutorials are useful don’t get me wrong. But many beginning developers get stuck in tutorial hell where they can’t do anything without tutorials.
Hi! EnderShade. The information was very helpful. I wouldn't have figured this out without seeing your demo. Thanks a lot! @@EnderShade
Hi Mat, as a newbie to shader writing, I got a little bit lost while watching your video like how to create certain files and also the fact that you prefer this 'zoomed in' style of showing code, I couldn't really tell where certain lines of code meant to be placed so maybe like a little display of the name of the file you are writing in and perhaps just glossing over how you created the files. Thank you!
The same happened to me.
Same, I got that he added "using System;" because he wrote "[Serializable]" and not "[System.Serializable]" but that was not shown, so I figured there were other using tags that were not shown as "[PostProcess(typeof" was throwing a red squiggly line
This would be so helpful.
Yes, I’m still really new to this and maybe I’m not his target audience, but I need some help showing how you creat certain files and where in Unity you need to attach these to make it all work.
This is too hard to follow
I'm sure this is a great help to those who are able to keep up with it in the way it needs to be kept up with.
For myself (as an aspiring, new dev) the pace of this is actually pretty much a turn off for wanting to look into any of your other content. Frankly, it just makes me feel inadequate. When I feel like I need a tutorial to figure out a tutorial I just kind of look elsewhere, because it ends up coming across as verbal vomit of "Look what I can do!" versus trying to really teach or share with others on how to do something.
The end result it pretty awesome! I wish I had the ability to understand it, but perhaps it's just beyond my level at the moment.
Hey mate,
I am trying to follow your guide, but I think you are skipping the part where you are creating and linking the shader to the PostProcessing profile. For people like me who are not familiar whish shaders this is a blocker, because I don't know how create the shader and hook it to the profile. Some help will be appreciated. Thanks.
Yeah I just started creating a csharp script and deleted the start and update method
10 months later and not a single answer given :(
Nice tutorial! I am amazed again and again by the seemingly very basic things that you still have to create yourself (or get form somewhere else) despite already using Unity. Especially when I then read comments about people struggling with this for a long period of time.
Something that would have greatly helped me follow this tutorial would have been showing the creation of the the scripts and how you link them within the unity editor. Specifically glossing over creating an hlsl was kind of where I got lost and started doing some guess work.
This tutorial may look good but it's actually really trash. It's hard to follow along as it is skipping steps, if you're a beginner you will not be able to make the outlines with this tutorial.
VERY IMPORTANT: This method only works for the v2 Post processing stack, which is the build in (SRP) renderer only.
if you are using URP/HDRP, you need to use the v3 Post processing stack, which is added as a package by default and has slightly different implementation strategy.
Could you detail the differences in implementation? Im trying to use this guide on a URP project
yeah bro help us pls
This is exactly what I needed! Being a shader newbie, but intermediate coder, this video is GOLD. Thanks :D
Could you upload a sample project file on GitHub?
You should do a decal tutorial. Unitys decal solution is awful and many of the unity assets or tutorials are limiting because they don't work on mobile, VR or have bad performance. Great work love your channel
Unity’s decals are very well implemented imo in the URP and HDRP. If you enable deferred rendering, it can even modify the G Buffer.
The video starts mumbling from minute 3 to 5. What the heck is all that code...
Welp, it seems like it's just me who doesn't have enough ability to understand this hi-level programming
It is not only you. I also do not understand how he is creating the shader and how he is linking it to the profile.
I wish you could make this effect using the Shader Graph.
There is a massive lack of content in the internet for the cool and useful effects which could be made using the Shader Graph which is absolutely amazing and high performance for both HDRP and URP.
Could you not upload this project to GitHub? It took me hours to try and replicate this and it didn't even work. Time wasted successfully.
Even though I have been coding for 10 years I got lost when you show the C code. Should I create a file .hlsl or a C file? how do include the C code you show? It's not in the two .cs scripts that was created so far. I have never tried to code shaders before so I can't follow along when you don't explain each step enough.
This is a rough tutorial, I'm following along but none of the script stuff compiles, it all gives errors and asks for directories and you don't clarify what directories or where in scripts this code is meant to go.
This will not work for any URP / HDRP projects.
Also sucks that no github link is available.
I struggled with this a couple of weeks ago ! (I was even wondering if you had done a video covering the subject at the time).
I don't know why I absolutely wanted to achieve this with a single camera, scriptable render features and a tons of texture buffers... I'll fine tune my system with things you did here ;)
Anyway I wanted to thank you for your content for a while, you've been helping me for years !
I like the style of your tutorials - right to the point. But this one is too fast for me. I havn't worked with shaders before, so I couldn't follow and don't know how and where to use the shader files.
Same
Found this really useful! I've always come across geometry outlines that look atrocious in my opinion. Doing it in post makes a lot more sense, and looks way better.
Is it possible for us to see the Project Files, as it is a bit hard to follow without knowing prior knowledge of shaders
Great Video thank you buddy!
Want to leave support. What i like about your tutorials is that they are nicely and well done, professionally and polished, effort is really seen. On top of that, topics are really on point.
is there anybody have the same problem with me?
I followed til 5:30, added the effect but nothing changed, no full blackscreen
then I stopped here
It's because post processing is not applied ig idk maybe something else
It's an interesting tutorial, but just like so many others said it is an absolute pain to follow - including crucial parts being missed out, e.g. the Camera layer and post processing layer/volume set up, the overall structure of HLSL shaders, general code-structure and more. I figured out some stuff, but still couldn't get it to work entirely and wasted over an hour on this.
The editing is top-notch, but please, put a little more effort into the content and flow of things.
I'd love to see a video on writing shaders for URP or HDRP
I can’t believe i’ve been subscribed but didn’t watch your videos. This reminds me of sebastian lague. I like tutorials made this way, step-by-step explaining everything along the way, especially the coding part. Looking forward to more content!
Finally, I found it.
Hey, you have some unnecessary texture samples in your outline shader. But I wanted to tell you about quite a different solution. We can render the object with a normal size and with some outline color on the render texture. The second pass would be 4 tap gauss blur for this temporary texture that uses some thickness param. And then, we just draw the same object on the same texture with just black (or better clear) color. The final pass would be the same as yours: combining outline texture with the main texture. What does it give? It allows us to draw outlines for different objects with different colors + we can have some soft outlines (if we don't want to have them, it's really easy to tweak it in the blur shader). Also, it allows us not to use additional layers.
@@weckar you can simply assign outline material to the renderer you want to highlight and set the color to it. Each renderer can have it's own outline material with different colours. It work the best with SRP where you can draw renderers using shader tag. I don't remember if default unity RP can handle it as well.
@@weckar You can use the same renderer that you want to highlight. You don't need to create copies or something. Just add one more material to the renderer materials list and that's it
Very interesting approach. Thanks for making this video.
This is almost unbelievable, I've been struggling with outline shaders for weeks and then this pops up. Thanks for that. Quick question, do you have this tutorial files available on patreon? Cheers!
Yes, I'll be sharing the package on Patreon shortly.
well as if this isnt a shill comment...
@@23bobjr lmao what
I followed every step and it doesn't work. Have you forgotten something while editting?
This is a good starting point for me I'm so glad that you made this tutorial!
Is there a way to add different outline colors per object?
incredibly expensive method for VR but still beautiful ^^
Is this an Unlit shader or of what type? And could you share the shader code.
Hi matt! Will you be so kind to tell me if this will work on the built in post processing for the URP or HDRP?
Does anyone have a working project to look at? I having issues with my Shader Syntax and Main Camera post processing setup.
You are my New brackeys
WOW!
You Came Back Bro.
Waited For Months.
This is perfect! Was just thinking the other day of implementing a way to show my character behind walls. Thank you for all the great tutorials you put out!
NOT WORK IN URP :D
Great tutorial
Thank you so much :D
If the obscure is transparent ， then it will directly ignore the transparent object.how to deal with this situation
Doesnt unity have Overlay camera option that automatically overlays what ever the camera randers on top of main camera?
I'm still comfused about the difference between post processing and the built-in volume component 😂
yeah I'm curious if this will work in URP
@@AetherXIV Custom volume component or renderer feature does work.
Very cool. I wonder how an outline would look as a target reticle (in a space combat game where the targeted ship gets an outline around it)? I might have to try that.
Can you include a github repository so I can check why what I'm doing isn't working? I'm struggling to include the Unity package and it says it can't be found.
Is there a way we could do something like this but without switching an objects layer? The issue being if if your game you have bots or other entities in the game using physics checks and they are masking out all layers but say the player, we don’t really want them including this outline layer as that would make them see other objects on that layer. And if we don’t include it, then the physics checks miss the player while they are being outlined. Is there a way to do something like this just minus the switching of layers?
I had the same thought but in my case, since I think I'd only be adding outlines to one object type (e.g. enemies) I don't think it would be a problem to add the outline layer to the collision matrix.
Amaizing video, as always! Keep going, your tutorials are the best!! ps: What version of Unity do you usually use?
Usually the latest LTS, most often using built-in unless otherwise stated in the video.
Great tutorial, thanks for sharing!
Are outlines of different objects exist in isolation of each other, or they unite into one single when intersecting? I'm not good enough in shaders/rendering to predict this just depending on method you used
great tutorial! this can be achieved with forward renderer stuff instead of a lot of cameras? thnx
With this approach how would you obscure the outline as well as the model? (instead of allowing it to show through obstacles)
Great! I've been attempting this for so long using shaders! Question: this work only for built-in, not HDRP, right?
The shader is using HLSL, so it should work with HDRP but I can't directly confirm. There may be some things with how the camera works in HDRP that you'd need to figure out.
@@GameDevGuide great! I'll try and let you know. Thank you!
@@damiangonzalez_esp Hello, did you check it? :D I need outline to my game in HDRP :)
Hi, I don't have the "Post Process Outline" available in "Overrides" inside the "Post-Process Volume" component. Do you know why ?
This is a livesaver!
can this be used for text or other UI outlines?
Can you make a tutorial on how to make callback function such as Awake, Start, Update, OnTriggerEnter etc.. without the need to add listeners because I can just write Awake and the auto complete system will predict and I don't need to add any listeners it just works on any monobehavior
Nice trick ^^ thank you for the awesome videos but performance wise how it gonna be let's say for 50 characters hiding behind a building will it be fine or slow down the rendering process
seeing as it's a shader, the number of objects it acts upon shouldn't matter, as it runs on a pixel by pixel basis anyway.
This is great as show and tell, but VERY hard to follow.
Wonder how costly it is to have several cameras render stuff 🤔
less costly is using a direct shader on the objects that you want to be outlined :S
This was my first thought too. I've experimented with having more than one camera active at a time in the scene, and in general, the frame rates were a function of the number of camera. Eg : 1 camera = 60 fps. 2 camera = 30 fps, 3 camera = 20 fps, etc. This applied even when the extra cameras were rendering a single object on a layer without complex geometry.
What version of Unity were you using?
Is this for urp or built in?
If you are not getting the white outlines when moving object to the Outline layer then you need to add this coude the subshader:
Cull Off ZWrite Off ZTest Always
It's nice and stuff, but I hate this style of of editing that just shows some bits of the code. This way I have no idea what file you are showing and where it is. I am hours in this video trying to decipher what is what
Im geting Invalid shader error 😢 how to fix this
Someone anyone help 😅
This does not work for URP
Will it work smoothly on mobile?
Can't you simply use camera stacking instead of a render texture ?
For URP that's definitely one way to do it. But This video is focused on using the built-in renderer.
@@GameDevGuide Do you plan to make it URP compatible ? A lot of projects are on URP. Thank you for your videos they are awesome.
Tried to do it on URP but no success so far... If anyone has advice!
Does this work with URP?
Thanks!!
I fell down a similar rabbit hole a few weeks ago trying to get some post processing shaders done and I struggled to get this working on URP. Does this only work in HDRP?
This is actually in built-in but I don't see why it wouldn't work in the other pipelines
@@GameDevGuide Thanks for the response, I am still using Unity 2020 so that may be my problem as well. :)
@@GameDevGuide URP post processing is done in a completely different way. By now everyone is using URP or HDRP, so the tutorial isn't that helpful for 90% of people.
@@GameDevGuide The post processing V2 package is not compatible with URP and so the nice method you outline above will not transfer to URP without significant changes. A gentle recommendation is to use URP for shader programming tutorials as Unity is heavily encouraging people to shift over to URP for basic development and people who are dipping their toes into shader programming will want to use URP for much of it.
@@plixo4712 This is just flat-out false. Many people are still using the built-in pipeline, myself included.
Please make a guide to build🍋
Does this hurt the phone?
does this work in 2d sprites or ui?
I tested it and nope
Please can I approach yours
I think it's expensive for mobile
But HLSL fucking SUCKS to work with!!
I'm still baffled it's an standard at all, what with all the code within code and duplicated variables bullshit
What is bro yappin