Uploaded December 2020 | Updated September 2026, 2 weeks ago

---

✔️ Works in 2020.1 ➕ 2020.2 ➕ 2020.3 🩹 Fixes
► At line 39 in EdgeDetectionOutlinesInclude.hlsl, the sixth entry in sobelSamplePoints should be float2(1, 0), not float2(1, 1)
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 improve edge detection outlines by incorporating depth normals. I also refine the outlines, eliminating artifacts on far away objects. In the process, I show how to write a renderer feature to generate the depth normal texture and compute view direction from a screen space UV.

👋 Subscribe for weekly game development videos!
youtube.com/c/nedmakesgames?sub_confirmation=1

👑 Join my Patreon for extra influence over topics, early access to videos, and downloadable project files!
► patreon.com/nedmakesgames

🔗 Check out my website for a searchable list of tutorials!
► nedmakesgames.github.io

🔴 Twitch ► twitch.tv/nedmakesgames
🐦 Twitter ► twitter.com/nedmakesgames
🎮 Discord ► discordapp.com/invite/ubxSVBK
📸 Instagram ► instagram.com/nedmakesgames
👽 Reddit ► reddit.com/u/nedmakesgames
🎶 TikTok ► tiktok.com/@nedmakesgames
☕ Ko-fi ► ko-fi.com/nedmakesgames

🎬 Previous videos
► Edge detection outlines part 1: youtu.be/RMt6DcaMxcE
► Hull outlines: youtu.be/1QPA3s0S3Oo

✨Follow up videos
► Single object outlines: youtu.be/74AS5DmLe8w
► Optimized outlines: youtu.be/8Xq7tU5QN1Q

📜 Required scripts
► BlitMaterialFeature.cs: github.com/NedMakesGames/RendererFeatureBlitMat/blob/master/Assets/Rendering/Desaturate/BlitMaterialFeature.cs
► DecodeDepthNormals.hlsl: gist.github.com/NedMakesGames/c9e19aca699cdb338ece744f63597dca

📚 Reference scripts
► Initial setup: gist.github.com/NedMakesGames/b6dfbd9b48a27e23265cf70bb86b8c6a
► Final project: gist.github.com/NedMakesGames/e71304ae5c9400bea80d38933eff9bac

⏲️ Timestamps:
0:00 Intro
0:34 Project setup
0:53 Depth normals feature
4:29 Adding normals edge outlines
7:07 Shallow angle adjustments
10:25 Non-linear depth adjustments
11:13 Far away normals adjustments
12:11 Optimizations
12:38 Wrap up and credits

🎖️ Credits and references:
• Cyanilux: Depth - cyanilux.com/tutorials/depth
• Roystan: Outline Shader - roystan.net/articles/outline-shader.html
• Alex Ameye: Outline Shader - alexanderameye.github.io/outlineshader.html
• POPA_3D: Gift Box with Red rubbons [sic] - turbosquid.com/3d-models/free-3ds-model-gift-box-red/450470
• hushnow: SNOWMAN - free3d.com/3d-model/snowman-67478.html
• Ben Golus and Keijiro Takahashi: Converting screen space UV to view direction - forum.unity.com/threads/help-with-view-space-normals.454248
• freepik: Wrinkled paper texture - freepik.com/premium-vector/wrinkled-paper-texture_711440.htm
• Hanane Rami, Mohammed Hamri, Lhoussiene Masmoudi: Color Edge Detector with Sobel-PCA - https://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.402.6975&rep=rep1&type=pdf
• Microsoft: DirectX Graphics Samples - github.com/microsoft/DirectX-Graphics-Samples/blob/master/Samples/UWP/D3D12PipelineStateCache/src/EdgeDetectPixelShader.hlsl
• Eric Skiff: music "We're the Resistors" - freemusicarchive.org/music/Eric_Skiff/Resistor_Anthems/eric_skiff_-_07_-_were_the_resistors

#GameDev #IndieDev #Unity