Unity 5 - Introduction to Shaders - Tutorial][C#]

hey guys welcome to a new tutorial in next episode we're going to be writing and reading shaders so we can give our game a little bit more so some kind of post effect some kind of outline you bend the world all that kind of stuff can be done with traders and we are going to start right away today by not writing anything actually today we're going to be looking at a standard shader so when you create one they have some values in there by default we're going to go ahead read it and try to understand it as best as we can and this ability is actually really really crucial because you need to understand what we're doing if you want to like follow along with next examples so I'm just going to put that on pause really quickly I am I am in my scene right here I basically just have this mesh right here which is my debug platform not really going to be any useful today and also the water just to give it some cool look I don't know let's go ahead and right-click in our project folder create and the shader going to be starting to write today is a unlit shader throughout the next two episode we're going to be covering the surface shader the unlit shader and also the image effect which is involving and pretty much the same thing as beyond the shader so today let's have a look at the unlit shader I'm going to create it real quick and I'm just going to call it test for now and let's open it up and we're going to have a look at it right now in the game by changing the first line actually so if you scroll at the very top right here the first line is actually telling you this is where it's going to put your shader in so if you have a quick look save in unity I'm going to create a new material for disk so create material I'm also going to call it test doesn't matter if it has the same name there's no naming convention here so let's have a look down here we have the standard shader at the very top product if we click on it we should see our shader on there unlit and best here it is so you pretty much understood that this actually defines a directory and then the file name so if we go ahead and just go ahead and create our own directory so say m3k and this is going to be test you're going to realize that our shader has changed folder right now he's under n3k and then fest and we also have a preview if we just pull this right here you can also have your preview of your shader right now it is a standard unlit I think it actually supports the texture yep it does and it's not applied to any object in the scene so we might actually want to put it on the object so I go ahead create a new game object cube and I'll just move it up say right here now when I click on it you can tell that by default it has default material in unity now we don't want this we want to have our all material that uses our own shader so we're going to drag and drop tests on top of it right here now this object right here is actually being rendered using the instruction in this file if we go ahead and we just we just turn out the lighting you're going to tell that this one is not being affected because by default the actual shader we created while these default values they don't use lighting and that is why it was on the trader at first so so this is simply to prove that they have different instructions now let's go back in the actual shader let's have a look at the properties tab at the top so properties are pretty much the input you have on on the actual shader itself these are going to be defined in the material let's give it a look right here there is multiple type of properties we can send to our shader such as you can tell right here this is a texture we can have another one so you can say secondary texture there again there is no naming convention but usually when you have a main texture unity likes to call it main text like this and then you could say this is a second texture you're also going to realize that when you write shaders you don't have intellisense so make sure you don't have any mistakes in everything you write basically also right here is a default value I think I could put down on black and have a default value of black right here if we go back on the material and here it is so the full value like didn't work but as you can tell we've got our second texture right here now we could go on it and actually put anything really but you're going to realize that it doesn't do anything to do cube it doesn't do anything because we never actually asked our shader to do something with it so it's pointless for us to have a second texture right now but this is just to show you that you can actually send input to your shader using properties now there is other kinds of properties you can use such as I'm going to go with colors so color tints maybe you see that quite often you always give it a name first so that's the name while not actually the name is right here and here is like a definition for the inspector so you saw like this is the second texture you saw it right here and then afterward you declare the type of this so in this case this is going to be a color and you have default parameters you can put stuff in color is like this I'm not sure hopefully it is and yeah here it is so tint is white so 1 1 1 1 now if we go here and say 0.5 it should also change and attend if we hit the reset of course and here we go so 1 0 5 1 1 is actually a nice-looking thing let's put back a texture on this and as you can tell even though we have different it again we're never actually using the 10th in our shader so it doesn't care we're just adding you could call them field we're just adding variables to this there is other kind you can also use such as a vector 3 position so you just say what I like to use is character position of course the naming doesn't really matter you can name it whatever you want but you can also send in a vector now by default this is a vector 4 and I believe we got it right here so characters position X Y Z and W again this is something I could be changing from not script or manually writing here and even though I change it here no visual has been affected on this because of course we are not using it in the shader so I think you get the the idea of this there's also other type that I won't go into like much detail here there is the float and there is also the cube map or it's actually only called cube in caps so those are some of the types you can actually be using to control your effect from outside right now the only one we need for a standard unlit is a main texture this is where things get a little bit more complicated this is where we actually start creating passes and we're going to talk a lot about passes in the future but right now we only have a single pass in the shader and we have to cover all of it but right before we jump into the actual pass I'd like to have a look at these two instruction at the top right here so tags is basically just a dictionary that you can set some values so these one are something you have to google you can't really know like what kind of parameters you can change without really googling render type is actually telling you in which order this shader is going to be rendered basically so if you have something that has some transparency to it you have to put it at the end of the render queue so it's going to render once everything else is done basically you can have a look at the list right here so I'll pack is one we're using I think that's also the first one then transparent transfer cut out okay no it's not it's not actually in order but you would actually pick the one that actually fits what you need so overlay I guess would be the last one I'll pack has to be in the beginning I'm really not quite sure to be honest um but usually when I have something transparent I just put it on transparent and when I have something that is so back put it on Oh back if I do UI I put it on overlay this one could also be cool but I've never really did skybox trader anyway so this is what the tags are foreigners other tags as well such as preview type I think you can actually change the preview type from a sphere to a cube which could be fun next one is LOD so after 800 I think that's meters it should actually not render your path but I've never had a problem before or I've never really dealt with that before because it's always being rendered even though I go super far so I'm not quite sure what LOD well I mean I know what LOD is for is just I really can't get it to work on my shader so that I'm actually going to abstain saying anything else about it right now but LOD stands for level of detail and then you put your number by default everything is always on the hundred my thing and the biggest one goes to 250 and now we finally get into the bus so the path is really interesting actually whenever you're in the past you always have to be putting everything you do right here it's always in CG program language so you have to put it in between the CG program any and CG that is really important for everything else to work and it this is also going to cause us a mess when we try to debug because that's that CG language is not really easy to debug especially in unity so let's have a look right here at what we have because this is where it gets super fun and also super complicated the first thing I'll do is I'll get rid of this because this is not there by default and it's actually going to put us like it's actually going to make things a lot more complex to understand at first so I'm going to remove the fix to get the fog working and then afterward we're going to be looking at these two right here pragma vertex advert and also Bragg map fragment frag so what these are you could say that these are some kind of functions basically and if we just have a look down here you're going to see them right here there is a vert and there is also a frag so these names are connected if you were to change this for verge trader you also have to change it down there same thing goes for frag now the name in front of it cannot change so if you do a pragmatics it has to say vertex and this one has to say fragment those are like defined keywords okay so this function right here is going to be the one taking care of all the Tech's now this function right here frag is the one that is actually going to take care of all the fragment and if we do like a quick difference on these two like what are the vertex and what are the fragments so what what are these for basically to explain quickly vertex is for all vertex on your objects but exactly what does that mean that means that currently what we have on the screen is a a cube basically and that tube has a total of one two three four five six seven and eight vertex now by vertex I mean these things right here so the the not sure how to say that in English I guess I'll just call it vertex so the one on the edges here they're not the edges they're the one that actually finishes the edges so these eight points that makes up our cube are actually going to go through this function one by one and this is really what is interesting to know is to know that this is going to be called eight times every single frame for a cube let's also specify that this is 4 cube because if you're going through say a character that has 7,000 vertex which is really possible nowadays then this function is actually being called 7,000 times did I say 700 7,000 let's say 7,000 right well this function is going to be called 7,000 times every single frame and how is that even possible it's possible because this is running on the GPU and not our CPU so it's running on the graphic card it's not running on our processing unit so graphic card is optimized for that kind of operation it's made for this kind of operation so it's really fast and it's not really that expensive now if we have a look down here whatever fragments people actually don't call it fragment so much we like to call it pixel shader so we might as well just call it pixel but let's leave it on frag because that's the keyword they use and you know you cannot change fragments from here you cannot say pixel that's not going to work so as far as the fragment goes and it's for every single pixel in your screen that is going to be rendered so let's say that we're actually putting our camera right here right there so our cube is actually taking our whole screen as you can tell not anymore nowadays so well technically it's almost okay right here so we have our all terrain covered by the cube right now let's just assume that our screen is 1920 by 1080 which is a normal resolution then this pixel shader this fragment is going to be called that amount so we're looking at this number 2 million times every frame because it has to actually live every single pixel one by one so it doesn't matter if it's our cube it doesn't matter if it's our whole screen in the end this pixel shader is going to be called 2 million times on pretty much every frame so again this sounds really expensive but it's not since we're on the GPU and it's actually optimized for that now what kind of operation can we do on this like what can we actually do with these and what can we actually do with that if we have a quick look and I've no ice cube this pot right here but if we have a quick look at what this does on the vertex so we saw the vertex shader which is to position the vertex in the 3d world at the right place and we saw the pixel shader which is to light the pixel and actually give the proper color now I didn't really give any example with this one the vertex shader could be used for deforming the mesh so if you have a look say at this ocean in background this ocean is actually just a plane it's a regular plane and it's super flat but as you can tell it actually goes up and down and this is done with the GPU as you can tell even if I click on it I can't click on it because this is actually not where it's positioned in the data of Indies actually it's not supposed to be here basically but what the GPU does is actually it takes that vertex it does some calculation and then it plumps it up in the world this is done via the GPU and unity doesn't know about this basically there is some shaders online to actually add snow on top of elements so say this object right here we could put snow on top so you would actually bump every single little little edge here it would bump it up and add the white color to it there is a bunch of thing you can do with the vertex shader basically so like I said earlier let's actually assume that this is a function now this function has a parameter right here this parameter is called app data and this other function the pixel shader has another parameter called b2f now these are actually defined right here so you can say a D structure are actually the input for the vertex shader and the input for the fragment shader or pixel shader now if we have a look at the app data at the top we have a float four which is the equivalent of a vector four basically so we have the X Y Z and W not the W we don't use so much for a position but this is actually going to store the position of the vertex in the 3d world now we also have the UV because every single vertex has some UV information to actually map some texture to it this is done in your 3d software whatever it is this is actually where you define the UV for that vertex so if you do any UV unwrapping you know what this is about now if we have any look down here at V to F which basically stands for vert to fragment because once you're actually done running this part it actually returns the virtual fragment and it sends it over to this guy so the data that is actually sent to our pixel shader comes from our vertex so if you haven't figured out already this is always run first and then once this is done running it actually takes the return so this return right here which is VB to F and it sends it over to the pixel shader for a lighting purpose and inside of it you can have as many fields as you want and that's also true for the updated year didn't have as many feel as you want you can create another flow call it intensity and you don't need to put any param right here I'll talk more about these in a second but you can put anything you want in here and then say B to F or actually Oh dot intensity is equal five you can set it right here and then what is actually done calculating anything it has to calculate this is sent over to the pixel shader and you can reuse that data using the parameter right here this case I about intensity so this would be equal to five all right so let's assume that these right here this is the the input for the vertex shader and this is the input for the pixel shader now we know what actually is inside of here because we define it we define it as much as we want in the vertex shader so we say oh UV is equal to this we know what's inside of this we do all that vertex is equal to this so we know what's going to be inside of vertex when we send it over to that guy however in the vertex shader we don't really know what is inside of vertex and this is where D cementec does actual double death right here and then position comes in because these are actually defined for us so when we say to dot position we know this is actually going to store the position of that very vertex in 3d world now here is a list of semantics i've pulled from wiki if we just have a look real quick we have the vertex position so this one we're already using is a float for so like a vector for again we have the normal this is really useful if you want to know in which direction your your actual vertex is pointing so let's add this to ours float three normal you can give it any name you want such as normal day it doesn't really matter what really matters is what is on the other side of the two dots and this case is semantic now having this done we know that normal is going to be equal to their normals vertex I'm currently on the wiki unity3d by the way if you just want to have this list now there is also the UV texture coordinate this is defined in your 3d to where it also supports another set of coordinates so you can be putting texts scored one which is your second set of coordinate this is also something you support via the xxx software well not three is software 3d software I'm using 3ds max and I can actually do that you can have the tangent and also the color something people don't really realize when they start making games is well actually 3d model is that your 3d model they have vertex color and this is so very useful for so many reasons now this one we're going to be using it quite a lot later on to create some nice blending effects so say you want to create some kind of custom parent editor and you want to be blending up two three four five different texture together you would be able to do that using the vertex color unfortunately there is no real way right now for me to show you what's on top of this because I don't have any 3d model with a vertex color on it but we're going to have some eventually in the next few episodes let's keep actually looking at this real quickly we covered pretty much everything but this line right here using unity CG CG Inc and also these two right there so if we just wrap this up include unity CG CG Inc is actually going to give us some nice method that is going to pre-compute themself actually give us some like easy way to transfer our 3d coordinate say screen coordinates and other stuff that unity gives us to make our life easier basically so basically this doesn't really have to be here but we're going to be using it a lot in the future now right here these are something want to be keeping this is actually a reflection of your properties now about these two line right here this one I got rid of it earlier I don't actually need it so that's my bad but what usually happens when you're done declaring your your structure of Tiye is that you need to replicate what's inside of your properties whatever you're going to be using in your past like right here you have to replicate it down here you have to declare it inside of your paths as well now this 2d texture is actually a simpler 2d if we have the colors such as a thin like we had earlier let's put that on say 1 1 1 1 the reason there is 4 is because we also cover the Alpha right here then if we want to be using this stamp later on we have to declare it down there by saying color then now I believe that this takes a capital does it all my bad this is actually this is actually called a float for so this is the e vector for you might have a lot of problem when you make this share to work you don't have to do a lot of googling because you don't really have any way to debug and you know that's going to be annoying but in the end we should get something a little bit better so invalid subscript intensity I've just lead it intensity let's get rid of it now do we have something that compiles and I'm still compiling right now we still don't have anything that compiles so it says we don't have main tax FC so SC what does SC stand for so we had something right here a float for main text underscore ST I'm just trying to remember what the SD stands for because you can actually add stuff next to a texture so we have like underscore SD which stands for something that I'm going to Google right now a lot of magic happens in the shader you just have to google it all the time so real quick if we have a look so recording to a unity graphic engineer on the the SD suffix is actually some more information about texture that it contains the texture scale and also the translation elf set so now we have this we can actually have a look at our shader and that's actually it so I know this is a little bit complicated to understand I know that there is a lot of things that are kind of magic such as this texture we just learned about but eventually is going to get a little bit better as we do more and more and you're going to see that we always do the same stuff basically and feel free to look at other people shader feel free to actually start trying to understand them and once you do you're going to be able to make your own basically in the next episode we're going to go ahead and start making our oan right now we're just looking at the syntax real quick and that is pretty much it hope you guys enjoy hope you understood something and if you didn't stick around for a few episode get some practice in as we do it I'll try to explain the actual logic behind the mathematics we're going to be using we're going to be trying to wrap the world around some kind of toilet paper so we can we can have this subway server feel where the planet always rotates we can also do other things such as adding glow adding outline deforming our mesh adding some kind of shockwave a bunch of things stay tuned guys thank you so much for watching and I will see you in the next one

Channel: N3K EN

Views: 42,840

Keywords: unity tutorial, unity, unity 5, unity 3d, 3d unity, unity 5 tutorial, unity mobile game tutorial, unity android, N3K, N3K EN, N3K tutorial, Shader, shader tutorial, c# shader, unity shader, shaderlab, unity shader tutorial, unity 5 shader, unity 5 shader tutorial, writting shader, shader in c#, hlsl tutorial, cg program, math, vert, frag, vertex shader, pixel shader, fragment shader, fragment, v2f, appdata, unity 2018 shader, unity 2018 shader tutorial, unity 2018

Id: zKWQn2Ppk74

Length: 25min 4sec (1504 seconds)

Published: Wed May 24 2017