Writing Shaders In Unity - Smooth Overlay Textures - Beginner Tutorial

okay so hello and welcome back to another unit each shade of coding tutorial and this one we're gonna be making a mosque shader now this isn't just limited to being a mosh Eider you could use it for snow you could use it for any texture that's covering another texture and the shader lets you tweak settings to make it better for you now for this I'm gonna be using two textures I got on line one just I know the different sizes it's not ideal but they all still work I've got a rock kinda texture and a moss texture just get whatever you want get like a main texture for the object and then another one which kind of overlaps it and let's get into it I've already made this shader thing here it's ready it's empty let's get into it so first of all we're going to say you know as usual shader will say crust I'll just call it coverage because to be honest all it is is it's gonna be like covering something so here's what we start and we'll say properties and we'll say we want the main texture so main text and we'll call it yeah main texture for this and it's a 2d 2d is the type for a texture and by default you can set it to white and then we need a Nova texture so this can be like overlay text and we'll say overlay texture it's another 2d cuz it's an image it's a texture and then this can be I'll just leave it as it is boy go something like so then we want to take in a direction which is gonna be a vector for or well vector free sorry an X Y Zed which basically lets us choose what like part of its covered so maybe you want it just top down but you might also want to rotate it so it comes from a particular angle so we can say what direction it's easier and then we'll just say you know coverage direction and that's a vector and then if we put is equal to now this is where you would put your X Y Zed so basically if I put zero zero zero there would be no effect at all because it wouldn't come from anywhere if I put one on the X so it means it would come from the side Zed it would come from back and then one on the Y it would come from the top now we want it to come from the top so I'm gonna put one there you can change that obviously that's just a default value and we also need a basically like how much of it is covered kinda like you know intensity I'll call it intensity and with this it's only gonna ever ago between zero and one you know zero being zero percent and one being a hundred percent so we'll make a slider so if we put range if it comes a slider between zero and one and by default we'll set equal to one because that doesn't mean it's fully covered that means the if anything it means it's half covered you'll see why in a second alright this is where we start right in the shader if I'm correct and we go back in it won't even render anything like if I put this tutorial free shader on - yeah because we haven't actually written any shady yet so I don't think we can even you can put in the things there so put rock texture there moss texture on the overlay doesn't seem to want me let me do that well we'll we'll do that in a second we'll get the shade a bit written it'll probably work so far a substrate err and then this is where we start writing the shader code I don't know why there you go indentations in this Roy's wedding alright in our pass we only need one pass for this and we could put what kind of render type is but because it's by default it'll be opaque we might have to come back and put in by definitely will now this is where we start writing the actual codes the cg program is where we open it and then you remember if you put NC g is where it and closes it so this is where we start raining code so I don't know I mess around with spaces so what we use to do first is we need to do our pragmas which are basically the functions we're going to be running that it uses so we have a vertex function called vertex phone and then pragma we need a fragment old frag and the usual include we want to include the help full library by Nvidia I'm pretty sure is is what I've heard anyway cg i NC ok now we can start writing our code so the first thing we need to do is we need to write a structure for our V to F which is our vertex to fragment shader so if we put struct v2i this is I'm just doing that the same ways I used I did in my over video oh I hate this indentation alright so we need a float for position but paws is easier and that is getting the ESPY position this is just like last time but we're going to get to get some extras so we need float free normal I don't think I covered that last time and that's just normal like that assuming you know what normal is so let's say you've got your object and it's a I don't know one I'm gonna draw here well let's say it's a cube okay as you cube expert cue the normal of this pop face is upwards the normal at this face is outwards this one is towards us that one on the underside is downwards that's right you have one at the backs to the back basically the normal of a face so this is a face here that's the face here that's the face there the normal other face is the outwards direction of it if you weren't in blender you could view normals you know I might do this just to helpless people who might not have seen this before most you will have probably so let's say this is your shape here if you go on the side you can go down to here normals and you can enable the viewing of normals so if you look right here this is the vertice normals so here's our vertices on the edge and that's them pointing outwards so you can get data on the vector of that like how it's pointing outwards you can also do it for edges but unit you would never be able to see those because it's kind of along the edge then if you got on faces which is what we're doing there's a face there's the outwards direction you see what I did on the cube it's all the outwards directions if you had a more complicated mesh like if we had an eye Coast for something and we went to view the face normals there you go they're still it's just every face is outwards directions what normal is okay okay hope you understand that I'm going in-depth on these videos because even though my videos aren't necessarily beginner people won't they make sense to go in depth regardless you can always skip over if you really want to but it's better to help more people that may not know about this stuff though if you're doing shaders and you don't know what normals are you should probably go and do some research about that kind of thing though normals are quite easily to understand they're quite easy then we want to float to which is our texture coordinate now normally we would have one but we need two so this will be UV what did I call it UV main and that's text coordinate zero now that would be what we normally have if we had a texture on it but we actually also need a UV what I call it overlay which is our second one now to do that you to text chord one because it's zero than one because you know in anything encoding start from zero basically lists you know index whatever alright now we've made our stroke there for what data a the vertex fragment has we now need to bring in our like variables basically so we need a sampler 2d which is the way of basically having a texture in the CG code here and that's our main text you have to call this whatever we called up here then we need a float for main tax what's that sir so basically if you if we get the main text that is just our texture okay the ST is basically I'm pretty sure it's tons for scale and transform or translation in my translation yes because they old transforms and make sense so basically it's gonna be a you know it's not an RGBA but it's a float for value so it's a X Y Z W I think for the that data on the main texture and even though we haven't defined this up here we can still access it because we've got the main texture so that's just referring to the s T of the main texture the scale and translation correct me from runway I'm pretty sure it's scale and translation is what it stands for then we want to do this for the overlay text and then get the data on that now I've got all the data we need we can start writing functions and there isn't too much to write that was that all right so V to F function we called it vertex funk so this is the data type this is the name of the function which we called up there and we take in let me think all right so basically when we write our strokes we're choosing what data you know to get basically and normally we would have one call like app data now what you can actually do is you can do app data unfold which basically instead of having to define what we want we can just take it all in and we'll call it V for vertex V for to see whatever you want to you know you can call it what you want as long as you're consistent now we can have v2f Oh which is basically the variable we're going to be returning from this v2 our function because it needs to return and V to earth and oh it's just why weren't users basically Oh for output I don't know all right so the position of the vertice if you want to set the position diversity to where it is you don't if you don't want to change anything with it you said it equal to now there is an old way in a new way of doing this and I think it might let you might work if usually old way but watch this alright so if I do mall unity matrix MVP and then we take the V dot vertex if I then save this and go out what will happen is it'll probably well let's put that back to Syria can I selected the most action now yeah nice all right that's working at least if I go back to the code now yep ba ba ba telling me you should use this and at the top even gives you a note saying yeah we changed more unity mhm MVP to unity object clip position if you ever watch any other shade of the tutorials like I used to do you'll see that people do it the way I typed in but unity prefers you to use this way and pretty sure it's more efficient or something there's a reason why they want you to use it now it does the exact same thing it's basically saying the position is versus e is the position is versi or the position of o in this V to F here so this position here because oh it's o dot pause we're saying it equal to the vertexes position we're not doing anything with it basically be starting to write it like that then we're going to say oh dark and then we're changing the UV main equal to trent also transform underscore I can type sorry text and then that's a function where we pass in our our text coordinate for the main tax sure and then ODOT UV overlay equals trance or texture V dot text cord and then overlay text to call it that I called it overlay text this is referring to here and it main text there that should work if you ever worried about compile errors they won't tell you problems in here if you want to check you go back to here on your shader and I'll say so yeah it's not finished basically it's saying and that's true all right and then we want to say the normal because that's the only thing where I'm sick wait we've set the position normal sorry we've set the position here that UV main the overlay we need to do the normal so the normal is and then we need to get the object or world position so basically how the shade is gonna work is all right I think I might do a separate video on this there's different kinds of views and positions okay so you can get camera view perspective view world view world position I'm gonna probably say some of those that are wrong but there's different kinds and they all affect how certain shaders look and certain shaders need certain effects to make them look right I'm not gonna go into depth in this video for it but basically we're gonna take the object to world and then if we get the normal you keep in mind up here when we make the function we actually have access to the normal of the vertice so here we can actually get it to basically and then then we actually return it otherwise it won't work because this function has to return a v2f and we've got an O of type V to F so now our vertices work what we haven't got the fragment function yet so if we go to our shader where we go is another correction thing so it's saying I also shouldn't use a object to world I should use unity underscore object to world well I guess they just like themselves that much then okay so that's just their way of wanting you try it anyway doesn't matter it's gonna work anyway so now we've made our vertex function we need to make a fragment function now for this this is how it renders pixels we've basically got the mesh here and sort it all out with our different texture coordinates cuz we're gonna have two textures on the mesh and we need to know how to map them properly now we need to bring down some more of our values so we need a float free which is our vector free up here called direction so underscore direction and then we need our value here which is our intensity so fixed in ten sixty like so yeah definitely problems that no and now it's right off fragment function so it's a fixed for fragment so fragment fun it takes in a V tour and then it's type color but it has to be spelt the American Way as much as I hate having to do that as a Brit and then we have to work out basically how to render the pixels depending on our direction that we've chosen so we need a fixed okay so this is the value of how in not how intense but it's okay if we go to our shade and we haven't got it visible so here it's on y1 that means this over texture the overlay texture is going to be rendered on top of it looking down so the y equals one direction if we put y equals minus one it render on the bottom just x equals one it beside whichever side that being in settled in the back we need to get a value now on what direction it's going to render it on so we need to basically this is going to be the actual direction I can't really I can't use the word direction I could but I've already got one score directions confusing so what should I call it I was call it why not float sorry fixer it's the dot product now dot product in mass is the you take to paint so you've got you two vectors so you've got one pointing out that way and one point out that way it's the cosine of the angle between them basically that's what is the cosine angle and I'm not here to given a mass less and this is gonna you know take me a long video anyway probably yeah it's already twenty minutes I want to get this video finish I could do separate videos on shader math but I don't want to like shove them into this if we normalize a value let's just quickly take in and not normalizing a value basically scales it to one so like how do I explain that well let let's say like we're in unity for example this might make me my sense and let's say you have a vector and they're all the values are above one you can like scale them down so that they're relative to one there's not really I don't know any of a way of explaining it obviously I said I don't want to get carried away the mass in this video it's a bit overwhelming and it's I've let you left this video to midnight if you do want math and videos on this then ask but you know most people and probably here just to be lazy and copy the code anyway but anyone who actually wants to learn I will do math related videos on shaders if you want but anyway the dot printers in that and the direction so as I said it takes in two vectors so that's a vector the normal vector direction and the direction we've chosen and then that shows how it's going to render basically so we get out a direction a vector sorry you know we don't we get an angle and we're going to say that if the direction is less than 1 minus the in10sity so basically if the value is going to be negative right yeah if the values gonna be too low we want to set it to zero because if it goes into a negative value then we get problems so now what do we want to do the last thing I want to do is we want to work out depending on our two textures how they're going to show basically so we're gonna say we're line I fixed for for texture one and the type the function which uses a text 2d with users before and we pass in the main text and in the i dot UV main so we get that basically this is working out how the texture is on the get texture gets rendered because this is the function which renders pixels so if we know how the texture is on the object we can render the pixels and if we say fixed for text to be caused text 2d I call it over lay text i dot UV underscore overlay and now that we've done that we need to return a value now what do we return well this is where the bow direction comes in the direction belly so we'll say return and we don't want to just return our let's say we just did return text 1 that's our thing done boom we just get our texture 1 back if we return textured do we should get a texture to back and that's not what we want we want to be able to return the pixel depending on something of wise it'll be a flat thing so I want alert to make it look smoother if we didn't it would look very sharp we want to basically say when you lurk keep passing free values the first value is your minimum you're sorry your first value your second value is there be a second value and the third value is how much between the two values you are so basically if we say we want to go between you know texture 1 and texture - and also it's going to value fowl direction value direction forget I'm calling things so what this is gonna do is if the value if the direction is zero we're just going to have the main texture so wherever it is zero or wherever it's negative basically the side that we're not gonna have the overlay on it's going to be texture 1 which is the main texture then anywhere where it's higher which is basically where the vector the direction is facing so if we have y equals 1 it be from above that's why we're going to render the texture so now if I go back as you can see you've got y1 if I increase in Y because we're multiplying by it here we are normalizing to Rama check in if we increase the direction also women if I turn down intensity and an increase that it's going to look really stupid it actually kind of pushes it down itself but you don't actually want that and this intensity is basically the smoothness if you like look that's really sharp there if we increase that I go smoother you don't really want this if you want to keep the same texture you want it to be one but you could you could go up to two the more you put up the more intense it's gonna be one is what I would recommend now the thing about this shader is now if I put one here and one on the X that means it's gonna go diagonally think of it as if it's going so if the Y one is here and the x one is here that means the effect is going to be in this direction yeah that makes sense and then oops do not and say that if I put the direction on the said one that means it's gonna be so if this is a free D shape [Music] so let's say we send it in the this way this way and this way it's gonna aim in the direction from the center to this corner if you know I mean like when in this direction towards me there's quite a draw in a 2d like painting but you can see it's kind of going up in that direction up there which is between the XY and Z and then obviously if I put put these back to zero here but the way to like negative one it's going to come from below now the reason why you do ever want to use a shade is this is rendering an effect on top now see I said you can do every one of it if I take this object and let's say it falls over well like you want to like put a shader on rocks in a seent of like a thingy on top you could quite simply rotate the object and it still renders it from the top down so all the bits that were wise one is getting it rendered and the bit where it's closer to flat basically it gets rendered harsher and as you can see it works on any shape and any direction if you rotate it like this it's gonna like do it however you you know the best thing about these no dynamic depending on well however you want them now this video is getting on so you know I've done the shade now here's the main bit of code I'll zoom in I'll go for each but if you want so slowly go down you can pause if you need to anyway you should have that so anyway thanks for watching this video has been a long one if you want to see more these videos you know like and subscribe would mean a lot comment what you want to see more of any ideas for shaders I'd be nice I've still got quite a few backlogs so I'll be working on those yeah if any of you want to join our discord that would be helpful we're you know planning on growing that making a website we're gonna start doing and planning this robots website leaderboards just grow in the community in general you know the d'Epinay know community I'm also making a thing where anyone who wants to can design my youtube logo and banner and I'll pick a winner after however long and then I there is no reward but the the main reward would be that you know you get to be the one that designed it and you can put your own like you can credit yourself on the banner and whatever you know I'm gonna be generous it's mainly because my banner and logo are from back in my league of Legends days I still play a little bit but and it doesn't really make sense to DAPA Dino or coding so I decided that you know someone wants to they can try and make me a thing and I'd use it if it looks cool so I'm opening up to the community to do that if they want to but yeah anyway so thanks for all the support anyway you know the channels going pretty well any support you can give would mean a lot to me but yeah I just hope you stick around and watch more of my videos and hope you like the content and that can help but anyway thanks for watching and good bye

Channel: Dapper Dino

Views: 10,950

Keywords: Unity, Shader, Shader Graph, Shader Coding, Writing Shaders, Shader Tutorial, Tutorial, How to write shaders, Coding, Programming

Id: zZhvIeXvSGA

Length: 28min 23sec (1703 seconds)

Published: Mon Jul 09 2018