Wall Cutout in Unity Shader Graph

games often need to find a way to make characters or other objects visible through solid walls many 3d platformers opted to move the camera past the wall whereas in stealth games enemies can be rendered over the walls for x-ray vision today we'll see how we can cut a hole in the wall itself using a special shader and a bit of ray casting if you end up liking this video and are looking for more shadow graph breakdowns then subscribe to my channel using the subscribe button below the video let's get into the shader let's create a new shader by right clicking in the project view and selecting create shader universal render pipeline lit shader graph i'm using unity 2020.2 so in earlier versions it'll be create shader pbr graph instead i've named it wall cut out this shader needs to replicate the basic functionality of the standard lit shader although for demonstration purposes i'll only handle the base color properties we will add three properties here one is a texture 2d which we'll name main texture the next is a vector 2 called tiling with a default value of 1 1 which means that the texture tiles once across the mesh the third new property is a vector two called offset which will have a default value of zero zero we need to sample the main texture so right click to search for a sample texture 2d node then drag main texture onto the graph and connect it to the texture slot we will also slot a new tiling and offset node into the uv input and connect the tiling property to the tiling slot and the offset property to you guessed it the offset slot let's drag the rgba color output or the sample texture node into the base color pin on the output node on earlier versions of shader graph this might be called albedo instead you can do the same process for metallic smoothness emission and so on if you wish but i won't do this here now we need to work out exactly where to perform the cutout the location of the object that we want to see through the walls will be sent to the shader via scripting our approach here will be to compare that with a screen space position of each pixel and if it is within a certain distance we will call that pixel for that we need even more properties a vector2 called cutout position a float called cutout size and another float called falloff size in other versions of shadercraft use a vector1 instead of a float since we'll be changing those via scripting make sure you change their reference ids in the node settings window i used underscore cut outpulse underscore cutoff size and underscore falloff size respectively for the culling step we will use an alpha cut off so go to the graph settings window and tick alpha clip this enables the shader to curl pixels based on their alpha values you might need to add the alpha and alpha clip threshold pins manually to the output node so right click inside the node and search for the names to add them screen space uvs go from zero to one horizontally and vertically across the screen so we need to take the aspect ratio of the screen into account to make sure that the cutout is circular we will start by adding a screen node which will give us the width and height of the screen in pixels and we'll divide the width by the height this gives us the aspect ratio next we will get the screen position of the pixel being rendered start with a screen position node which gives us the screen space uv of the current pixel and then use a split node to separate its output vector we only need the x and y components and we need to divide the y component by the aspect ratio then we can funnel the unmodified x component and the divided y component into a new vector2 node we need to do the same to the cutout position by dragging the cutout position property onto the graph and then doing the same process with split divide and vector 2 nodes once we've got both we will calculate the distance between the two you could make this more complicated if you'd like say if you wanted a square cut out you would want to check the taxi cab distance between the two but we will just use a distance node to get the euclidean distance or the distance in a straight line between both now we can perform the cut out we could just stick the distance into our step nodes in slot with the cut out size in the edge slot which would give us a sharp circle instead i want to add the option to have a dithered falloff around the cutout circle we're going to use smooth step where the distance is connected to the in slot smooth step is a sigmoid function that returns zero if the in input is below the first edge parameter one if the in input is over the second edge parameter and between those edge values smooth step is a curve between zero and one we will use cutout size the edge 2 parameter and then we will use cutout size minus falloff size for edge 1. this gives us a slightly smoother circle we will output that to a diver node but we need to multiply by 2 to prevent the dither node from dithering the white pixels finally we will output this to the alpha pin on the output node and set the alpha clip threshold to 0.5 this means that any pixel whose alpha is below 0.5 gets cold now that the shader is complete we can create materials with this shader and attach them to the walls but we're not setting the cutoff position or size so of course nothing will happen we're going to need to write a script to calculate where the object we want to look at is positioned in screen space let's create a new script by right-clicking in the project view and selecting create c-sharp script and name it cutout object i'll attach it to the main camera for the variables we'll need a reference to the target object which is the transform that we want to see from behind the wall we're going to be doing a raycast between the main camera position and the target object and we will change the material properties of anything caught in the crossfire for that we need a layer mask to make sure we only target walls we will also need a reference to the camera component attached to this game object which we will assign in a wink to get the cutout location we can use the camera's world to view viewport point method and pass in the target object position this method returns the position of the object in screen space in a format that we can easily compare with screen space uvs that's convenient we need to define by the aspect ratio using the screen width and height in the same way we did in the shader then we can perform the raincast by calculating an offset vector between the camera and the target and then starting the raycast at the camera in that direction the physics.braycast physics.raycastall method returns an array of raycast hit objects which should each contain data about a wall we can israel through the list of raycast hits and for each one we will access the renderer component and grab its list of materials we really want to check if the render actually exists first but hey this isn't production code right we get the list of materials in case the renderer has more than one attached for each material we can set the cutout pos cutout size and fall of size we're not doing anything special for the cutout size of fall of size because we're just keeping the cutout circle the same size on screen all the time but you could include code to make the circle smaller or larger here back in the scene view i have attached colliders to the walls and given them all a layer called walls the cut out object script on the main camera will also use that layer for its layer mask and we will attach an object to the target object slot then we can see the effect in action this effect was a ton of fun to figure out i've seen other approaches to this effect using a stencil buffer before so i wanted to try out an alternative method and i was surprised it worked out so well for more tutorials like this subscribe to my channel using the subscribe button below the video and check out my other videos and if you want to fund the coffee habit responsible for this video's existence support me on patreon too the people whose names are on screen are my biggest supporters and i'm massively grateful for your support the next shader video will probably be all about snow layering on objects it's been snowing in england lately so it feels thematic for me i hope you learned something today thanks for watching [Music] [Music] you

Channel: Daniel Ilett

Views: 53,315

Keywords: unity, wall cutout, shader, shader graph, urp, universal render pipeline, tutorial, dither, transparency, code, c#, programming, script, see through, 3D, wall cutout shader, unity wall cutout, unity3d, unity 3d, game development unity, daniel ilett, daniel ilett shader, daniel ilett effect

Id: jidloC6gyf8

Length: 8min 22sec (502 seconds)

Published: Mon Feb 15 2021