Shaders 103 - Using Replacement Shaders

may stop Lucas hello and welcome to another episode of making stuff look good in unity this is shaders 103 proving that some people actually can count to three and today we're going to look at replacement shaders replacement shaders are sets of substrate errs in a single shader program that we can tell our camera to render using when the camera renders with a replacement every object will be drawn using the appropriate substrate from the past and shader program that all sounds a bit convoluted so let's look at an example scene here we have a little green room with a table chairs and a lovely Utah teapot there are three materials in the scene one for each color they are all using the standard shader in Oh peg mode let's start by writing an interesting shader to replace the vanilla one with I'll call the shader show depth the goal of this shader will be to visualize the depth of each pixel in the scene in grayscale will include a float - and our v2f struct and call it depth and our vert function will set the depth to this enchanters 101 i glazed-over matrix multiplication for simplicity sake but now that you've seen nearly 20 minutes of shader tutorials you're basically an expert so let's dig into this a bit more these vertex positions are coming from the object being rendered they are in the local coordinate space of the mesh we're rendering for example a typical cubes vertices have values like this now if the cube is positioned at the origin and it's not rotated or scaled the vertices would be fine to use as world space coordinates but of course things in video games tend to move around so the first step to rendering any piece of geometry is to factor in this transformation from coordinates in the meshes local system to coordinates in the world this is called the model matrix the M of our MVP matrix with the vertex is position in world space we now need to factor in the transformation of the camera because of course we aren't viewing the world from the origin you can think of this as transforming by the inverse of however the cameras been moved in the scene for instance by moving the camera left we're moving the world to the right this part of the transformation is called the view matrix the V in MVP final step in transforming the vertices is to factor in the cameras field of view and the near and far clipping planes picture the cameras view frustum and the transformation that would take this shape into a cube extending from negative 1 to 1 warping all those cameras bass points with it this is called the projection matrix and it's the P of MVP okay that's it for this detour on matrix transformations if you want to really learn this stuff you should check out cat Lake coatings from write-up on matrices it's a great walkthrough on this topic using familiar unity concepts and code snippets I'll throw a link to it in the description back to our shader we're actually going to leave the P off of our MVP matrix so each vertex will only be transformed into the camera's coordinate system this means that Zed values represent distance from the camera the lower the Zed value into the negatives the further away it is will flip the sign to get a positive value next we'll multiply it by projection params W this is a handy uniform variable that simply means one over the farplane value of the current camera we've now got a depth value ranging from zero to one any values outside that range would either be behind the camera or further than the farplane in our fragment shader we'll just return the inverted depth as the RGB components this means that the closer pixel should be white and as they approach the far plane they'll fade to black and that's our shader let's get back to our scene normally we would slap our shader onto a material and then put that material on an object but we want to render everything the camera sees with the same shader well set this up as a short script that will add to our camera all we need is a public shader field and then to call camera set replacement shader in the on enable method we'll do a non null check on the shader and if it passes we'll set that shader as the replacement shader for the camera we'll come back to the second parameter in a bit but for now we'll pass in the string render type the replacement shader stays as is until we reset it so for our convenience we'll do the resetting in the on disable method back in our scene we'll toss our new script onto the main camera and the shader into the public field that we can just disable and re-enable the script to apply the replacement whoa that's bright you can faintly make up the silhouette of the chairs but this looks pretty useless otherwise remember though projection params W was a reference to the far clipping plane of the camera let's bring in the far plane and see what happens much better we now have a nice little grayscale depth view of our scene even though many objects are using different materials we're rendering them all using the same shader egads our materials had so many properties for color specular detail texture has always been destroyed by the replacement shader good question a nifty thing about replacement shaders is that all the material properties are actually maintained in the replacement shader let's have the color property to our depth effect and then in the fragment shader we'll multiply our final color value by the color property now check it out we keep the color set in each material but still replace the shader with our depth effect okay remember the second parameter of the set replacement shader function let's explore its behavior a bit as mentioned earlier the replacement shader should be a set of sub shaders that replace the appropriate shader for each material being rendered this is done using a tagging system the second parameter indicates which tag to check for in the shader that is being replaced we take that value and compare it against all the sub shaders in the replacement shader looking for a match the first matching tag value in the replacement shader will be used if no matching tag is found the object is not rendered because we're using the standard shader in Oh peg mode they are all tagged with the rendered type o peg in our show depth shader we've defined a sub shader with the tag render type and a value of a peg this means all the opaque materials will have their shader replaced by this sub shader but what about transparent geometry back in our scene will create a glass material using the transparent mode of the standard shader when we apply that to the teapot we see a nice glassy object now what happens when we switch our replacement shader back on the teapot disappears let's fix this in our show depth shader under the first sub shader we'll copy and paste the same sub shader but this time we'll change the render type to transparent that's all we need to do to get the transparent teapot to appear in our scene again this is great but it doesn't really reflect the transparent geometry very well it's also a bit strange to visualize the depth of transparent geometry because transparent geometry typically doesn't write to the depth buffer back in our transparent sub shader will turn off said writing and add alpha blending now let's ditch the hole depth thing from the Oh peg sub shader and just return the material color from the frag function this looks a bit more reasonable our transparent geometry is actually showing some transparency and now the colour property on the glass material controls the colour and visibility of the object entire if we don't want to write a new sub shader for every single render tag in our replacement shader we can just pass an empty string as the second parameter this will replace each object shader with the first sub shader defined in the replacement shader let's try another quick effect to get you thinking about the types of effects you can achieve with replacement shaders in the scene view you can expand this drop down menu and view various ways to preview the scene one of them is overdraw select that if you haven't seen this view before its drawing each object with an orange additive blend the brighter the orange the more pixels are being drawn on top of each other in that location you can imagine using this effect in games maybe as a mechanic in a stealth game giving the player the ability to see through objects let's recreate this effect using replacement shaders the shader won't be too different from the transparent variant of our show depth effect will give this shader a cue tag of transparent this guarantees our replaced shader will render over top of the skybox we don't have to worry about the render type tag because we won't be using tagging for this shader we set the z-test you always meaning regardless of what's in the depth buffer this will be drawn we could also just disable writing to the depth buffer with Zed right off either one or both will be sufficient here we'll define our blend mode as 1/1 which is an additive blend as I hinted at in shaders 101 will then define a color in the scope of the cg program and return it from our frag function in our replacement shader script we'll pass an empty string as the second parameter since we just want everything to use the same sub shader we'll also add in a public color field and in the on validate method we'll set that shader variable using the set global color function this is useful when you need a variable in a shader but don't necessarily need or want it to be a material property now we can apply this new shader as the replacement and see its effect I did some experimenting with glow and various colors and you can really start to imagine how you could use an effect like this in your games there are many ways to add a unique style to your games replacement shaders are one tool I don't see discuss much so I hope this video has got you thinking about how you can use them to create some interesting effects you can find the shaders and scripts used today in the link in the description also this weekend is Ludum dare 35 the Ludum dare combo is a 48 hour game making extravaganza I'll be participating and potentially streaming and or making a time-lapse of my weekend so be on the lookout for that if you've got the time for it this weekend I encourage you to join in and make for the competition it's a fantastic challenge and it's a great way to complete something especially if you've been feeling stagnant in your dev work lately oh and I also set up a patreon if you want to support my channel I haven't set up proper reward structures yet but I'm thinking mentions in the credits and early bird video access as potential bonuses if it picks up I can do other fun stuff like asset store giveaway raffles and bonus video content thank you very much to this week's patrons for your support so early on and as always thank you all for watching keep on making those video games you

Channel: Makin' Stuff Look Good

Views: 118,866

Keywords: Unity, Unity3D, Game Development, Programming, Shaders, GLSL, CG Shaders, Shader

Id: Tjl8jP5Nuvc

Length: 9min 35sec (575 seconds)

Published: Wed Apr 13 2016