See Through Wall Shader - Unity Shader Graph Tutorial

for my game treasured i wanted the player to show through objects so when the player goes behind this rock for example he is still visible i wanted something special something i had control over but i couldn't find a good blog or tutorial that would give the results that i wanted so in this video i will show you how to get the screen position of the player how to render a circle and how to add effects to the circle so this is the scene that i will be using it has a light source it has a camera pointing at the wall it has a ground plane and it has a little red capsule behind the wall so currently if we go to the game view we cannot see the red capsule but if we grab the right shader we can now see the capsule through the wall we even have control over the size but of the smoothness of the edges and also the opacity of the circle at the end of the video i will also show you how you can apply other effects like noise to add some flair to the circle so the first thing that we need to do is create a graph which you can do by going to create shader and either you can select the unlit or pbr graph i have already made a shader graph with a basic texture and tint functionality and here is the master because we want to use the alpha point of the master node we need to set the surface to transparent let's first start by creating an ellipse node this will essentially be the base but we will replace it with some code that we'll get into later so let's first grab the uv which is the screen uv so screen position and because we want to create some offset and tiling we need to create a tiling and offset node let's grab that in uv and put that in uv so if we put that in the alpha node you can already see from the little preview that it is inverted so we need to invert it by going through a -1 function so you can see that the complete that the mask basically changes all right so in unity let's quickly create a material let's call it see through that's great spelling but doesn't matter let's go to shader graphs circle see-through so when we apply that to our wall we can already see that something is happening it's just not the desired result yet but because we can see the circle that's already great first we need to get the offset so how do we get the offset well we can first create a vector2 called player position which we want to change in code so we need to set the reference to something that we can use so let's say underscore position it is this position that we can put in offset to create an offset although currently it is not really what we want currently the center is zero zero but if we transform our world position to viewport position then the center will be 0.5 so we need to remap our player position code to range to have 0.5 to be zero so let's do that real quick let's remap our input from 0.5 to 0.5 and minus 1.5 i know these numbers are a bit weird but you'll see that it works okay so now let's see 0.5 0.5 which is not in the center and that is because we need to add what we have remapped to the screen position so let's add an add node let's first add screen position to the remapped one when we press save we can already see in our game view that we have a little ellipse in the center but it is a little bit stretched we want it to be an actual circle instead of it being an ellipse so let's change that in our ellipse width and height section let's add a vector one we call it size we also want to control this in code so we need to change the reference to something recognizable so underscore size in order for us to have actually get the correct width and size we need to take into account the aspect ratio so let's grab the camera and a divide note and to get the aspect ratio we need to divide the height by the width we can now multiply this aspect ratio by the size that we have just created and we can change that we can add that to our width note of course we also want to supply the size by our height note and as you can see we go to our scene view and set our size to one we can see that it is now a circle and that we have control over this circle great so let's go back to our shader graph and let's first start to categorize some of this stuff alright we now have a screen uv section and we also have a size correction which i already took to liberty to add a vector 2 at which we will get to now so we have already said that the ellipse node has a edge that is too harsh so we want to change it to something that is a more of a gradient from the going from the center to the edge with a little fade instead of having a hard edge like i said before so how can we actually grab that and how did i grab that well if we click on the ellipse node we right click that is there is a little section that said show generated code so let's click that so this is the generated code for our ellipse node and we can see that there is a bunch of stuff and if you are familiar with shaders with the normal shaders that is we can already kind of see that we have a vertex and a fragment shader here but this is not what we are after we are looking for ellipse code which is this function right here this function right here these two lines will actually give us the correct thing that we want so let's implement that in shader graph let's first get rid of the ellipse class node node node that is and let's implement what we see in the two lines of code we can see that we have first have a length which we will get to later but we can also see that we need to multiply uv by two we know that our screen uv uh tiling and offset output is our uv so let's first multiply that by two multiply by two then we can also see that we need to subtract one so let's subtract one then it says that we need to divide it by our width and height in a float 2 or a factor 2. so let's get a divide node with the uv stuff in the top and this is why i made a vector 2 node in our size correction group because we can now add that to our divide node and as you can see we have now completed all of the different things within that line apart from the length note so let's add that and now we can get to the second line so the second line shows one minus d where d is the first line so let's one minus okay so there might be an issue where you can see these pink squares if you open them up and this is because our default size is one which will then in turn also be the side the size that is used within the calculations and it apparently can't do zero so let's make one instead and we can already see that now this is fixed let's also set the player position the default player position to 0.5 0.5 and now you can see that we have a circle in the center alright so that is basically it for our code apart from the saturate node and that is basically all of it done you can see in our saturated node we have a nice circle going in the middle to the edge in a gradient which is just what we want so if we grab this and put it in our one minus function we can save it we can now see behind the wall great so the only thing that we want now is a smooth step node where we put this in our in function and we create a vector 1 which we call smoothness set the default 2.5 and the mode to slider so if we set the smoothness in here and we put that in one minus we can now see that we have control over the smoothness of the circle the only thing that i want to add is the opacity which we can add by multiplying the smooth step and we can multiply it by a vector one which we call opet city let's set the default to one with a mode to slider let's save the asset and now we can see that if we lower the opacity there is less see-through so to recap we can now change the position in the shader to change the position on screen which is between 0 and 1 which we can use in code to then control where the player is so let's now first set some variables for our circle great the only thing now is a piece of code that will make sure that our capsule is always shown at the center of the circle so let's make a script and call it circle sync let's add it to our capsule and let's open it up in our coding editor so the first thing that we want to do is delete some of the stuff that we don't need and let's then add some variables the first one is a material since we want the wall material to change we want a camera because we want to transform the world position to the viewport position and we also want a mask because if at some point we want to cast array to check if we are behind the wall we need to have a mask to check the collision masks we also have some shader ids which is the the little text that we put in the reference in shader graph and we want to put those in a public static integer so how do we get it we can get it by going to shader dot property to the id and we can input a string so we have named it underscore position and that's how we get the position id we can also make one for the size id which was underscore size insider update function the first thing that we want is to grab the view position from world so we can do that by going to camera dot world to viewport point and we can simply add the transform.position in order to supply it to our wall material we can do one material dot set factor we can supply our id which was pos id we can simply supply view like i said before we want to check if we are behind a wall or in front of a wall so the first thing that we want is we want the direction towards the camera which we can get by going to camera transform.position and subtract transform.position we then want to make a ray going from the transform.position into the deer or direction but we also want to normalize it then if we want to check if we are behind the wall we can simply go if physics dot raycast we can supply the array we can supply some large number that is always going to hit the camera or go behind it and then supply the mask now that we know that we are behind the wall the wall we can simply go wall material dot set float supply the size id and then just say one because when we're behind the object so if it hits something then we want the size to be one else we want the raw material to be zero and that's all there is to the code if we now go back to unity so the capsule as you can see circle sync is there we have the wall material which is our see-through material our main camera and the mask make sure that the layer is also the same for the wall otherwise it won't work and now it should work so there you go we are in front of the wall and the circle doesn't show but as soon as we go behind the wall we can see that the circle appears of course we can add some smoothing to it so it's it eases going from a circle to not a circle but that is all up to you on how you want to add that we do however have a small problem because if we for example show this nice model and we supply our new shader to it we can see that it has a little issue with the writing to the z buffer we can remedy this by actually you going a little bit hacky so for example if we go to circle see through and we right click on the master node and we click on show generated code as you can see this is the whole shader that is used by the shader graph and as you can see here the z-write is off and we want it to be on so what we need to do is we need to select all so ctrl a ctrl c then in unity in our folder we want to create a shader standard surface shader and we can call it whatever we want so let's go c through with the correct spelling and it will open up and here is our standard shader what we can do is we can control a ctrl v it and now we have copied the generated code into our own shader now we can set the z right to on and we can also for example what i did for my own game is give it its own location so let's go shader c through so when we save it and we go back to unity and in our see-through shader let's actually select the one that i've been using if we now change it to treasured see-through we can now see especially in the game view that the z issue isn't a problem anymore you might see a little bit of glitching in the tree line but i guess we can see through that i guess that was really dutch and i'm not sorry as a bonus i have sure i also told you that i will show how to add some noise to it so let's do that let's first in our shader graph make sure that we have the groups again so it's more it's easier for us to see what is what all right so how would we add a noise to it for example so let's make sure that this is here let's add a gradient noise let's multiply our smooth step with our gradient noise then let's add our smooth step by what we multiplied and let's add that to the multiply section we also want to clamp what we have because otherwise we'll get some strange artifacts so let's clamp that and now we can see that we have some noise added to the like cutout and the noise always stays the same but if you want to change that you can easily animate the noise by the world position or you can either change it by time that is it for this tutorial if you liked the tutorial please leave a like because it helps me out hugely and i know that you appreciate these tutorials if you have questions about some effects that you want to apply or questions about tutorial in general leave them in the comments or go to the discord server links are in the description so that is it for this video bye

Channel: Hunterson Studio

Views: 39,148

Keywords: gamedev, indie, development, games, game, casualdutchman, indiedev, huntersonstudio, unity, unity3d, tut, tutorial, screen, position, effect, walls, help, indie game development, indie gamedev, game development, game dev, see through walls, see through, Shader graph, urp post processing, urp, universal render pipeline, transparancy, behind, see behind wall, screenposition, screen shader, see through tutorial, see through walls tutorial, see through wall tutorial unity, devlog, shader tutorial unity

Id: S5gdvibmsV0

Length: 23min 30sec (1410 seconds)

Published: Wed Jul 29 2020