Shaders Case Study - Stealth Games' XRay Vision

may stop Lucas hello and welcome to another episode of making stuff look good in unity this case study will be a bit different than others because instead of focusing on just one game I want to dive into an effect that appears in many games a lot of stealth games feature a similar x-ray vision ability wherein targets can be identified and highlighted through walls the appearance of the fact and its implementation no doubt vary from game to game I've cherry picked my favorite elements and recreated them in unity namely the glowing edges of a mesh that are visible through walls and other objects let's start with how the edge global effect was achieved before we get into the see through walls first we need two quick rundown on normals and lighting normals are bits of mesh data passed along with every vertex while the vertex provides position information a normal gives us directional information normals are typically pointed outward from the surface of the mesh and are used for lighting calculations if we return the normals as colors in the fragment shader we get something like this the normals we see here are in object space but we'll typically want them in world space unity provides a handy helper function to do this though internally it's just performing this matrix multiplication and normalizing the result visualizing the world space normals we see they return the same value regardless of the object rotation we can use this world space normal in combination with a global lighting direction to calculate a simple directional light the dot product of our world's face normal with the direction of the light will give us a value between negative 1 and 1 this value is typically clamped between 0 & 1 to avoid returning negative values of illumination this value n dot L can be multiplied against the objects color or the texture sample to illuminate the object simply returning the value NL from a frag function creates basic white lighting now that we've covered the basics on lighting let's look at highlighting the edges of the mesh if instead of the global lighting direction in our dot product we use the world space direction from the camera to the vertex what would it look like we'll calculate a normalized vector from the main cameras position to the world space position for each vertex then in our fragment shader we'll take the dot product of our normal with our direction and call this envy returning envy it looks as if there's a light source positioned at the camera that always points to the object in fact if we set up our scene to do exactly that with the basic lighting from earlier the effect would look nearly identical to illuminate the edges we can just invert the result of the dot product from there multiplying our envied by a value greater than 1 will give us a more pronounced edge let's preview the effects so far on a more complex model on the Left we have the textured model and on the right our shader so far we want our outline to render nicely over top of other objects in the scene so let's give it additive blending with z-test always now that we have a shader that renders outlines on top of other objects let's set things up to render our character twice with two different shaders we'll use the second camera using a replacement shader to achieve this check out shaders 103 for an overview on using replacement shaders now in my scene I want the character to be highlighted when there's geometry blocking him I also want the character to be able to use the built in standard shader to do this I've downloaded the built-in shaders from the Unity download archive so I can make some edits allowed the X ray colored outline tag to the tags list I'll also add this tag to the X ray shader itself this is just to get the replacement shader working nicely I also tack on an additional color property we can use to tint the outline now the standard shader actually uses a custom inspector so we'll need to grab the editor script which is packaged with the built in shader downloads and add some code to expose the new color property our second camera can now easily replace anything using the modified standard x-ray shader with the X ray outline shader this second camera will have its clear flag set to don't clear and should have a depth value greater than the main camera so that it renders on top in a short script we'll have the camera set its replacement shader and just like that our character will be rendered again the glowing outline we can see our character through walls but we don't really want to see the outline on top of our character when he's in plain sight so let's deal with that now this is a good example of when you might use this so buffer while the depth buffer is used to cull pixels based on whether they are in front of or behind another object the stencil buffer provides a general-purpose buffer which can be used to mask pixels in our shader stencil operations are simple pass/fail checks for the limited arguments for example in our X ray shader we'll make the reference value 0 and the pass condition not equal because the stencil buffer is zeroed out at the beginning of each frame and nothing else is writing to it the stencil tests always fails for this scene I edited versions of the legacy diffuse and bump map shaders to add this bit of stencil code this gives fragments a reference value of 1 they'll always pass this tensile test and when they do they'll replace whatever is currently in the buffer with the reference value 1 so now our X ray shader which is comparing against the stencil buffer for not equal to 0 will pass the stencil test and won't be discarded when it's blocked by objects you might be wondering why the test isn't passing when other scene geometry is behind our character there's actually a parameter called Zed fail we can define as well this determines what we do when the stencil test passes but the depth test fails when left out it has a default value of keep meaning we keep whatever value was in the stencil buffer if we define Zed fail with the replace operation now we'd see the outline appear whenever any geometry overlaps our character regardless of whether it's behind or in front for this effect will leave Zed fail alone so now our characters glowing edges are visible through walls that covers the core aspects of the effect but before we wrap up let's look at how you might stylize the effect a bit and use it in your game here I've taken the X ray version of the standard shader off of the main character and instead applied it to several enemies that are hidden in the area the enemies have a red outline but you'll notice that we can't see them through walls all the time I've bundled several image effects together that can be eased on or off as well I'm using shader dot set global float to set a variable called global X ray visibility in the X ray outline shader this global visibility is being multiplied against the return value and since the shader is using additive blending a value of zero means outlines are hidden and a value of 1 indicates maximum visibility most of the effects here are standard image effects like the saturation bloom and vignetting though I've also written a custom blurry Distortion I also moved the camera towards the player while simultaneously increasing the field of view to give that perspective distortion effect there are many ways you could stylize this effect these are just a couple of ideas you can use and of course giving the player the ability to see enemies through walls is a major gameplay decision but if you're going to do it may as well do it in style I'll link the shaders and some demos in the description and that does it for this video I know my release schedule has been pretty wild but I'll leave you with this teaser for my next video it covers a game whose name rhymes with grover crotch shout out to all my patrons your support has been just phenomenal and as always thank you all for watching keep on making those video games you

Channel: Makin' Stuff Look Good

Views: 58,410

Keywords: Unity, Unity3D, Game Development, Programming, Shader, Shaders, Graphics, Hitman, Dishonored, Deus Ex: Human Revolution, Stealth Games, X Ray

Id: OJkGGuudm38

Length: 7min 30sec (450 seconds)

Published: Thu Jul 21 2016

Reddit Comments

[u/Broxxar]

Hello all, been a while since my last video but I'm back! This video covers some commonly requested games and effects, namely stealth games where you can see stylized versions of enemies through walls.

Check it out, and feel free to hit me with any follow up questions here!

[u/locojoco]

these videos are really awesome. seriously, keep up the good work.

[u/Daowin]

Great stuff. Always looking forward to your videos.

[u/Jorchay]

amazing work, super useful!

[u/Wyuar]

loved your videos, until this one. kinda went too fast for me to follow. :D

[u/mr_ekan]

Thanks for the tutorial!!

[u/Furfire]

Love your videos dude. Awesome explanations

[u/summaGames]

Hey Broxxar! Another great video from you. What if I want the shader effect to show through some walls but not others? Would I simply use the standard shader without modifications for super opaque walls?

[u/Aweife]

Can this be done in the deferred camera rendering path? Sorry I'm still new to shaders and shaders that depend on different rendering paths are giving me a headache :( /u/Broxxar