Shaders Case Study - No Man's Sky: Topographic Scanner

make us look hello and welcome to another episode of making stuff look good in unity today we're going to tackle an effect seen in no man's sky the topographic scanner before we get into it though let's get one thing out of the way this game is quite polarizing some people are loving it others hating it hello games got a lot right and a lot wrong they also had to deal with an outrageous amount of hype that basically no game could live up to I'm personally enjoying my time in this lonely universe simulator but I absolutely understand why others or not but right now we're just talking about a cool visual effect in the game so please keep it civil in the comment section alright let's get down to bidness the effect is a colored wave radiating out from the point it is a hard white edge and a multicolored trail there are horizontal bars that seem to stay fixed based on screen space coordinates rather than moving with 3d positions if we scan near the water we can see that the effect passes through it undisturbed we can assume this is because the effect is using death based information which transparent geometry typically doesn't affect there's not a whole lot else to analyze with in fact the real meat is in the implementation so let's get to it a lot of my previous shader case studies have focused on per object effects but this one is actually going to be implemented as an image effect if we were implementing this per object we could compute a distance from a point say the origin of the scan to the world space position of the fragment which we pass along from the vertex shader then we'd have a value with which we could generate a color to add to the object but when we have millions of triangles there's no way we want to add a second pass to a bunch of materials and redraw the whole scene with an extra distance calculation and then additively blend that over top of the existing objects so instead we'll go with the full-screen image effect and compute the scan color for each pixel of the finished scene render instead of rendering millions of triangles the second time now the problem becomes we don't have access to world space coordinates of fragment like we do when we're working per object but we do have access to the depth buffer here's a pretty cool trick for reconstructing world space position values using the depth buffer this clever hack is used in the built-in global fog image effect as well way back and shoot is 102 I talked about how image effects were like rendering one big quad to the whole screen well what we can do is store a vector in each of the four corners of this quad this vector is array casting from the cameras position to the four corners of the far clip plane well set this up as an additional texture coordinate to be passed through our vertex shader the fragment shader will then receive an interpolated version of the array just like it would a regular texture coordinate then we can sample the depth value at the given fragment and use this helper function from the unity CG include file this gives us a value between 0 and 1 for the depth if we multiply this linear depth value by our interpolated ray we'll get a direction in world space pointing from the camera towards the far plane but with a magnitude equal to the distance to the sample fragment to finish off we can simply add the cameras world space position to our calculated direction and bam we've got a world space position value for every pixel in our image effect you might be asking why we don't just use the depth value as is and while we certainly could but by reconstructing world space values we'll be able to easily decouple the cameras position from the scans origin and moving our camera mid way through a scan won't affect the appearance of the scan this also lets us do radial calculations as if our scan was a large sphere expanding instead of a linear sweep towards the horizon now that we have a world space value we can compare that against the origin point of our scanner I use the transform and feed its position into the shader as a material property next we need to actually do something with our computed distance value we'll add a branch to our fragment shader that checks of the distance value is between a range defined by a fixed distance and a width value if we return one from inside this branch we'll get a ring of white for values that return true in this demo I'm using a couple more material properties to control within and a quick scrip to increase the distance over time I suspect that however no man sky has implemented the effect they accelerate how fast the distance increases such at the further away the scan is from the origin the more quickly it spreads but for now I'm just going to have the distance value increase at a fixed rate we'll take the difference between the fixed distance and the fragments distance dividing out the width of the scan to get a value between 0 & 1 which one returned looks like this taking 1 minus our normalized difference and adding that to the color sampled from the scene render texture gets us a simple white scan with a hard outer edge and a fading trail at this point we've got the core of the effect working but let's cover the fancy coloring and the horizontal bars and really recreate what it looks like in no man's sky for the coloring our setup three material properties which we'll use to create a nice gradient here's my coloring code which basically just mixes the three colors together using our difference value as the alert functions wait I've also included a variable that raises the weight on the edge color by some power to concentrate the leading edge color at the edge adding our computed color to the color sample from the screen gives us a pretty-looking trail alternatively you could use the normalized difference value to sample a small texture which contains a predefined gradient you'd like to use I'm also using the difference value as a multiplier on how visible the trail is and not using the colors alpha values at all but you could easily include those extra multiplications if desired next let's add the horizontal bars I use this repeating absolute function with rounding based on the UV Y position you could also use a repeating texture sample or some other fancy function here multiplying a color by our horizontal bar value and adding that to our scanner color we get screen space horizontal lines and with that we're basically finished with the effect but there's one issue to correct here when our scanner reaches the cameras far plane it just keeps going this is because our image effect is being drawn after the skybox there's a couple of ways we could fix this but by far the easiest way is to simply add this inequality to our branch remember that our depth values range one where values of one are at the farplane so if we filter out values for the sample depth is 1 or greater we won't end up drawing on to the skybox so that's our scanner effect working nicely if you wanted to reveal waypoints the same way no man sky does you can just do some comparisons based on the same distance in origin being fed into the shader the logic side should match the visual representation perfectly that's just another way in which our efforts to reconstruct world space positions have been rewarded the effect works nicely on both deferred and forward rendering so of course you get the depth texture for free when using the deferred rendering path also note that I'm using the image effect Oh peg attribute on the on render image function this means that the effect will run after Oh peg geometry in the skybox of drawn before transparent objects I did this mainly because I was using the global fog in my scene which is also a no peg effect and I wanted the fog to be drawn on top of the scan such that the scan would fade off into the horizon the scene was put together using entirely free and built-in assets so I'll include it with the shader code as well as my demo script that lets you start a scan with a mouse click shout out to all my truly awesome patrons whose support continues to overwhelm me thank you for keeping the dream alive and as always thank you all for watching keep on making those video games you

Channel: Makin' Stuff Look Good

Views: 89,103

Keywords: Unity, Unity3D, Game Development, Programming, No Man's Sky, Shader, Shaders, Sonar Effect, Topographic Effect

Id: OKoNp2RqE9A

Length: 7min 45sec (465 seconds)

Published: Tue Aug 23 2016

Reddit Comments

[u/Broxxar]

Hey all, the video I teased last week is now out! Sorry for the delay. I had real life stuff slow me down a bit.

But at last, it's out now in all its glory. Don't have time to watch it? Get the gist with this sweet 7 second gfycat version!

HMU with any questions right here. Also I'm trying out GitHub for releasing video assets. Give that a clone and let me know if you prefer that to unitypackage files!

[u/DaBossTMR]

You basically turn shader code into English, because now I know how and why interpolated ray is used. Thanks for the tutorial and hard work!

[u/hugosslade]

Love your videos. Always a joy to see a new one in my subs on YouTube.

[u/omgware]

Amazing as always :)

[u/josegv]

Do you consider yourself more of a technical artists, or vfx engineer? I graduated and have a "major" on computer graphics and while I understand everything you did I don't have the same abilities to reverse-engineer how some things were implemented in games, guess this is where talent comes, my thing was always with lighting. Though I guess If I spend some more years developing many different shader effects I would get more familiar with figuring stuff out, I already do with some games.

[u/PretzelSoft]

That's really great! As a new programmer there are a other things I can extrapolate from this that will be very helpful. Thank you!

[u/CustomPhase]

Just happened to need to reconstruct world position from depth a couple of days ago for doing some shadow projection(http://i.imgur.com/bn7RR5d.gifv). The approach that you showed for some reason didnt work me, but this one did http://forum.unity3d.com/threads/problem-with-reconstructing-position-from-depth-buffer.297041/

[u/[deleted]]

Beautiful!

[u/buildflygame]

Great video as always. This one is a tad over my head vs the previous ones, but still great none the less!