Optimized Toon Outlines! One Texture For Depth and Normals Edge Detect ✔️ 2020.3 | Game Dev Tutorial

hi i'm ned and i make games today i want to finish up my series on depth edge detection outlines by further optimizing them i'll reduce the number of texture lookups and adjust the algorithm to depend on only one texture to get both depth and normals data you might want to watch the previous videos on edge detection outlines to understand the underlying algorithm although i'll set up the shader from scratch before i get started i want to thank you all for watching if you're new here i upload weekly game development tutorials so consider subscribing and turning on notifications we also have a great discord server to chat about game development there's an invite link in the video description i made this project using unity 2020.2.1 f1 and universal render pipeline 10.2.2 if you're using unity 2020.1 these outlines should still work but your graph workflow will be a little different if you're using a newer version check the video description for any fixes that you may need as mentioned before my goal here is to further optimize edge detection outlines to do so i'll be using the per object outline system as a base since it doesn't rely on post-processing and is thus the most efficient so far the main difference will be that we'll get both normals and depth data from the depth normal's texture instead of relying on a separate depth texture you may remember that the depth encoded into the depth normals texture is not very precise that is true here i've exaggerated it and you can really see banding where all values share the same depth in the texture still it may be precise enough to render outlines and we can gain a lot by dropping a whole texture from the algorithm so it's worth trying out if you're working in a fresh project set up the universal render pipeline by downloading the package creating a settings asset and setting it as the active pipeline in your project settings select your pipeline asset and uncheck the depth texture then select your renderer settings asset and add a depth normals renderer feature wrote this feature back in the depth normals outlines video and if you don't have it handy you can download it from the video description here this feature renders the depth normal texture for us also in the video description grab the outlines include.hlsl file this file contains code that our graph will call from a custom function to implement the syllable edge detection algorithm also download the decode depthnormals.hlsl file which contains functions from the built-in render pipeline to decode normal and depth data from the depth normals texture before we start in the graph let's remove some unneeded code from outlines include.hlsl open it in your script editor our first goal is to reduce the number of texture samples if you remember back from the first video on edge detection outlines each offset defined in this syllable sample points array describes a texture sample offset from the central position we would then use a multiplier called the convolution matrix weight and add all the products together a higher sum would indicate an edge right now we sample eight times per pixel let's reduce that to the four corners so remove unneeded offsets next we need to update the syllable x matrix and syllable y matrix arrays these hold the convolution matrix weights for each sample you might notice when you strip these down to the corners that they match the values in the syllable sample points array we can just use the sample points offsets as the matrix weights that's convenient delete the syllable x matrix and syllable y matrix lists now delete depth syllable and color syllable functions and modify the normal syllable to also return a depth value rename it normals and depth syllable change the output arguments to a float normals in a float depth below that add another float2 variable called depth syllable and change the loop iteration count to four since we're going to use simple sample point values as the matrix weight set it here don't forget to also accumulate the depth syllable value before exiting the function change the out variable to normals and then set the depth to the length of the syllable depth variable and we're done with this file now let's write the graph back in unity create a subgraph called outlines and open it first create a custom function to call normals and depth syllable fill out all the settings to match those in the file and then create a vector 2 screen uv property and a float thickness property to fill its inputs create another subgraph called subwoofer fine tuning and then open it here we'll adjust the symbol output value the same way as in past videos by applying a threshold tightening and strength transformation once that's done save the asset and return to the outlines graph add two syllable fine tuning nodes one for depth and one for normals then create strength tightening and threshold properties for the depth and normals input everything into the fine tuning nodes but remember that there's a lot we have to do to minimize various artifacts by adjusting the thresholds so hold off on those from this point forward the graph will look a little different than the previous one remember how the depth value in the depth texture is stored non-linearly not so in the depth normals texture it's actually stored linearly where it's zero at the camera's near plane and one at the far plane with that in mind i bet you can probably think of some changes that you'll have to make first off create a custom function node to call the calculateddepthnormals function and outlines include we'll use this throughout the graph let's tackle the depth threshold it still has the acute angle artifact so create a custom function node to call view direction from screen uv then calculate 1 minus the dot product of the view direction and the normal vector i'm going to take a slightly different approach here instead of defining a new threshold when dealing with acute angles i'll just define a multiplier for the regular threshold to implement this add a smooth step node and a multiply node then feed the threshold multiplier into that now since depth is linear we should not just multiply it with the threshold like we did before in fact depth starts to suffer from artifacts similar to normal outlines when it's far from the camera create a far depth start in a far depth threshold multiplier property then when the depth is between the depth start and 1 we'll begin to apply the [Music] multiplier add the acute angle and far depth multipliers together and then add one so that they never reduce the threshold finally multiply the depth threshold and route that into the appropriate syllable fine-tuning node okay let's turn our attention to the normals the situation here is about the same as last time except depth ranges from 0 to 1 instead of using world units create a far normal start depth and a far normal threshold multiplier property then grab the depth from the calculate depth normal custom function use a smooth step and multiply node to calculate the threshold multiplier add 1 and multiply with the normal threshold finally output that into the other fine-tuning node with all that done take the maximum of both the tuned syllable values and then output it save the asset to test things out create an unlit graph and add an outline subgraph to it copy and paste all the properties from the sub graph into this test graph rename them appropriately and then route them into the outlines node add a base color and an outline's color property then use a blend node in overwrite mode to blend the colors together with the outlines output as the opacity feed the results into the base color field of the master stack and save the asset now in the scene editor create a test scene with a variety of shapes create an outlines material add the material to your meshes and then start adjusting the material properties remember it's always a good idea to adjust these properties using the game view since outlines will look quite a bit different in the scene view i'd also strongly suggest that you reduce the camera's far plane when using these outlines depending on your platform depth values won't have much precision a fact that will only become more pronounced if your far plane is really distant with less precision the system won't be able to discern depth differences and then it can't draw outlines take your time adjusting these outline settings they can be quite finicky test your objects from various depths and angles to try to minimize artifacts as best you can don't be afraid to change values on an object by object basis now you can add the outline node to any unlit graph very easily i've done it here with my tune shader graph however just like before if you want to draw outlines on top of a lit graph or any lit shader you'll have to use a render object's renderer feature the process is identical to the one showcased in the previous per object outlines video so i'll refer you there for a step-by-step explanation and with that i think it's time to move on from depth and normal edge detection outlines however there are a couple of other techniques i'd like to try out including one that gives the artist control over where outlines display and another that's specialized for drawing extra thick outlines if either of those ideas sounds interesting please consider subscribing and turning on notifications so you won't miss the videos before i sign off i want to take a minute to plug my patreon page first off don't feel bad if you can't contribute watching these videos is really more than enough but if you can i have prepared a bunch of extra goodies like voting power and topic polls early video viewing and downloadable tutorial project files if you even consider it i really appreciate the support liking this video also helps me a lot it lets youtube know to recommend the tutorial to others and of course if you have any questions please don't hesitate to leave a comment here i do read them all i'll see you next time thanks again for watching and make games you

Channel: Ned Makes Games

Views: 18,097

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: 8Xq7tU5QN1Q

Length: 11min 55sec (715 seconds)

Published: Wed Feb 03 2021