Shaders 102 - Basics of Image Effects

hello and welcome to another video about making stuff look good in unity this is shaders 102 and in this video we're going to be writing our own image effects if you haven't seen shaders 101 you might want to check that out first and get the basics of che during alright I'm not here to waste your time so let's shader this so here we've got a very basic game it's not really a functional game at all but instead a bunch of sprites slot down to look like one and shaders 101 we looked at how shaders can control the way an individual object renders today we're going to look at how shaders can change the appearance of every single pixel on the screen at once the cool thing is image effects really aren't that different from a shader applied to an object previously we call it a quad using the UV coordinates of the mesh well what are the UV coordinates of the screen looked like with image effects you can think of the screen is one big quad that covers the entire window and really that's just what's happening on a graphics API level the scene is rendered as normal with the color buffer being filled up as various objects are rendered out but before the contents of the buffer are blasted to the screen we can hook into this final step with on render image this mono behaviour event is raised for all scripts attached to a camera and it gives us a source rendered texture containing all the color and depth buffer information rendered so far and a destination rendered texture which is the camera's target in our case is just going to be the screen okay let's look at some code for how we can implement on render image here's a really simple script we can stick on our camera notable in this script we give it the execute in edit mode attribute so we can preview our image effect in the editor and we declare a public material this is going to be the material we use to render the screen with and then we have on render image the magic function here is really graphic stop lit think of this function is meaning render this source to that destination with this material quick note when using blitt like this it assigns the source to the main texture of the material we're using this is literally the texture in the shader called underscore main text okay so that's rendering with arterial in a nutshell now we need some simple shader to actually test out our new script I'm going to use a carbon copy of one of the first shaders we wrote in 101 this will render out the UV coordinates as colors and ignore the texture entirely now we can put our script on the camera put that shader on a material and then put that material on the script a Dwolla far from the most useful image effect but we're getting somewhere let's quickly bring in a texture sample and multiply that against UV color and see what we come up with okay now this sort of resembles some effect you might actually use in your game I mean like if you were making some jazz punk ass acid trip deal before we start making anything really wild let's talk about textures when you think of a texture you might think of an image that we can look at and make some sense of sprites and unwrapped models are all like this they're meant to be seen but really a texture is just an array of values and while we typically think of those values as colors they don't necessarily have to be in a texture we can encode whatever we want the resultant image might look nonsensical to our eyes but to our shader that texture can be a lookup table a height map a set of randomized noise values or just about anything else we might find useful to have in a shader alright enough theory let's see what I'm talking about here look at this what is this crazy mess it's vaguely red and green with splashes of yellow and darker black regions it's certainly not a nice pattern we would want textured on an object in our game well what if I told you that the red values could be UV offsets on the X this and the green values UV offsets on the y-axis let's look at how this would be implemented and try it out on the demo scene we'll include a second texture called displaced X and the range slider called magnitude remember as well as adding those properties we also have to define those in the scope of our cg shader now check out this fragment shader we start off by creating a float to which we sample from the displacement map with our regular UV coordinates next we multiply that displacement amount by two and subtract one this takes its values from the range zero to one and pushes them out to the range negative one to one then we multiply it by our magnitude variable now we sample our main texture as normal but we add our displacement value to our UV coordinates back in our scene will set up the material and include that crazy red and green mass as the displacement map double check that your map is set to repeat and not clamp in the textures import settings now we slap this new material on to our image effect and nothing happens until we dial up that magnitude slider dang now this is really starting to look like an effect we could actually use in our games so this crazy mess might look like to us but to the shader it's a thing of beauty or something whatever a common use for this sort of wavy full-screen distortion is to show heat if you've seen the effect before you know it should be animated in some way to give the impression that the air is so hot it's literally bending the light around it we can recreate that effect just one additional line and by using a handy uniform variable called underscore time made available through the unity CG include file time dot X simply gives us the current game time why don't you try to animate the shader for yourself in another all right no we can skip that this time but definitely come back to this and play around with this shader let's step away from using other textures as inputs for a bit and take a look at some other common image effects something image effects will often need to do is blur an image sometimes you might even just use a blur as an effect itself so let's implement the very simple box blur a box blur means that for each pixel we average its color with that of the adjacent eight pixels it's not the nicest looking or the most performant blur but it's easy to understand and easy to implement so let's do it up it's not the most attractive piece of code but this is what it looks like to sample the texture nine times for each pixel adding them all together and then returning that result divided by the number of samples we used one cool thing I want to point out here is a use of main text Texel size defined this in the scope of your cg shader for an easy way of getting the actual size of a pixel remember that when we're working with you these numbers range from zero to one so the size of a pixel on the screen is actually going to be like 1 divided by 1920 by 1/10 e or whatever your aims rendering at okay let's check out this blur in our scene did you see it given that this video already has some blurring from compression it's possible you wouldn't even see this tiny amount of blurring there are a couple things we can do to easily increase the amount of blurring first and foremost is blurring the blurred image we'll make a script for blurring that will do a bit more than apply a material to our render specifically it's going to apply the material several times this is a tricked out version of our simple material applying image effect let's go over the changes we've added a public int with a range slider to control how many blur iterations we perform we generate a temporary rendered texture that is the same width and height as our source and then do a plane blip from the source into our T now with our screen content stored in our T we loop over this block of code in it we create yet another temporary render texture we've lit our T into the second temp texture using the blur material the blurred image should now be inside our t2 so we can release our tea then we'll set Artie - Artie - so that whether we loop around again or exit the loop our blurred image is referenced by our team after however many loops we set our complete we've lit Artie to the destination and then finally we can release that temporary texture this process of storing textures here and there temporarily while you build up your desired effect is common practice for a lot of image effects so hopefully this all makes some sense back and our scene we can test out our new blur and we see the image blurring more as we crank up the number of iterations it's obviously not a great idea to perform too many iterations especially given that we're blurring every pixel by sampling the texture nine times so let's squeeze out a bit more performance on our blur by reducing the resolution of the image we'll tack on an inter Ange slider and then in on render image set up our width and height to be bit shifted versions of the source width and height in this way the image will always be scaled down and powers of two testing this out in the scene we can see the benefit is actually twofold not only are we blurring fewer pixels with every iteration but thanks to bilinear scaling the down rezzed image is just naturally a bit blurrier for comparison the left side here is blurred ten times with no scaling and the right side is blurred just three times for the down res factor of two this box blur script and shader will all be linked below in the comments along with other various shaders and resources used in this video if you're looking to further your knowledge of image effects the best recommendation that can make is that you go and look at how the image effects included with unity are implemented you can see what an optimized blur looks like or how bloom and full screen glow are achieved there's fisheye filters depth of field yada yada yada just tear this code apart and understand how it works it's one of the best ways to learn how to write your own effects going forward and that does it for shaders 102 thanks for watching I'm planning at least a dozen of the videos in this series aiming at a weekly release schedule so if you like this stuff subscribe or come check back next week the new

Channel: Dan Moran

Views: 134,772

Keywords: Unity3D, Tutorials, Game Development, Shaders, Image Effects

Id: kpBnIAPtsj8

Length: 10min 0sec (600 seconds)

Published: Wed Mar 02 2016