Creating an Outline Effect as a Post-Process in Unity

Outlines can be tricky to do in a mesh shader. So, let's do it in post instead...
--------------------------------------------------------------------------------
Want to support the channel?

Use these links to grab some cool assets from the asset store:

--------------------------------------------------------------------------------
Socials and Other Stuff:

[EnderShade]

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 (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).

[unscriptedlogicgames]

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!

[DamageSoftware]

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.

[jamessoth]

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.

[黑貓-db]

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

[kyber.octopus]

This will not work for any URP / HDRP projects.
Also sucks that no github link is available.

[petermoras]

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.

[DodgyAussies]

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.

[DonionTech]

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

[AxWarhawk]

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.

[kostas]

I followed every step and it doesn't work. Have you forgotten something while editting?

[Bollsjen]

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.

[rancherosdigital]

Is there a way to add different outline colors per object?

[spatiuminteractive]

this DOES NOT work in HDRP, just saving time for anyone working on a HDRP project

[perumanterola]

Is this an Unlit shader or of what type? And could you share the shader code.

[pedramkavian]

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.

[Lunestro]

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.

[Jimmlad]

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.

[vitbull]

This is exactly what I needed! Being a shader newbie, but intermediate coder, this video is GOLD. Thanks :D

[ultmatepotato]

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?