More Toon Outlines! Normal Edge Detection in Unity URP Shader Graph! ✔️ 2020.3 | Game Dev Tutorial

✔️ Works in 2020.1 ➕ 2020.2 ➕ 2020.3 🩹 Fixes
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!

👑 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: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:

#GameDev #IndieDev #Unity

[infokubarcade]

The video is wild. High complexity and deep advanced techniques.
But it's also why this is the best outline video i have ever seen on Youtube.

[ZhanhongLi]

Hi! Ned. Your tutorials are incredible. They are deep while friendly to starters like me. Thanks a lot! I'm using Unity 2021.3.23f and URP 12.1.11. I found that before adding the sobelSamplePoints to the uv, I have to divide their coordinates by the screen width or height. Otherwise, the outlines would become huge stripes in front of the screen. Hope this be useful to those encountering the same issue.

[OdemGeek]

nice i love cartoon style and i found your outline shader. It's best outline i have ever seen. Thanks you :)

[yotcho]

Good work ! SRP and Shadergraph looks really interesting and less scary now :)
For my current project I'm still using the good old built-in RP and coding shader manually (simple flat color shader + edge color detection as PP) but I'll definitely switch to URP and Shadergraph for the next one !

[LordRapter]

Thanks a lot for your awesome tutorials! I learned a lot, even though I dont understand half of it!

I am currently looking for this kind of cartoony outline effect for gaming project I am working on. I like this kind of stylised looks so I wanted to learn how to achive this effect in Unity and URP. Thanks again for your great tutorial video! :D

[madscience]

You are the man! Absolutely can not wait for marching cubes!! (Or marching squares and CA for super awesome 2D physics!) Have you ever played Powder Toy (like when you were young?). I can make conway on compute shaders but it's not very practical. Keep it up, weekly uploads is just a real treat, I was blown away when I saw that. Normally this level of quality stuff you are waiting at least a month! I am glad I got here before you skyrocket because sir, you are the real MVP

[tornadre]

Hello, your DecodeDepthNormals.hlsl link in the description returns an error. Is the file available to download?

[NedMakesGames]

Hi everyone, thanks for the comments!

🩹 Fixes 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

[TahirDev]

Wow, this is awesome! Can i use this with built-in pipeline? If not then is there an another tutorial?

[Patrickblox]

I would love to see tiling implemented, similar to how the URP lit shader has tiling. It's a very useful feature.

[AGD-b]

Hi Ned! First of all. Awesome Video!
Question: Will this work for VR aswell or is this to heavy? You mentioned in another comment this being an older video. Are there any updates on new techniques to achieve this effect?

[BradKwarta]

Is it possible to do this with just Normals per pixel instead of depth and normal, I'd like to split them up so that I can use on a transparent object and depth isn't written on transparent objects. I'm very new to Unity unfortunately, but have followed quite a few of your tutorials now. would it be as simple as making a function where the input is "Normal" from the shadergraph, then apply the sobel matrix and output the max sobel length? I'm not sure if + sobel[i]*thickness) would work is there a separate function that would work better with just the Normals?

In the shadergraph I am stepping or remapping ddxy(viewDir dot Normals) for use with transparent objects. It kind of works but isn't as nice as the sobel method

[tinytea]

I need help at 7:00. For some reason my shadows doesn't have the same effect as the tutorial. I tried copying the code from github but the shadows still showed up very smooth.

[thiskidcalledtom]

this doesnt seem to work with camera stacking? My weapons are rendered by an overlay camera, and the outlines are going through the weapons, is there a simple way to fix this

[Clementdeveloper]

Could you make a tutorial for it to work in hdrp version 2022

[Amricium]

Great tutorial. Very helpful, yet compact and digestable.
Exactly what I needed to learn.
I would like to ask, is there a way to apply layer mask to the blit render feature you composed in this and previous outline videos? If yes, could you at least briefly describe it?
Because I've seen some stencil outline projects, that allowed using layer masks to specify objects that get outlined, and it would be a great addition to this already amazing triple-outline.

[Aethersong]

Thanks for the tutorial. I tried doing it without making a normal texture by calculating a fake normal in the shader.
I used unity_CameraInvProjection to get the view pos, and then from there did this.
Normal = normalize(cross(ddx(viewPos), ddy(viewPos)));

Normal texture probably higher quality, but this could cut down on rendering another texture.

[kisorta]

im using 2020.3.10f1 and pretty much everything has worked thus far but i cant actually see any outlines on any edges facing me. For example anything cube i my scene only has its depth outline but the normal outlines arent there

[maartenhuizing]

Cool, very nice effect, much better than most cellshading, quick question, is there any quick way to have this also apply to the normals als they would be after a normal map has been applied to it? Or is that just not how this pass reads normals?

[TheAbsurdMn]

Hey, on reddit you stated that you know of some ways to get better optimization. Any chance you are going to share those? Great tutrial by the way :)