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

hi i'm ned and i make games today i want to continue my series on outlines by showing off a technique using an edge detection filter and unity's universal render pipeline outlines complement a variety of visual styles including toon shaders in contrast to the whole outlines i implemented in the last video these outlines use a post-processing effect to apply outlines to the entire screen they don't change with perspective and can even accentuate color changes this video uses unity 2020.1.15 f1 and universal render pipeline 8.2.0 if you're working with a newer version check the comments for updates get started by setting up the urp download the package create a settings asset and enable the pipeline in your project set up a test scene now as well edge detection outlines are post-processing effect meaning they run on the screen after all models have rendered you can implement a post-processing effect using a renderer feature i covered these in a previous video linked in the corner and video description and i recommend that you watch it we'll use the blit material feature detailed there this feature allows you to apply a material to the screen and thus run a shader over it copy or import the blip material feature c-sharp script into your project select the renderer setting asset and add a blit material render feature to it name it outlines create a material to contain our future shader and place it in the feature settings set the path to zero and the event to after transparent our outline shader will use a special texture generated by the universal render pipeline called the depth texture to summarize this texture contains the distance from the camera's view to the visible object in each pixel we'll draw an outline wherever we see an edge in the depth texture or in other words wherever the value changes abruptly be sure to enable the depth texture in the urp settings asset now our shader can access it let's start on a shader to implement the edge detection algorithm we can actually make it using the shader graph create a new unlit shader graph called edge detection outlines we'll receive a texture from the camera and the underscore main text variable so create a texture 2d property called main texture and set underscore main text as the reference create a sample texture 2d node and feed the main texture into it next we need to implement edge detection using a custom function go back into the scene editor and create an edge detection outlines include.hlsl file you'll have to do so using your operating system open that file in a script editor this file will contain some shader code that the graph will execute in a custom function node don't worry i'll explain the code as we go this line at the top tells the compiler to compile this code only once next we'll implement edge detection using a technique called the syllable algorithm it uses a concept of a convolution matrix or kernel imagine it as a funny three by three cell magnifying glass where each cell has a weight number associated with it each lens samples a texture at a point under it and multiplies the result by the weight of that cell to evaluate the convolution matrix for a specific pixel on a texture center the glass over that pixel then sample each color apply the appropriate weight and add all values together by fiddling with the weights you can achieve many different results including detecting edges the syllable convolution matrix uses these specific weights if you apply it near an edge you can see that it amplifies differences in color we can simply draw outlines where the effect is strongest the syllable algorithm has another component to make it even better at detecting corners it applies two convolution matrices at once one test for horizontal edges and the other for vertical edges to combine them form a vector using the two values and then take that vector's length that gives the final syllable value returning to the hlsl file we must define the convolution matrices and their weights this array holds the sample offsets for each cell in the matrix relative to the central pixel this array holds the weights for the horizontal matrix and this one for the vertical matrix mark each is static signaling that they will never change from the values set here now write the depth syllable function where we'll run the syllable algorithm over the depth texture this float suffix tells the shader graph what types of numbers that we'll use next are the function arguments we need two inputs the uv position to place the convolution matrix over as well as a thickness value to define the sample distance of said matrix we'll output a single float variable for the final syllable value inside initialize a float 2 to hold the syllable value the x component will contain the horizontal value and the y component the vertical write a loop to compute each cell in the convolution matrix this unroll attribute tells the compiler it can optimize this loop since it has a constant number of iterations to read the depth texture shader graph defines this macro for us compute the sample uv by adding by the matrix offset then multiply the depth value by the matrix weights just before returning get the length of the syllable vector back in the shader graph add a thickness float property and then create a custom function node click the gear and set up the inputs and outputs so that they correspond with the depth syllable function set the type to file the name to depth sobel and the source to our edge detection outlines include hlsl file if you see an error make sure that there is no typos next route a uv node and the thickness property into the custom function node's inputs now we want to implement a few ways to fine tune the syllable value and adjust the outlining strength add a depth strength depth tightening and depth threshold float property the threshold is the minimum syllable value that will appear as a full outline implement this with a smooth step node which returns 1 if the input is larger than the maximum value the tightening value removes outlines formed by weak edges use a power node to apply that finally the strength value is a straight multiplier allowing you to turn on and off outlines as needed now all that's left to do is combine the outline with the main texture use a blend node in overwrite mode to do that this blends the colors like you would expect when working with an alpha channel create a color property for the outline color and then route each value into the blend node like so finally route the output into the color field of the master node save the asset and return to the scene editor we're almost there select your post-processing material and give it the outline shader no outlines show up turns out we need to enable a keyword to get the depth texture to work return to the shader graph add a boolean keyword called depth texture give it the required depth texture reference capitals and underscores do matter set the definition to multi-compile and the default to checked then return to the scene editor depending on your unity version you may not have to do this but i did when using 20 20.1 if you see no outlines yet select your material and click the three dots in the upper right corner of your inspector enter debug mode and type in the keyword into the shader keywords field and that should do it outline should appear if they still don't turn off debug mode and play around with material settings it's fun to experiment with them anyway [Music] let's see if we can get the algorithm to outline color changes as well turns out urp supplies us with another texture called the opaque texture which saves a version of the camera's texture before it draws transparent meshes or applies post-processing that's perfect for us let's use it enable the opaque texture in your urp settings asset now open edge detection outlines include hlsl file once again add this color syllable method the logic is very similar to the depth syllable method we'll use a convolution matrix to run the syllable algorithm over the opaque color texture however since color is made up of three floats instead of one as in depth we must create three syllable vectors then in the loop accumulate the syllable value for each color channel separately we then need some way to combine all three into one syllable value returning the maximum value of the three produced gave the best results return to the edge detection outlines graph duplicate the custom function node click the gear and change the function to color symbol feed the inputs like before now we need to apply the same fine tuning to the color syllable value but with different settings an easy way to do this is to create a sub graph select the depth fine tuning nodes right click and select convert to sub graph double click the sub graph to look inside clean things up a bit by rearranging messy nodes renaming properties and renaming the output value then save the asset back in the main graph reconnect the depth tuning values [Music] create properties for the color fine tuning a strength tightening and threshold value and duplicate the fine tuning node hook up the new values for color now combine the depth and color values using a maximum node and feed that into the blend nodes alpha there's one more thing before we're ready for showtime we must enable another keyword to use the opaque texture create a boolean keyword and set require opaque texture as the reference set definition again to multi-compile and the default to checked save the asset and return to the scene editor select the material re-enable debug mode in the inspector and enter the require opaque texture keyword separated from depth texture by a space and there we go more outlines turn off debug mode and then edit the material settings until things look right well things are looking pretty good i'd like to add another syllable pass over something called the depth normal texture which will allow us to detect creases in the model as well as refine the depth testing however it requires a custom render feature so i'll need to detail it in a future video please subscribe and turn on notifications so you won't miss it thanks so much for watching i'd really appreciate it if you could like this video it lets youtube know to recommend it and it really helps the channel of course please don't hesitate to leave a comment if you have any questions i have some for you how do you plan to use outlines in your project is there a topic you'd like to see a video about thanks again for watching and make games you

Channel: Ned Makes Games

Views: 53,176

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, edge, edge detection, filter, kernel, convolution

Id: RMt6DcaMxcE

Length: 11min 48sec (708 seconds)

Published: Wed Dec 02 2020