Toon Outlines in Unity URP, Shader Graph Using Sobel Edge Detection! ✔️ 2020.3 | Game Dev Tutorial

✔️ Works in 2020.1 ➕ 2020.2 ➕ 2020.3
🩹 Fixes
► I made an editing mistake around 1:30. Please note, you need to place the outline material into the material field of the BlitMaterialFeature. It should not be empty after this step. Sorry about that!
For 2020.2:
► When you create a shader graph, set the material setting to "Unlit"
► The gear menu on Custom Function nodes is now in the graph inspector
► Editing properties must be done in the graph inspector instead of the blackboard

Outlines are a great way to add polish and style to a variety of games! In this tutorial, I show how to implement sobel edge detection outlines in Unity Universal Render Pipeline using a combination of a shader graph and a renderer feature. These outlines affect the entire screen, do not change based on perspective, and can accentuate changes in color!

👋 Subscribe for weekly game development videos!

👑 Join my Patreon for extra influence over topics, early access to videos, and downloadable project files!

🔗 Check out my website for a searchable list of tutorials!

🎬 Previous videos

✨ Follow up videos

📜 Required scripts

📚 Reference scripts

⏲️ Timestamps:
0:00 Intro
0:40 Project setup
1:35 Depth edge detection
8:05 Color edge detection
10:45 Wrap up and credits

🎖️ Credits and references:

#GameDev #IndieDev #Unity

[NedMakesGames]

Hi everyone, thanks for your comments!

🩹 Fixes
► I made an editing mistake around 1:30. Please note, you need to place the outline material into the material field of the BlitMaterialFeature. It should not be empty after this step. Sorry about that!
For 2020.2:
► When you create a shader graph, set the material setting to "Unlit"
► The gear menu on Custom Function nodes is now in the graph inspector
► Editing properties must be done in the graph inspector instead of the blackboard

[vanshisha]

Thanks Ned :)

For people using URP 14+ this won't work, as BlitMaterialFeature.cs is using the old API.
If you are new to URP and, like me, can't upgrade the file to make it work, I found an alternative solution:
- discard the BlitMaterialFeature.cs file
- at 01:22, click Select Renderer Feature and select "Full Screen Pass Renderer Feature" (Only available from URP 14)
- In the renderer feature set the Material and, IMPORTANT, set requirements to "color"
- Ultimately, apply two changes to the shader:
1) 06:58 instead of using a Sample Texture 2D with _MainTex for the blend, use a "URP Sample Buffer" node, and set the source to "Blit Source" (which simply passes the color of the pixels, like the main texture would)
2) In the Graph settings, change the material type from "Unlit" to "Fullscreen"
- NOTE: you can skip the last step at 07:16

Also, I'm not sure if there's a difference in performance or if it's considered best practice or not...

[AEvans]

For anyone trying this in newer Unity Versions: You have to replace the "UV" Node in the shader graph with the "Screen Position" Node.

[sentinel]

Amazing tutorial, explained from top to bottom as you'd expect! Keep it up :)

[yotcho]

Really good and useful tutorial, thanks for sharing ! Can't wait for the custom render feature for the sobel depth normal texture :)

[danixadem]

I'ld like to see more of advanced tutorials such like that. Great job !

[sealsharp]

Another good shader video by you. Nice work!

[insertusername]

Thank you so much for these tutorials! I am completely new to shaders, and was expecting that everything would go over my head. But you explain it really well, looking forward for more content! :)

[paulorodriguez]

subscribed! best method i've seen on making outlines! ty for the corrections in the description btw.

[alberto-martino]

Thanks for this!
Custom render passes allow me to make the graphics look more unique and focused on the details I care about the most without changing all the shaders currently used for the premade models in the scenes... So, this was VEEERY helpful! Thanks again 🙏🏼

[sooiv]

This tutorial helped me a lot in my game development.

[adamodimattia]

I'm writing a comment just to help the algorithm because every your video is awesome, I've recommended it at work :)

[swannschilling]

You just made my day!! :)
Btw, I had a bit of a bad start, so if anyone has trouble with the render pass not showing...just deleting my old camera and adding a fresh one to the scene made everything work for me!! :)

[zenarion]

I plan to use this feature to create a visual style heavily inspired by Jean "Moebius" Giraud's colorful comic art, and use that for a mecha crew simulator game me and my bff work on. Thank you for this great and deep tutorial!

[saminreysb]

This might be what sable game used for the looks, thanks a lot!

[briancraig]

Hey! For those who are using 2020.3, use a "screen position" node instead of a "UV" node for the input on the Custom Function!
The reason is that unity is feeding a render of the UV output of the scene (don't ask me why), instead of what is expected, an UV that goes from (0, 0) to (1, 1) for the screen.

[dimitrishow_D]

finally !! ty ive beeen looking for something like this 4 ever

[NPCsz]

Works in 2021.3.11f1
Thank you so much !
It works very well with any low poly models.

[TOPPREDATORable]

Cool video! URP 10 has a DepthNormals texture built in because they used it for their AO implementation, so no more custom feature needed. Although, it seems that unlit materials don't write to the texture, which is useless to me so I'll still be using my own pass.

[TheFerruccio]

One question: how do I get this shader to work consistently between “scene” view and “game” view? I am getting good edges for both, but only if I have different material settings for each. Very little information exists out there when it comes to explaining when shaders are rendering for a scene editor view and when they are rendering through the scene’s main camera.