Unity Shader Coding for Noobs!

hey welcome to the art of code my name is Martin and in this video we'll go over the basics of shader programming in unity so I have my test scene over here where I just put in a plane and a cube and the plane has a material over here plane and the material has the standard shader that comes with the unity 5 so ever since unity 5 they came up with a shader that has many different options for many different effects and for most intents and purposes it really is the best shader to use so for most intensive purposes I recommend sticking with that but if you want to make some special effect or something weird that you can't do with the standard shader or if you're just curious you can also make your own shader so let's do that so what I'm gonna do here and my assets folder is I'm going to right click and I'm going to create a shader so now there's a bunch of different options you can pick here for now we're just gonna stick with the first one standard server shader we call it standard and let's open this up alright so now let's have a look at the shader code and by the way let me just add it over here so actually over here this is the name of the shader and then this is where it will appear inside of this shader drop down menu here so I go to custom and I'm standard so if you wanted to change this let's say you're making a game you could you could have it for instance like this or if you have many many shaders you could even add sub categories in here so I could say okay my game floors a standard and not if I save this now over here my shader appears under my game floors standard great alright so now the first thing to look at here is this properties block so it says properties here and then there is a block between the curly braces over here and what this is this is all of the parameters that are exposed inside of the unity inspector window so over here is this color main text glossiness metallic and we have the same thing over here so color well and it doesn't say main text here because this is actually the label right so the way it goes is this is the variable name that we're that we can use down here and then this is the the label that we can change right do whatever and if we change that then over here it will change to whatever and then we have our data type that tells unity what's what to make over here whether it's a color or a texture or just a number and then we have the default value so let me just take this out so for a texture the like you type 2d over here and then this is the default value so if I would take this texture out then my plane goes white because it says white over here you could change that you could say gray as well or you could make it black as well for different effects you you perhaps want to put a different default value although if you always put a texture than the default value doesn't really matter and then we have glossiness and metallic here and those are those are things that we need for our standard shader so if we change these values over here then you can see that the service gets more glossy and basically over here we're telling we're telling you need okay create a slider that goes from zero to one and have a default value of 0.5 pretty straightforward stuff here now let's look inside of here so inside of the sub shader block first we have some stuff that tells unity when to render the object in relation to other objects and and how to render it it's not really important right now let's just skip over it and let's get to the actual shader program which is between cg program and cg and again there's a bunch of stuff here that tells unity to use to use a template off of the standard shader so what we made is a shader that is that derives from the standard shader and that has an advantage that all of the stuff like glossiness and normal mapping and all of that stuff or shadows right the fact that that this can receive a shadow all of that stuff is built into the standard shader and so what this does is it tells you you need okay use a standard shader template for this and then let me just move this around move that over here then over here we have the all of our variables that we defined over here they also have to be defined inside of our cg program and perhaps it's a little bit confusing but the the keywords that you use to tell to tell unity what type of data type you have are different so over here it says 2d but over here doesn't say sampler 2d and the same thing over here it says range which is basically a number and then over here it says half and so half there's a few there's a few ways to define a number inside of a shader program you could use it with the half keyword or with the float keyword or with the fixed keyword and even with the int keyword as well though int will will not get you a real number it can just get you a natural number so it can only do one two three four five but it cannot do 3.5 or something like that and then these keywords are all used for numbers that that can have decimals and for now it's not really important to know all the difference it is just a difference in resolution and how the number is stored and then over here so here it says fixed okay great but then it has the number four after it and that is just to indicate that it's actually four numbers so this is actually a vector of four numbers in this case a red a green a blue and an alpha value which is how colors are typically stored and then the next thing here is we have a struct that is called input and that can have a bunch of stuff in it in this case it only has one stuff in it one thing in it structs are used to package stuff together so that we can easily push a whole bunch of stuff into this function here so if there's only one thing then you wouldn't really need a struct but but we can add stuff to this and then it becomes easier to use this so now let's just get over here and so this is kind of the meat of the surface shader and what the shader does is basically a little program that runs for every pixel on the screen and and its job is to fill again for every pixel on the screen to fill these values to fill albedo metallic smooth as an alpha and you can also fill the other things if you want some normal map height map occlusion and whatnot so that is the whole job of a of a shader basically and and we can arrive or weaken we can fill these values programmatically so we can we can kind of screw around with these values so basically this is the simplest or one of the simplest shaders you can have so basically what it does here is it reads a pixel from a texture and then it takes that that pixel value and it applies it to D beedo of the material and the albedo is just basically the color so let's let's make a simpler shader here so instead of having something that takes a value out of a texture we can also just make a constant color and so I do that by saying float right float is one of these ways to define a number and on three because I'm gonna make a vector of three numbers in this case just a red egg really agreeing and the blue and I'm just gonna define a constant color so I could define red for instance like this one comes zero comma zero and that will make a red scream plane I could also make a green like that okay and blue would be the last one and I can also mix these so I can say okay give me full red and full green to make yellow for instance alright so so that's how these colors work and now oftentimes you see stuff like multiplying colors so I'd like for instance over here we're getting a color out of a texture and then we're multiplying that by this color property and how does that work well here we can do the same thing we can multiply a color by another color so this is yellow let's say if I multiply yellow by red then I just get red and the reason why is because the way this works is that each individual component gets multiplied for the new color so the new color is gonna be one times one for the red one times zero for the green and zero times zero for the blue which is exactly one zero zero so that's why this turns red similarly if we if we want to add two colors the way it works is that it adds the individual components so if I wanted to make white I could say okay that's yellow + blue so a white plane all right so that's how how the simple operations work on colors so now let's see what kind of stuff we could do with that so well one very simple thing is like if if I have my color see here I could say I could invert my colors by saying 1 minus C right because because my my in my C value I have an r g and b dat all are between 0 & 1 and by the way maybe I should I should put that over here just that colors are between 0 1 so in other in other places they're they're between 0 and 255 for instance but inside of shaders are always between 0 & 1 so if I do 1 minus C that's basically inverting the color so now I have an inverted color another thing I could do is I could just take one of the of the channels one of the color channels and say ok we'll take this as the color so if I take one of them I get a black and white image and the reason why is because inside of hlsl which is what this language is called inside of the cg program it's called HLSL that has a rule that if you supply one number to something that needs three numbers it's just basically the same as doing this come on don't be so and if you have a caller for which the RG and the B are all the same you get black and white all right so that's one way of of getting black and white colors a better way my opinion would be to take the average of all the three colour channels so we could do the red Channel the green Channel plus the blue Channel and then divide that by three to get the average and that will just give a different look to D to the black and white image all right what else can we do what we could say for instance let's do a mix between the black and white color and the normal colored version okay so whenever you want to do a mix you use a lip functional herb stands for linear interpolation and what that does is it it's a function that can interpolate between two funk so between two values based on a third value so this is my black and white value this is my original color value and then I'm gonna say mix these together with a certain parameter and this howdahs parameter works is that if this parameter is zero it will return the first value if it is one it will return the second value and if it's anywhere in between it will return anywhere in between mixed aren't those two values mixed so one cool thing to do would be to expose this as a as a as a variable to the user and one thing I maybe didn't say before is that like add there is a naming convention that every time you expose something in the properties you start that variable name with an underscore and then a capital so that's why this is underscore capital saturation so let me just take that copy it and now I have to also define it over here right so now I you don't have to put this on its own line you can just if it's the same data type you can just do comma and then enter it over there and now I can go over here and copy that and I'll say saturation call this saturation as well and then let's see what that does okay so now that such it's more saturated now and you see that if I slide if I use my slider I can go from black and white to colored so now you can see that like shaders can be handy for stuff and I don't have to clamp this between zero and one I can I can make this range higher and now I can increase my saturation okay and now let's see what else we can do so so this this function over here takes as an input of texture right the main text which is this main text which is that texture and then it takes a UV coordinates and let's just have a look at that UV coordinate so let me just cut that out and make it over here blow to UV equals this so this doesn't change anything because I'm just applying it to UV here and I'm still using the same UV over here so that doesn't change anything but now let's just look at what that DV coordinate actually is so let me just look at the X component over here of my UV coordinate and see so now I get something that is black on one side and white on the other side or in other words it is zero on one side and it is one on the other side okay I can also look at my Y component and then you see it's the same thing but in a different direction so what these two values we can tell this text 2d function exactly which pixel to fetch from the texture all right great so let's put this back actually no let's put it over here and let's make this a little bit more interesting so let me take this out over here and make another variable called saturation but without an underscore I'm going to make capital so saturation equals and I could say now for instance I could make something I could just take my UV coordinate for my saturation so now I have a texture that is not saturated over here in other words it's black and white and then it goes to fully saturated over here and if I want to maybe control that I could multiply this whole thing by my value saturation value and now I have something where I can turn on and off that gradient okay so another thing that we could do is we could say ok let's take D the sign of UV done X okay and if I just do that then you will not see something very exciting because my my you V dot X only goes from 0 to 1 and over that interval the sign doesn't do much so if I really quickly have a look at what a sine wave looks like so if I just do the sine of X then on the interval of 0 to 1 my sine wave only goes up basically and what I want is I wanted to go up down up down so I have to multiply that value by some larger value to get more of this I have this sine wave and a sine wave as a fool makes a full revolution over 2 pi distance so and that's like approximation 6.28 or something like that so if I multiply this by 6 point 2 8 3 1 then you can see that now it starts at 0 saturation and it goes to full saturation and it goes back to zero saturation and then goes to negative saturation so if we don't want negative saturation then then because this goes to minus 1 over here right so if we don't want it to be negative then we can just go make it x 0.5 to make it less high and then a 2.5 to push everything up and now it goes between 1 and 0 so if we do that so if i do x 0.5 plus 0.5 and save that so now you can see it like it starts at 50 percent saturation goes to 100 then goes to zero and then goes back to 50 and you can obviously play around with all of this what else can we do well we could say D we could use the UV coordinate that we used to read a pixel form of texture we could kind of screw screw around with that UV coordinate before we read from the texture so what we could do is we could say UV dot y + equals the sine of u v dot x times 2 pi let's say so to aid 3-1 and then I want to attenuate did affect my well actually let's have a look at what this looks like okay so that distorts my texture along the sine wave and if this is too much then we could just multiply this by some smaller value smaller than 1 okay so and that will make a smaller distortion now if I wanted to animate this I could use this variable here that unity gives to us underscore time an underscore time is a vector it has four components and each component the time goes a little bit faster a little bit slower I like to use the Y component which is the the component that changes it by one each second and so let's see what that does if I save this now basically this is the time elapsed since you pressed play so this will not change anything because I'm not I didn't press play but if I press play then you will see that now I have a nice wavy brick pattern alright awesome so so that is in a nutshell the surface shader okay so the service shader has the advantage again that it that like it has already built in specular highlights it has built in the fact that it can get a shadow that it can even like receive light from from a nearby light source and so on and so forth but sometimes you want more control and you want to go lower level than this so let's do that so let's go over here and make a differentiator so I can go here go create and then shader and I'm gonna make an unlit shader alright to call this unlit and now let's look at that one and the first thing we're gonna do is I'm going to change this on my game slash floors slash unlit save it over here let's change my texture annual art shader and you will notice that the shadow for instance will disappear so if I go over here and I go my game floors unlit so now I have a very simple look so this is exactly what it says on the box it's an unlit shaders meaning that that like no no lights influence that whatsoever of course we can make it that lights influenced it but we have to make it ourselves so now let's let's have a look at how this shader works so again we have our properties block at the top we have our substrate block we have our tags over here we have our cg program now our pragmas are a little bit different because we're not deriving from the standard shader that's one thing and then we have a bunch of extra stuff here also the whole thing is a little bit longer than the other one so now the surface shader like the meat of the surface shader happens in this avoid surf and and and the the job of this function is to fill the these output parameters now in the unlit shader we have two functions we have one function over here that is the vertex shader which is a little program that gets called for every vertex on this plane so let me actually go over here and set that the shaded wireframe so you can see that there is a bunch of vertices inside of here and then we have the pixel shader over here and the job of the vertex shader is it well it gets called on every vertex and the job of the vertex shader is to well the main job is to convert the the position of the vertex that is in 3d space to convert that to a a 2d space that is in screen coordinates so that so that the pixel can be drawn so that's what happens happening on the first line over here so on the first line we're taking the 3d vertex position and then unity has a function that does the conversion for us and then it will return a flattened coordinate screen coordinate that the pixel shader can use so that's so that's the main purpose of a vertex shader and the other purpose is to pass along values so in this case it's passing along the UV coordinate over here and we can actually make this simpler than this we can even do V dot UE just like that that will not change anything or change the tiny a little bit because because of this so unity has in in in there in the inspector for materials wherever you have a texture it also has this tiling and offset control over here which in this case it doesn't do anything because I'm not transforming the UV coordinate properly over here so if you're not using this then you don't have to use this transform but let me just put it back and then you'll see that this can move now alright so what can we do with the vertex shader well well most of the time I don't really use vertex shaders but what you could do for instance you could let's say V dot vertex dot Y just e up down we could say okay well add to that the sign of the vertex dot dot X let's say let's see what that does and now you see we have deformed our surface along a sine wave okay so if I if I attenuate this a little bit and I do the same trick as I did before with adding the time value then you could see that for instance if you well let me make it a bit larger than this you could see that like this you could make a flag or you could make rolling waves or you could make a splash in the water or God knows a lot so yeah so for that it could be it could be handy so that's the vertex shader and then over here we have the pixel shader or sometimes it's also called a fragment shader that's why it's called frag over here and what the Java the fragment shader is is to just return a color so again we can we can just make it simple and say okay return a constant color something went wrong here okay so over here will tell me that I should return a float for instead of a float three because it also requires an alpha value so and then of course I need to say float four okay right so let me put this back here so let's just screw around with this a little bit to kind of see so you can kind of have an idea of what this does and we also have this this fog coordinate here which is a unity thing so that it can apply distance fog for instance if you go really far away it would and you have fog specified and then the fog would add on top of it but we don't need it so we could just get rid of it over here all right so let's let's just finish with something something maybe mildly interesting so we could say for instance let's look at our UV so I can do flow to UV equals UV minus 0.5 so if you remember the UV coordinate goes from 0 0 over here to 1 1 over there and so what I did over what I'm doing over here is just making it that the zero is in the middle instead of instead of in the lower left corner and then I can say okay give me the distance from the pixel we're rendering like again a pixel shader gets gets executed for each and every pixel right so so the pixel we're currently rendering we could say okay will give me the distance to the to the middle of the screen and you do it like that and let's see what that does so let me just return this okay so that gives me the distance to the middle of the plane right and and really close to the middle this appears black because my distance is very small and very small numbers are black or zero is black and then on the outside it goes not too wide because this distance isn't one it's less than one but some gray value and if this plane was bigger than you would see it would go to white so let's cut out a little disk let's smooth step let's say point 1 comma point 0 8 comma D if you don't know what I'm doing here with a smooth step not smoth step smooth step then check out this video over here and explains it in great detail so let me see here what this does okay so that makes me a little circle and now let's let's move that circle around so what we can do is I can have a circle position so let me add a position over here and I'm just gonna call this P and my P is gonna be variable that is consists of the sign of a compounded cosine of a and now I have to make another variable called a for angle and then I could use time time why for instance and now I have to make this a little bit smaller or why she won't be able to see you so let's see what this does so that moved my dot and if you see now now I have a dot that circles around the center so I can play around with that and make it let's say a little bit smaller so it's 7 5 let's say or actually the image is 0 now well that's wrong it needed to be point two zero seven alright so not have a small dot and now what can I do with this small dot well I could for instance make a distortion out of this so let me just do this I call it this thou'rt distort put that over there alright so this shouldn't change anything should still be the same and now but now I can use that that value here to offset UV coordinate that I'm gonna use to read a pixel from a texture so so again so I just have my on unscathed UV coordinate over here so I just see my my brick texture but if I screw around with this UV coordinate then I could introduce some sort of distortion right so what I could do is well let me just look at the distortion again or what I'm gonna build so let me just stop this here if I do M times distort let's say this works now it needs to be booked for this so M times distort dot X comma M times just stored distort dot y come out of 0 comma 0 you see what that gives me that gives me something invisible because I have to probably make this value larger so this store it's x equals 10 we see ok so I'm starting to see something here x equals 20 okay and now so now I have my distort value there so just go over here let's say distort equals equals distort times 20 times my mask m and now I take this back over here call that call and now I can I can use this distort this distortion to add it to my UV coordinate and that's gonna that's gonna not affect anywhere this is black it's not gonna affect it because I'm just gonna add 0 to it but where this is not black it's gonna add something to it so it's gonna distort UV over there so if now I do Plus this tort over here now you can see that that I have a little bubble that's moving around on my surface and if this is too much I can make it less Distortion okay so you could see you could make a drop effect like this or you could make a force field distortion or each distortion or god knows what all right so that was really quickly a introduction to shader programming inside of unity stick around for the next video we'll make something cool I'll promise

Channel: The Art of Code

Views: 51,981

Keywords: shader, shader programming, shader coding, unity shader coding, unity tutorial, tutorial, unity, beginner, noob, dummy, shaders for dummies, shader coding 101, shaders for noobs, shaders, glsl

Id: JfC_ye23MvY

Length: 35min 36sec (2136 seconds)

Published: Sat Jan 20 2018

Reddit Comments

[u/fallingfruit]

This is really great. I was having trouble finding up to date guides on the surface shaders. I especially liked how you showed the wave of the sin graph to explain what you were doing!

One thing I have been trying to understand is how to make a transparent "distortion" shader with a surface shader. Basically, instead of messing with the texture pixels, I want to mess with the pixels that are visible through the texture. Something like imperfect glass that would distort what you see on the other side.

How would you do something like this?

[u/humpax]

Looks nice, the ones I've stumbled upon only went through unlit shaders.

[u/NullxPhantom]

Owh wow, I'm very impressed by how comfortable you are explaining this. I think you didn't even edit at all? Please make more videos on shaders the unity community needs people like you which are actually knowledgeable and explain in depth. Looking forward to more videos.

[u/aliensoulR]

New Shader Graph tool for artists which is coming out in unity 2018 would be good for begginers where like main focus wont be on writing shaders than just using the tool for purpose? Great tutorial by the way.

[u/thebspin]

Nice tutorial, some parts actually made sense so I atleast understand it more now (and hopefully other shader progs also make more sense to me now)

[u/Tylerlikestorock]

RemindMe! 1 day

[u/Gaikoz]

Saved! Please keep doing more of this!!!!

[u/darknessflame101]

Very nice man, i've checked out the first couple minutes and this looks real good. Will check out the rest when i get home

[u/gordorodo]

Awesome!

RemindMe! 1 day