Outlines on One Object in Unity URP Shader Graph with Edge Detection! ✔️ 2020.3 | Game Dev Tutorial

hi i'm ned and i make games today i want to return to outline renderers and implement a highly requested feature per object outlines depending on your game this feature might be more efficient than applying outlines to the entire screen and it allows you to change outline colors on an object by object basis i'll be working with the depth normal outlines from the previous outlines video however to avoid confusion i'll set up the graph from scratch here as well still i'd recommend you watch the entire tutorial series since i will not explain the underlying hlsl file or the algorithm in this video i'll link to the series in the corner and the video description before i get started i want to thank you all for watching my videos if you're new to the channel consider subscribing and enabling bell notifications i do make weekly game development tutorials i also want to plug our community discord server it's been getting pretty active and it's a great place to chat about game development and get tutorial help you can find an invite link in the video description alright on to the tutorial i made this using unity 2020.2 and universal render pipeline 10.2.2 if you're using a newer version check the video description for updates the project will work in 2020.1 as well although your shader graph workflow will be a little different so in this series we've implemented outlines based on color depth and normals rendering them to textures and running an edge detection algorithm over them to draw the outlines previously we used a post-processing shader for this but in this video we'll bypass that step and run edge detection in the mesh's material shader for some platforms this provides a significant performance boost especially if relatively few objects are outlined there's a few drawbacks first we can no longer support color outlines since the camera color texture isn't ready when running mesh material shaders second it's exceedingly difficult to add these outlines to any shader graph using the lit master stack i will provide a workaround but more on that later let's get started by setting up the universal render pipeline download the package create a settings asset and set it as the active pipeline in the project settings we select the universal render pipeline settings asset and enable the depth texture then import the depth normals renderer feature script if you don't already have it you can download it from the video description then add a depth normals feature to your renderer settings now let's create the outlines graph i think i'll make it a subgraph so we can easily add it to any other graph in the future now import and download the outlines include.hlsl file and the decodeddepthnormals.hlsl file we went through these in detail in previous videos but you can find them from the video description if you need them okay open the outline subgraph let's recreate the syllable edge detection algorithm from the previous video except without color edges again if you'd like more details please watch the videos on color depth and depth normal outlines first we'll output the outlines opacity afloat now i'm going to get the properties out of the way we'll need a screen uv passed to us which is the sample uv that we'll use for the depth and depth normal textures next comes outline thickness and the various fields used to fine-tune the silver outputs including our tricks to avoid threshold artifacts once that's all set up add custom functions to call depth syllable and normal syllable feeding in the screen uvs and thickness now quickly return to the scene editor and create a syllable fine tuning subgraph inside apply the threshold tightening and strength modifications to the syllable input save the asset then return to the outlines graph add two fine-tuning nodes one for depth and one for normals input the appropriate syllable tightening and strength values but remember the thresholds need a lot of tweaking let's tackle that now first depth we need to increase the threshold of viewing the surface from an extremely narrow angle get the normal and view direction vectors and test if they're perpendicular two custom functions would calculate these vectors one calls calculate depth normal and the other calls view direction from screen uv now recreate the algorithm to adjust the threshold based on the dot product of those vectors remember that depth is stored logarithmically in the depth texture meaning as the depth decreases smaller changes are more significant we can simply multiply the threshold by the current raw depth so smaller depths have smaller thresholds and feed that into the fine-tuning node now for the normal threshold as you zoom away from an object its normals will diverge quicker since there are less pixels to represent it we need to increase the threshold if depth is larger remember to set the scene depth node to eye mode in order to get the depth in world units after interpolating feed the result into the syllable fine-tuning node finally we can combine the depth and normal results by taking the maximum of them and send that to the output node okay so let's test this out return to the scene editor and create an unlit graph open it add properties for all the various outline settings this does seem tedious but here's a tip you can copy and paste settings between graphs you might want to add outline to the beginning of all the property names for cleanliness though regardless add a base color property and an outline color property now create an outlines node and input all of the needed fields for the screen uv we can use a screen position node set to default mode next create a blend node in overwrite mode this makes it work like alpha blending the alpha here is the outlines output so feed that into the opacity field set the base color as the base field and the outline color as the blend field then pass that result to the base color field of the master stack or if you're using 20 20.1 the albedo field of the unlit master node save the asset and return to the scene editor set up a test scene and create a material assign the material your test outlines graph apply it to an object in the scene and adjust the properties as needed you should adjust outline settings using the game view your outlines won't look the same in the scene view you don't want to waste time doing it there okay looks good and no post processing needed now you can easily add outlines to any unlit graph by copying the appropriate nodes and properties over to it here are outlines applied to my tune shader graph now if you try to do the same thing with a lit or pbr graph the outlines will be shaded it doesn't look horrible but that's probably not the style you want unfortunately it's not possible to completely fix this quirk in the shader graph and it's even pretty difficult to do by modifying the default lit shader in code the best solution is to use a render object's renderer feature to draw these meshes again with a transparent outline only material let's write that transparent shader create a new unlit shader graph in the graph inspector set the surface type to transparent and the blend to alpha now add the outline properties as well as an outline color property set up an outline node again feed the output into the alpha node of the master stack and the outline color into the base color node save the asset and that's it back in the main unity window create a material for this transparent outline shader and fill out all the properties in your project settings navigate to tags and layers and name and layer outline then select your urp renderer settings asset and add a render object's renderer feature set the event to after rendering opaques under filters set the layer mask to include your outlined layer in overrides set the material to your transparent outlines material and set the pass index to zero now add an object to the outlines layer and it will render again using this outline shader if you need different outline colors you'll have to duplicate the entire process creating another material layer and render objects render a feature for it now i know you're thinking that this sounds really inefficient it's true this isn't ideal but it's not much more costly than rendering one extra instance of the mesh and you do still avoid post processing it's honestly the best solution i've found unless you want to dig deep and recreate the lit shader yourself in code one small tangent before i sign off the universal render pipeline version 10 includes a screen space ambient occlusion renderer feature with depth normals unfortunately the way unity has implemented this is not compatible with these outlines so i recommend that you don't use them together perhaps if there's interest i'll follow up with a way to fix this issue although it would probably involve writing our own ambient occlusion feature regardless you now have individually rendered outlines however don't pack your bags just yet because i'm not done with this topic in the next outline video i'll optimize these outlines even farther trying to eke out a few more frames per second for lightweight platforms please subscribe and turn on notifications so you won't miss that video thanks so much for watching i really appreciate it if you like this video it lets youtube know that it should recommend it to others and it really helps out the channel of course please leave a comment if you have any questions how do you want to use outlines in your project is there another topic you'd like to see me make a tutorial about thanks again for watching and make games you

Channel: Ned Makes Games

Views: 50,242

Keywords: gamedev, game development, development, unity, unity3d, madewithunity, programming, game design, csharp, nedmakesgames, nedmakesgames dev log, indiedev, indie game, dev log, shaders, 3d modeling, blender, tutorial, walkthrough, sobel, outline, outlines, postprocessing, post processing, urp, universal render pipeline, toon, toon shater, outline shader, outlines shader, shader graph, renderer feature, graph, depth normal, depth normals, depth, normals, depth normals texture, depth normal texture

Id: 74AS5DmLe8w

Length: 10min 56sec (656 seconds)

Published: Wed Jan 13 2021