Unity Tutorial: A Practical Intro to Shaders - Part 1

hey folks equality here and welcome to a unity introduction to shaders a practical introduction really because if you are like me um shaders might seem like the sort of thing you'd really like to get into but it can be very intimidating because it works quite a bit differently than a lot of other programming used to and there's plenty of references online but where do you get started so what I'm hoping to do here is to work through a couple practical examples of very simple shaders just get your mind in place for understanding the workflow and then you can use your personal superior art skills and math skills and different things like that start looking up some references and come up with some really cool stuff probably stuff that's a lot cooler than I can do so what's a shader well I've gone ahead and set up a simple little scene in unity here I've got three cubes one of them is this god-awful shade of pink what's going on there well a pink color there it represents some sort of error with um a material in in unity let's look at what it is this this big cube is cube number two so actually let me get rid of this box Collider we don't need that box Collider is only there for physics of course to show something on screen the thing has to be rendered in some way and for a 3d object you use a mesh renderer a mesh render a mesh is your your geometric information right the vertices and triangles that make up an object and a mesh renderer actually requires that you have a mesh filter the mesh filter actually has the information about the mash it says out of this cube has eight vertices and it has a twelve triangles and these triangles use these vertices in a certain way plus we've got normals information different things like that so that's what the mesh contains information is and the renderer is responsible to shipping this mesh to the video card but also combining this mesh with some sort of material so the video card is going to get this set of vertices and be like great I've got some vertices how do you actually want me to show these vertices on screen and that's where the material comes in and this cube doesn't have a material which is why it's got this error so let's go ahead click this little button here I'm just going to give it the default material this is normally when you make an object in unity it automatically assigns this default diffuse material and of course this should look very familiar to you I've got three cubes on a plane done it's got shadows and stuff like that it's got lighting right if we if we move around here depending on how we are orientating ourselves compared to the light the cubes will look a little bit different or we can take this light and rotate it around well the material is responsible for the color of the cube the texture as well which we will do shortly right if you've got an image texture the material is responsible for showing that on the cube and the material is also responsible for looking at all the lights in your scene and using that to inform how it should be rendered for example if our light currently is on the other side of our cubes then the the faces that the triangles that are being rendered are not going to be very brightly lit they're only going to use the actual color of the material plus whatever ambient light has been set up and you can't set your ambient light to be zero it would be purely black over here because there would be no light shining on it whereas if we go ahead and rotate the light this way then the light is shining directly on the surface of cubes so now our material is using this lighting information multiplied by you know the color and the texture of the cube and you know bump mapping and anything else you decide to throw in to generate the final color of the pixel that will appear on the monitor all right fair enough you've probably worked with materials before let's go ahead and create a material so we're going to go and just create a new material I'm going to call this red material excellent and I'm gonna go and just change its its albedo over here because this is unit t5 the default material is a physically based rendering material physically based shader so it's got slightly different terms so basically the albedo is the basic color of the objects we're going to say it's red and we're going to take our cube cube number two is at the front here and I'm going to drop in the red material and there it is so it shows up red great we could also we could specify somewhere to the texture over here I use my noise texture if I wanted to put it in there and you know I could leave it white or whatever so there's some sort of it's combining the the texture color with like the color from the texture itself multiplied by this color that we're specifying here to tint the color you know great fine it's got a bunch of other properties awesome well one thing you may have played with before is this little pull down at the top where you get to select the shader so the material you think it's common to assume the material is what causes the object to look a certain way well really in a very real sense the material immunity is simply this screen here it's this inspector the material is the interface by which you use a user interface to send information to a shader and the shader is the thing that actually does the work so by default this red material is new material we created is using the standard shader but there's a lot of different ones in here um and they are used commonly for a few different things most your objects in unity you may just use a standard shader or a custom one that you've written although um user interface stuff mostly uses these sprite or UI elements right let's say I go and create a new 2d objects when you sprite it has a slight it still has to be rendered on the screen somehow so this uses a sprite render instead which just uses different rules to tell unity how to produce this image on the screen but it still needs a material and it defaults this sprite default one if we were to go and create a user interface with either an image or text it also has a material slot now here it doesn't set one by default we do have the image it's in the middle of our screen here if I go in like this and then grab my that so there it's a little hard to see because it's just a white square I guess I could throw this image in here there we go now you can see it a little bit better um this still has materially defaults it doesn't actually show it here but all your UI elements will default to UI default over here for example um so yeah so everything that's got to be rendered in Sim screen has a material which really is just a front-end to a shader and a shader is the program that runs the graphic card to tell it how the pixels of this object should be shown on the actual monitor in the end and there are trying to think that the best way to describe how many variants of shaders there are cuz in a sense they're all the same okay but you'll hear references to vert shaders or vertex shaders I suppose vertex shaders fragment shaders surface shaders post-processing image effect shaders and so on and so forth and really they're all kind of sort of the same thing so we're just going to focus on specifically the vertex and fragment shaders actual we're gonna start off with the fragment shader an example here cuz it should be the most I think it will be relatively easy to deal with so um I will say this surface shaders are sort of just a unity kind of shortcut or macro to more easily Pat out a frag slash verts a door without having to do as much work a surface shader basically deals with all the lighting information for you so things like shadows and looking at all the lights in the scene and deciding how those lights affect your your particular object that you're trying to render right now the surface shaders basically do all that work for you as opposed to having to write your own little lighting code but if you have if you want to do something that is kind of used as lighting in a really funky way like maybe some tuned shaders or something like that maybe you'll want to write your own lighting code invert and frag shaders although frequently the the places where you'll use vert and frag shaders are places where you don't care about the lighting either Lighting's already been handled or you're working with an object that doesn't care about light by itself if you really care about light then you might use the surf anyway I'm sort of getting a little bit beyond here let's do some work so for our very first example we go and hide the canvas we don't need that here and this brighten was again get rid of it I mean I keep working on this scene right over here so what we're going to do first is we're going to apply a full-screen effect and what's nice about this is the the shader that we're in use for this full screen effect is not going to be attached to an object so it doesn't care about the object itself it doesn't really have any vertices to manipulate it's going to be a pure frag shader if your fragment shader so how are we going to press for this we're going to create first I'm going to create a new shader and I'm going to attach a material to it so I'm going to create a shader now again here we've got a variety of templates this is what these are these four templates and let's ignore the compute trader completely and I already told you whoops that the surface shader is basically a subset of a vert vertex plus fragment shader more or less so really we sort of have two left now an unlit shader that's basically your default I don't do anything fancy vertex fragment shader that's as close to sort of an empty shaders you can get for your typical production but the image effect shader is almost exactly the same thing this is just one that is configured a little more closely to what you want for a full-screen image effect which is what we're going to do here I'm going to have an effect that I mean attach the camera it's not going to be attached to any particular object it's going to change the way the entire scene is rendered by being attached to the camera so we're gonna use this image effect shader and um all we're going to do this thing is we're gonna make things more red or something I'll just call it the a post effect shape so the idea with this is the whole scene gets rendered um in a way that you're not in perfectly normal way but what happens when your video card renders a scene it basically creates an image that's I mean in the end that's what it's showing on your monitor its rendering the whole screen for this frame putting that all in an image and then sending that image to your monitor or you know within this window box over here and this image is what we're seeing it just so happens that this image is being updated you know 30 60 whatever frames per second and that's fine but what we're going to do is before sending this image to the screen we're going to pass it through a shader and we can do that because um in this case you can think of it it's almost like we have a single object imagine our whole scene is a single quad that is perfectly aligned with the camera and this quad just happens to have a texture on it well that's exactly what this is going to do it's basically we're this texture that we're going to be modifying with the shader is just going to be the final image and then we can just muck around with it a little bit it's going to be I think a really good way to introduce this so we're going to call this post effect shader and we are going to go ahead and open this up now by default it already sets up a few things for us making this and let's hit OK now it at the top here this is the name of the shader this is a hint to unity about how to organize in fact the only place the shader actually does any work is between the cg program line all the way down to the NC G program or started just NC G line this is where all the work of the shader happens everything else is just extra unity stuff basically to help it understand how to interact with the shader including the name now by default this hidden one is sort of a special one where it won't show up in the menu and what do I mean by that if we go and check you know our red material I'm sure it's not red anymore for the sake of argument let's go ahead and make it right again so that makes sense with his name sees lists of shaders notice there's no folder here for hidden but if I go and rename this to something like custom and then go here you see we've got a custom folder with post effect shaders the one we just created so this is just you know where to put it in that menu and then properties this is how we interact with things so let's go ahead actually demonstrate that very well we're going to create a new material because unity can't really you can't just use a shader directly I mean you can encode but let's ignore that and let's assume that the best way to get things done is with the material so we're going to call this the post effect material and we're going to give this we're going to tell it that it should be using this shader and this shader only has one parameter it's called texture over here and that should make sense or one property that should make sense can we do more stuff sure I mean first of all I can rename this I could rename this to main texture now the sudden it'll say main texture instead of texture great that's just just a visual sort of thing um we could take in a color we can we can do a whole slew of different things if we would like um I think what I'm gonna do is I'm gonna go ahead and just skip this for now we're going to come back and do some more work with these properties later on so let's let's leave this properties Mike let's go look at the actual work so there's a bunch of things going on here too the important bits are these pragma lines which could actually be combined together I'm pretty sure I think we can do this let's see if I'm lying to you Oh apparently I'm lying to you we need separate lines that really that we could combine that together I guess I'm just thinking of other things with like the surface shaders alright so we got both those lines now we don't get any more errors excellent okay so we have this post effect shader over here and it's defining these pragmas are telling the sort of Greater system hey we have a vertex shader here it's it's a function called vert and we have a fragment shader and it's a function called frag and if we look down you can see we're including some sort of file ok fine we're defining a couple of structure types ok fine we're mostly going to gloss over this in our project their tutorial you hope tell you you can look at the reference material to figure out exactly what's going down there but what we end up with our two functions down here a vert function and a frag function so effectively this revert function will get called once for each vertice in the object that you are that this shader is being applied to right so if this was a shader being applied to a cube it would get run at eight times I don't think I'm lying to you I think it would do that and then it gives you a chance to manipulate certain things based on these vertices this is a good thing if you want to distort sort of more physically where an object is being rendered on the screen we're going to be looking at this in an example a little bit later probably probably the second part of this tutorial I suspect is going to be mostly based around messing around with the Burke shader for us funkify infante stuff which is going to be fun to do so mostly here it allows you to take a look at your vertex information and to either manipulate them or in these structures you can add extra data over here and the fact that you can just you know add some extra stuff let's say you know we had another float for here we can look at this data structuring bit called foo and it's not linked to anything necessarily and we can just pad that in we're not going to do that right now but you can use that you can fill in this data here and then you sort of save it for another step and then down here you got a fragment shader this fragment shader runs once for every pixel that should be like hold on I got some red flags here let's do some quick math if let's say so this is going to be a full-screen effect that's we're working on here now this shader could certainly be for a tiny little object that just off in the corner of the screen you know only needs like ten pixels to be rendered but we're doing a full screen effect here so let's assume if we are running at 1920 x 1080 that's over two million pixels and this runs once for each one of those pixels how fast or slow does this and yeah because let me tell you something let's actually back up and go into unity the way that we're going to get this post effect to work basically the way that this shader is going to be used on our full screen here is on our camera we're going to add a script so I'm going to create a new C sharp script and I'm going to call this um I guess post effect script there we go that's going to be great and we're just going to add that go come on we're just going to add that to our camera and then we're going to open this up so on this script we don't need a whole lot of stuff this script we can get rid of the start and update it's going to have a function call on render image and it's going to take in two parameters it's going to take it they're both going to be rendered textures and typically you call them source render texture and destination that's the typical way of doing it and basically what this is is after our whole scene gets rendered okay so we passed all objects of videocard they've all been rendered and we've got that final image that is supposed to go to the video card this is an in-between step where so source is the fully rendered scene that you would normally send directly to the monitor we are intercepting this so we can do a bit more work before passing it on and to pass it on we're basically just going to do graphic split this is a function and we're going to copy the source into the destination and right now we're going to do this directly and in fact if we do this and we run the program something I haven't made any syntax errors we hit play nothing will happen everything is perfectly the same as before um because we're not actually we're not actually intercepting things but one could easily imagine imagine for situation this is this is like pretending to do image effect in CPU this is just you not do this this would be really bad um we ought to grab the pixels in some way so right we want to do some sort of image effect and we're going to do it here and you tcode don't do this it's terrible so we need our pixels which is really just an array of colors called pixels and we have to get it in some way there's a lot of different ways to do it I mean effectively you're doing some sort of like texture dot get pixels if you do this this will fill in your array we're just going to go ahead and we're just instantiate some new ones and we're going to instantiate 1920 by 1080 because we're like let's say this 1080p you can actually you can you can ask unity what your current resolution actually is but for the sake of argument we'll do this note this is going to allocate over 2 million of these pixels these color arrays and each one of these is several bytes so really this is going to be allocating I don't know 10 20 Meg's of memory every single frame and you can't really as far as I know I mean you can't really just do this once and start because I'm pretty sure that if you were to do texture that get pixels I believe it alik eights it doesn't give you the raw pixels for you to mess around with I think it a liqu AIT's a copy of that array so effectively we would be assigning this memory every time that may or may not be true and there's probably lots of ways to optimize it but you know just for the sake of argument so we've got that and we've got some sort of a loop for int X actually hold on we take a shortcut for add tab that's 1920 so this is X and then for y is less than 1920 and then you know we change our pixel we change pixels at position x times X plus y times 1080 and we set you know I know we set the red to be equal to some equation we're doing what we do a little bit of vector mera float mathematics to slow things down like that and we do that and then we apply it you know probably apply some kind of texture dot set pixels with pixels in there and then there we go so again you know sort of a contrived example how fast would this run so this script is already applied to the camera and it's so it's a script that does a whole lot nothing but it is going to just sit here and kill a little bit of our CPU time double the float no it's specified that those are floating-point things that should get rid of the air excellent let's say I hit this little Indo here to get our stats and let's hit play how's our frame rate all right we're sitting somewhere around 45 frames per second right now in a scene that does nothing absolutely nothing it is a dead scene and we're only running that fast and we're also allocating the allocating a lot of memory um so we're actually getting lucky here this could have been way worse in fact I don't know what I did slightly differently here oh I think um let's say we did like a little bit more complicated math let's say we need a square root I think that was my whoa I was my example I'm not a square root just a power function square root would be even slower I think if we needed a power function so that to the power of something else now I bet you would get really really Bismil e bad rates yeah five frames per second just by but by taking a power function of something five FPS listen even if you're a console gamer that starts to feel pretty slow considering the scene does absolutely nothing and yes lots of examples why we need might need to do some some advanced some more mathematics to figure things out what if you're trying to do some sort of distortion in your screen based on you know distance from like in a circle and so like all of a sudden well you need to use the Pythagorean formula and different things like that well then you need power and square roots and these things and oh my god turns out when you're trying to do two million of something in a frame it slows you down really fast but isn't that so this we don't want to do because but like really bad in CPU but isn't that still exactly what we want to do here right now this shader is just inverting the color but it's really easy to assume like we could we could start doing some sort of math here let's let's do some dummy math in here um let's say we're going to create a new float called a which is I'm going to try to like intentionally make it even more unoptimized here another float called B which is this and a float C which is a times B and then um it's just power hold on shader pal it's just POW and then two numbers right that did it did it it yeah okay so then we have a float D which is power of let's say a to the power of C I think this is all valid code let's go and find out excellent yes okay so we got no errors so I've got some sort of valid code here now we stopped still not using the shader yet we're still not using the shader yet how do we actually use it okay well in our post effect script we're currently we're copying the source into the destination right now and doing nothing else with it what we'd like to do is during this copy we would like it pass it through a material I throw a shader to use a sort of a filter effect right like an Instagram filter that's what we're doing so it does it turns out this graphic split function can take a third parameter actually it's got a few different variants but it can take a third parameter which is a material now you can use this graphic sublet even without render textures you can use a normal texture oh by the way if you've ever tried to follow any sort of um uh tutorial before for that used shaders and particularly do these post effects you might have seen time and time again that you can't do this in the free unity version that is no longer true as of unity I think five ever since that the unity free version I think started getting called the personal edition or something like that this on render image graphic blitz render textures all these things we didn't use to be available in the free version is now available you can do this in the free version in fact I'm working in the free version here okay so you can pass this copy step through some sort of material which is what we're going to do there you go public material here y'all Matt mhm and if we look at our main camera script over there it wants the material so we're going to grab the post effect material and feed it in there then I'm going to play excellent this material if you'll remember we haven't actually looked at it but this material all it's doing is inverting call we're gonna look at this in a second right now what this material is really doing is a whole bunch of useless math how fast is this running and remember it's still doing this on every single pixel how fast is it running 90 frames per second that sounds a lot better doesn't it actually it's even better than this because by default in unity project settings quality by default vsync is turned on so that it limits the framerate to no faster than the refresh rate of your monitor let's turn that off for a moment here which you know will start to overwork my graphic card but at exact here out of curiosity how fast is our framerate now if I hit play over 2,000 frames per second we're doing exactly the same sort of math as before a bunch of stupid math you know some random floating-point equations we're taking a power function and yet instead of running at five frames per second we're running at 2,000 frames per second because we have shifted all the work to the graphic card and what the graphic card really is is a whole bunch of tiny little CPUs there are simple CPUs they can't do a lot of stuff they have limited memory each one of these CPUs but there are a lot of them that are working at the exact same time and they're very fast so each one of them is running this tiny little program that it gets runs once for every single pixel but turns out to be insanely fast that's the real advantage shaders you get to because all the cool funky stuff that you can do with shader you could do in a normal script that manipulates pixels but would be apocalyptically slow excellent so it turns out this was really fast so this fragment function that gets called once per pixel what is it doing right now well right now it's doing very little it is it's got this function here text 2d what it's doing is it's taking our texture this is our main texture if we look over here and we look at our cube right this is my red cube with this red material um oh that's not we're using that's right we're not we're not doing anything with it Oh dirt so right now sorry my bad it's taking an a main texture and this material does have a main texture this post effect material does take in a slot for main texture we have an assigned one we could we could assign a material but if we hit play you'll notice something as soon as we start playing this goes blank why is it well because when you are using a material as a post effect shader and calling it on here this material the main texture is being set to the source so when we look at our shader script this main texture is literally just the screen is this or more I feel like this this is what comes in the main texture and then for every single pixel and we're getting a coordinate the UV coordinates which if you've ever worked in a 3d design program you've worked with maybe UV coordinates this is our current coordinates the eye this is our sort of input in fact a lot of code might write it like a something like in and then we can say in that UV write this is our input information so this contains the current coordinates of the pixel basically for this current mesh / texture and whatever so we're saying hey this UV coordinate from this texture get me that pixel there that's what it is we're getting the color Co L here in this case is a color and a color has four components red green blue and an alpha and fixed four is one of the many sort of data types you work in in these languages fixed for is unless I'm mistaken a fixed in this context is a number that goes from basically minus 2 to plus 2 I think is the range but really our colors go from 0 to 1 right if we had a color that was 0 0 0 that would be clearly black and a color that was 1 1 1 that would be purely white and then anything between is Gray's war if you mismatch it so that you have a red of 1 and a green of 0 and a blue of 0 then it's just purely red right so it's got those four in the fourth value is the alpha which is transparency right so this pixel information is just being represented by this data type doesn't have a specific data type for pixel info because it doesn't need one keeps everything a little bit simpler but you can imagine that this is just pixel info just getting the color from the texture at a certain coordinate then we're inverting the color this is actually an operation that you couldn't just do in c-sharp you would instead have to do something like call dot R equals one - called R I mean I shouldn't have to explain why this reverses right because currently let's say R is equal to 1 so 1 minus 1 would be 0 so we've inverted it or vice versa if our current called R was 0 1 minus 0 is 1 so again we're inverting it so typically you might have to do something like this but there's a bunch of little shortcuts to allow you to do this sort of operation it's great this also works with vertices and stuff in the shader language so we're just inverting the current color and then returning that so we're getting the color from the texture and then returning that what else can we do can we instead of inverting it let's um let's just force the red portion of the color to be 1 what would that look like so I'm going to switch over here and I mean hit play and the whole screen turns red or pink or whatever basically we've turned the redness of each one of these pixels to 100% while not touching the green or the blue hey very cool um you know it's kind of annoying to hit play every time we do this is there something we can do to avoid that yeah absolutely in any unity script that is attached to any kind of object whatever you know any model behavior you can give it a little function a little thing here that says execute in edit mode if we do this then your script will run in edit mode on render image will be called also um any like void wah void update will be called Burtt I believe on start' will also be called I don't think fixed update gets called but don't quote me on that look up the reference yourself but definitely update does and definitely on render image does so now by doing this this script will run in the editor which means since it recompiles that script our shader I don't have to hit play anymore our shader is now live and if I make some changes to our shader let's say I flip it back to inverting the colors instead of sending it red I get save I just go over to unity and recompile the shader and instantly it's still running over here so we get the new visual effect and if I like take one of these cubes and rotate around we can see everything in real time very cool very funky love it ok very handy there so already this should give you a little something-something like huh ok fragment all it does its entire job this functions entire job is to tell the video card basically what color the pixel should be in this particular location so you can screw around with the colors that's one possibility I like that what else can you do well instead of screwing around with the color so if I comment this out so now we're just going to get the correct color from the texture and return that so now everything will look normal and it does but what if we start to do something really weird like what if we start to say instead of grabbing the color at the correct pixel what if we start to offset things let's give that a try so right now we are these this is where we're asking the main texture hey what's your pixel at this coordinate what if we move this a little bit so let's add an offset which I believe this is a float - so let's offset it by I don't know 10 in the y-direction and see what happens what I'm gonna do is save and switch back oh oh right of course derp um let's try to offset it by a small number not 10 that's not even really visible let me try a couple little other options this might not be the best way to show the example I thought it would be oh there we go excellent excellent so I've just got I just got the script set to do monitor and what I've done here so I've set I'm setting it back to zero so this is zero I mean I set it now to 0.1 this should raise the scene up by 10% so I'm saving and I'm switching to unity now and that's exactly what happened it raised the scene up by 10% because what we're doing is when we're grabbing the pixels from our texture we're grabbing it at a Y that is 10% higher because texture coordinates range from 0 to 1 right so if I if I'm adding an extra point 1 to the Y then it's wrapping from pixels 10% higher up now there's a bit of an inversion here because if you are grabbing imagine this our texture for grabbing our texture from 10% higher in the texture for certain pixels then wouldn't it reduce maybe it's not confusing to you at all but there's a bit of an inversion in in coordinates so you might have assumed that having a positive number here would actually make the visuals go downwards but anyway so there okay now we can grab pixels from different area now would we want to grab would we want all pixels to be moved together well I mean if you want your whole seam to move up and down well honestly the easiest way to do that is probably just move your camera around but I guess this is fine can you do something a little cooler here yeah what if great now we're moving every single pixel in our picture up by 10% what if instead of moving every single pixel the same amount what if we move them a slightly different amount how would we do that well let's say so this is the the vertical movement right well let's keep the X 0 so let's only move the y-axis so we're only moving our pixels in the vertical direction what if we move them in the vertical direction proportional to their position in the x axis which we can do because this input has like vertex this is world space information um actually at this point I guess it's been converted to screen space which is fine okay so if this is screen space I think this will be in pixels let's see we'll give it a try let's say we're going to move up and down in the Y direction right like or you know that's UV coordinates but basically we're moving up and down vertically here in terms of our texture but we're doing it based on our X and I think what we're going to want to do here is divide it by I know something like 300 something like that we'll see what happens let's go and see what this does Wow as so here it's normal this is actually where the pixel is supposed to be but as we move further X we move higher up in the Y obviously we need to shrink this down even more let's try five thousand there we go so we're distorting it this way interesting can we do something a little funkier well what if instead of just doing it sort of linearly like this what if we feed it into a sine function right sine is a function that will take in a number I believe these these work in degrees in here it might be radians though actually I'm not I don't remember if the scripting line or if it's programming languages uses radians or degrees here it doesn't matter we're gonna feed in some sort of value and it's going to return a value that goes from minus one to plus one right as a sine wave let's see what this looks like we'll probably have tweaked numbers okay yeah we definitely have to do the numbers oh well first of all because it's returning it from plus 1 to negative 1 obviously this is going to be way too pronounced of an effect let's divide it by like 50 or something like that for 1 ok that's probably not enough in effect since I can't see it by 10 okay now with it it is starting to go up a bit here but now let's go and make this even smaller something like that or the other way around the other way around like this okay and more divided by 50 yeah that makes sense ah no hey that's kind of funky right so I mean this is a purely a visual effect if we go and grab say our cube over here on let's get out a 2d view let's look straight down and if I move this around I mean wow that is pretty weird and awesome so now you're like you should be getting more ideas of like okay we can make me feel like things what if now this is still relatively static it looks particularly weird if we rotate the camera around and you can see in the scene preview what it would normally look like down here and you can clearly see how the sine wave is distorting all this stuff we can also add a time parameter here one of the bits of info that unity passes to our shader is how much time has passed since the program started running and we could say add that to our little sine function so basically there is this time variable this time property this is actually an array well it's actually a fixed I think it's a float for this one the zeroth one is actually the number of seconds divided by 21 is the number of seconds two is the number of seconds times two and the third one is the number of seconds times three things times three naught times four so if you just want the number of seconds you can do that um and I suspect that this will be too fast faster too slow too fast I think now one thing is even though our script is still running here in edit mode the time will always be zero the will the unity will always send zero is the time to the shader unless we're playing since the time that the play started oh actually that works up pretty good you might want to multiply that time to get this effect faster or you might want to divide the time to get the effect slower we could maybe go for a more sort of subtle you are slightly drunk effect if we make the sine wave sort of less prominent Oh a maybe even less than that let's say times 50 there we go and then you a faster or slower maybe you know you could go like quite slow this would be a very very very subtle shift in fact if we make this number even bigger so the sine waves is less of a thing and it will be very very slowly shifting over time almost imperceptibly so okay Matt maybe a little too slow but I kind of like the idea just sort of screwing the user a bit you know especially if you started off with it sort of zero and then yeah there you go sorted dish just distorting a little bit in the distance now that sine wave is still quite regular right you can you can tell that it's a waviness is there a way to make this this or ssin a little bit more random and a little less regular absolutely there is what if we added a certain amount of randomness here well two things one a pure random function doesn't really exist in the shader language there's lots of reasons for that and as that probably has to do with concurrency and optimization different things like that you can sort of fake it by using a sort of hash function and passing an x y&z coordinates and you know sort of running it through some sort of mathematics so that you can end up with a number that feels pretty random but a particular coordinate will always return the same amount and that's not too bad the final way of doing it is to use a source of randomness a source of noise which is what this texture is going to be for and this will sort of act as a random seed for so what's going to be quite nice is we don't actually want like a total random distortion everywhere because that's just going to be like weirdly weird noise that just shoots up and down randomly at every single pixel and effectively you're not gonna have an image anymore but a cloud image like this which is very easy to making basically any image editing program I just didn't Photoshop cloud image like this gradually shifts from light to dark and back and if we use this as a sort of source for this Distortion wouldn't that look kind of funky cool in fact it looks very funky cool we're going to put a cut in here but in the next episode we're going to look at using this noise check texture as a source for our distortion and we're not going to use it on the full screen effect we're gonna we're going to end with the full screen effect at this point and instead we will start looking at another way to use shaders for 2d elements we can also use it for 3d but instead of doing a full screen element I'm going to show you a shader applied to a object instead of effectively all objects simultaneously but it's basically going to be continuation of this work over here and I think that the different example will prove it to be quite cool so we're going to continue with fragment shaders a bit more next episode and then we're also going to show hopefully the same one will also show some use for the vertex shader going to be again relatively simple examples hopefully just enough to get you started one of the other things you can do is okay maybe not with a full-screen shader but you could take into account distance from the screen and apply more or less wobble that way I think for that you'd really want an object that exists in your scene and uses something called grab paths Google that grab paths we don't have to use grab paths for full screen effect because the current screen render is set to main text but if we weren't doing a full screen effect imagine that you had a say a fish tank in the room and you want the sort of wobble for anything that's behind the fish tank you want to end up kind of wobbly like this but it's obviously not a full screen effect it's just happening to things behind the fish tank well the fish tank would have a material a shader that would have this logic but instead of having using main text because prior you can assume our main texture is just the whole screen instead you do something called grab pass what we do is would render everything behind the fish tank first save that an image called grab texture and then feed that to the fish tank as this grab texture parameter that you could then use to you know add this sort of distorted image on top of your your fish tank panel that would distort everything directly behind the fish tank and then you would just go on your merry way doing extra stuff so I know few things to Google again next episode we're going to come back we're going to do a little bit more with fragment shaders and we're going to use these cool noise textures to think I think a really funky cool effect thanks for watching folks and I'll see you next time you

Channel: quill18creates

Views: 235,299

Keywords: Unity (game Engine), Game Engine (Software Genre), programming, tutorial, first, person, shooter, first person shooter, fps, howto, how to, beginner, guide, unity, unity 3d, unity 4, physics, blender, 2d, 3d, quill18, quill, multiplayer, shaders, shader, distort, distortion, glass, text, vert, vertex, frag, fragment, surf, surface

Id: C0uJ4sZelio

Length: 41min 30sec (2490 seconds)

Published: Mon Apr 18 2016

Reddit Comments

[u/Rotorist]

been looking for something like this for ages!!

[u/databyss]

After watching these, I finally feel like I understand the idea of how shaders work a little bit. That's saying quite a lot.

[u/kd7uiy]

This is a fantastic introduction to Shaders, I highly recommend it!

[u/[deleted]]

It's kinda confusing that he keeps doing/saying things like "Don't do this, but I'm going to show it to you for seven minutes anyway". Then throws in comments about how things may go if you did it the bad way.

I dunno. Maybe just talk about how to use shaders rather than every way not to use them. Or maybe talk about shaders and then go into the bad ways. Not start with them.

[u/thecolonygame]

Nice, just finished the first video. I've seen quill18's stuff before, very thorough and enjoyable to watch. Thanks for sharing.

[u/[deleted]]

Thanks so, so, so much! You are an amazing teacher. I watched all three videos and I think... I might actually sort of understand shaders!

I made something. I think I'm having flashbacks...

http://i.imgur.com/fxJAxhp.gifv

(I made the gif by cropping a video I recorded with OBS, then I followed this tutorial: http://imgur.com/gallery/r5qmc, then imgur did the webm conversion for me)

My next goal is to somehow create a ripple effect when you click/touch the screen, as if you're touching the surface of a pool of water. Any tips?

[u/vit_soft]

We Need more of these videos! Thanks!

[u/[deleted]]

[deleted]

What is this?