Outline Post Process in Unity Shader Graph (URP)

full screen post-processing effects and urp Shader graph are finally coming in the next long term support version of unity the new system promises to make things easier so in this video I'm going to make an outline post process in unity 2022.2 to see how it all works usually I wait until the long term support version to try out new features but this one has me too excited there might be small changes between the text stream release and the next LTS release but I expect this tutorial to work the same way generally speaking a post-processing effect takes the rendered outputs of the camera and manipulates the color data to produce a new color output that includes color grading Edge detection film green and many other effects including lures in snapshot shaders Pro 30 new post-processing effects for Unity for all pipelines half price on itch for the rest of match in this video I'll be using an edge detection technique to overly thin outlines onto objects in the scene you can get started by right clicking in the project View and choosing create Shader graph urp and you'll see a new Option called full screen Shader graph on opening the graph we can go over to the graph settings to see the graph is using the new full screen material option we can keep all these options the same on the graph surface we'll be getting information from the camera using a node called urp sample buffer it has three options in the source buffer for drop down normal World space gets the normal Vector on every pixel of each surface motion vectors gives us a vector representing how far any given object moves between frames and Blitz source gives us the color of every object that last one might not have the most user friendly name but it is what it is let's start to think about how we could detect edges given only the information from this node for each pixel in the image we can check what color the adjacent pixels are and figure out how different they are to each other if the difference is above some threshold value then we mark this pixel as having an outline that works well if your scene uses block colors for each object although it might not be as great with highly detailed textured objects similarly we can check the difference between the normal Vector of the current pixel and its adjacent pixels and mark the center pixel as an outline if it is above a threshold I'll start by detecting normal base edges so I'll set the urp sample buffer source to normal World space this node takes a UV coordinate as input which by default is equivalent to a screen position node if we want information about an adjacent pixel we must add or subtract an offset of one over the screen pixel with in the X direction or one over the screen pixel height in the y direction I'll need to do four samples with four offsets the first offset is in the positive X Direction which I add to the screen position then run through a ulp sample buffer node then I can do a second sample but this time subtract the offset so we're checking the pixel in the negative X Direction next we can subtract one buffer value from the other and use a length node to give us the measure of how much the normal Vector differs in the X Direction across this pixel we can do a similar thing in the y direction by starting with a different offset but the rest of the nodes are the same the result is how much the normal stuffer in the y direction across the pixel by adding the X result and the Y result we get a final normal Edge value next add a float property to the graph and name it normal threshold I'm clamping this value between 0.01 and 10 because I found a value of 0 breaks the effect and it makes every pixel an edge well 10 is a good maximum in case we want to filter out most of the edges use a step load to apply this threshold to the normal Edge value now everything above the normal threshold is marked as an edge and appears white and everything else appears black if I continued the graph from here we would have some decent outlines but it's unable to distinguish between any two faces with the same normal Vector but different color so let's add color-based edge detection too this is very easy to implement we can duplicate everything we have so far then change each of the new urp sample buffer nodes to Blitz Source add a new property called color thresholds with values between 0.1 and 10 and swap it out with the normal threshold when we add the two step outputs together and saturate the results we'll have a value of one if this pixel is an outline and zero if not we are very close to being done with the graph so I'll add two more properties outline color should be self-explanatory and the second one is a Boolean keyword called overlay will display the outlines over the original image if this keyword is on or the outlines alone if it is off when the keyword is on take a urlp sample buffer in Blitz Source mode and use a lap node to pick between that and the outline color using the factory result as the interpolation Factor when the keyword is off we just multiply the saturate results by the outline color drag the keyword onto the graph to combine those two branches together and output the results to the base color block on the output stack and that's the graph complete now we need to do a bit more work to display the effects in the project View I'll create a new material and assign this full screen Shader to it now I can choose whatever properties I want for the outline effect next find your projects renderer data a new urp project should come with this asset in the settings folder my project uses the one called urp High Fidelity renderer which I know is a very catchy name it looks like this at the bottom click the add renderer feature button then pick full screen pass renderer feature I know all these names are silly but bear with me this renderer feature instructs urp to run whatever material we pick on the screen and by default it uses one that inverts the screen colors which of course looks disgusting we can name this feature something like outlines then drag the material we just created onto the material field keep the injection Point as after post processing and make sure in the requirements that the normal and color are selected as this option controls which information actually gets passed to the Shader finally change the pass index to BLT and you should see your effect running in both the scene View and the game view less now you can tweak the thresholds and the outline color to your liking and let me know if you end up using this in a game because I'd love to see what you end up making with it my first impressions with the new full screen Shader graph functionality are good I'm happy that it's going to be easier to create post-processing effects with urp which has been a significant obstacle to people using urp until this point I don't think there's a way to work full screen graphs into the volume system which is a shame but at least you can do that via renderer features which is how you do code based custom post processing in urp maybe I'll do a tutorial on that next for those still on 2021 LTS my thanks to all my patreon supporters who are floating on screen right now I appreciate all of your support as a supporter you can get Early Access tutorial PDFs and free copies of my Shader packs including the recently released hologram shaders Pro so go check it out until next time have fun making shaders

Channel: Daniel Ilett

Views: 24,653

Keywords: unity, shader graph, outline, post processing, fullscreen shader graph, unity 2022.2, unity tech stream, unity 2022 LTS, outline post process, URP Sample Buffer node, unity shader graph, normal outlines, color outlines, fullscreen post process, image effect, outline image effect, thin outlines, outline overlay, outline effect, unity tutorial, unity shader graph tutorial, unity post process tutorial, unity image effect tutorial

Id: VGEz8oKyMpY

Length: 8min 23sec (503 seconds)

Published: Tue Mar 21 2023