Writing Shaders In Unity - Vertex Manipulation - Beginner Tutorial

okay so hello and welcome back to another shader tutorial shade a coding tutorial actually and this one we're going to be moving on from last video where we looked at how to set up a basic shader and how to write a fragment shader where we basically leave the mesh as it is and just render the pixels like the color for the pixels and you know add a texture and whatever and this one we're going to be taking a mesh and basically deforming it through the shader and you know first of all we'll just do a simple like we can input that how it's deformed and then we'll change it to have a time so it's like an animated thing like this this is just a kind of test thing to look up but anyway let's get into it so we have our cube here now one thing I want to mention first is just how it works basically so or what the code is doing now so when we have a I'm just using blender is a good way to show you so like with this cube we have in unity I presume that it's just a normal cube with you know it's got 4 sorry 8 vertices 1 this corner there's 2 3 4 5 6 7 and the 8 ones around the back so as 8 vertices now if we're going to blend you'll see if we're going to edit mode on this object this has I mean add vertices select mode so I'm in a let me just send to the actual object okay so we've got 1 2 3 4 and we got 4 on the bottom now what the code does is in the vertex function all we're doing is basically just taking in and passing out we're not we're not touching in this this fragment function is getting called for every pixel to color where is the vertex function its Priya it's only getting called for the vertices now it's more complicated jet will have more vertices but as you can probably tell this cube has 1 2 3 4 5 6 and 8 vertices which basically means the codes are going to get ran we're going to pass in this mesh object into unity and the shader is basically going to say all right here's the data on these vertices are we going to leave it the same which is what we do we leave it the same or are we going to move them so we could say like for all vertices above why zero we want to move them to left a bit or whatever you know I mean so you might want to get like you know you might only want to move stuff that's above a certain point or whatever you can do whatever you want that's the best thing but this code is gonna get ramp for every vertice so let's say we just say okay for each vertice you move it ten to the like Z or X or Y whatever so what I'll do is it'll say alright here's our first verse see we're gonna move it ten that way here's the next one turn that way turn that way turn that way until eventually you've moved all the vertices and your shape is back to being a cube in that place now I am dragging this with my hands that's completely inaccurate but hey we've got our almost cube and that one went a bit further you get what I'm trying to say though if we move them all exactly ten to left we've got the same object still same shape just move to the left but obviously when you want to do certain defamations you want to use like different offsets depending on maybe an input variable or you know the time or whatever whatever you want so we're going to get into doing that now so that's by default we see here's our cube and there is now we're actually going to use a sphere for this maybe I can do both I guess what I'll do is I will create a new material and call it like tutorial Oh two maps and I'll just duplicate the shader call it tutorial two shader open it up get rid of the tutorial one shader and we want to just rename it here okay so now we've got our two shaders and our sphere which I'm going to add 3d sphere we'll put it to the same position and then we'll just move this in this direction like -1 cube 1 there we go in this shader we're gonna put our new material onto on the sphere so now we can do the same you know picking a texture picking a color or whatever we want there is no lighting it's an unlit shader I'll cover lighting in a different shaders toriel so what when I do is I want to take this this mesh this object that has its first season and we want to move them in some way with a shader so what we're gonna do is we're going to go to our vertex function here we're basically of adversities get calculated and we're going to take what it is now now we're passing in app data which has a vertex position and a UV coordinate so as I've explained before the vertex position it's as you can probably guess the position of the vertices so if we take in this here is an app we call it waste an app data and it's important is what we're calling it we're calling it in if I say in and then what should we do we should move it well we have to refer to the vertex so vertex so if we refer to the vertex are passing in and we say we want to add you know to to the Z so I'll say vertex dot Z plus equals to every single vertice in the shape is getting moved to to the Zed oh I was changing the tutorial oh one thing let's just take that out go back down here alright so now what losing my tabs there we go the object thing is still here but the actual shader is rendering it it's move the vertices over there and it's from narrowing the pixels over there seems odd but yeah so if I click there the object isn't there it's actually still here which might seem weird but it's just how it's rendering it it's a weird shader now that's the basics of it you know you can move vertices an object this is just moving it for everyone so the object stays the same shape we might not want that and let's say we want to take in a let's say want to take in a parameter to like and I'll parameter sorry a property which is basically parameter to change I don't know something must say we want a very book called underscore what should we call it then offset now I couldn't make it back to free I'm just gonna say it's a way I think ok so if I call it you know offset I think there's a type called float free yeah float free in its default is not zero zero zero now assuming that I wrote that right if I go into the inspector no I didn't where's the e tutorial hmm okay what I'll do is I will maybe just taking a flow actually because if we're just taking one float thing then that will be fine let's do that woods taking a load which is a capital if I remember correctly there we go so we get a float here now it's already offset there there's no offset here oh-oh when you do a float it is already I sorry I didn't realize it was default that anyway that's fine I'll do that to make it a little bit so this is offset I'll put in vertex offset so if you remember this is what we see in the inspector this is the type this is the default value and this is the variable name so if we want to refer to it down here so it's a float down here so we'll just say see it's technically a float for so if we say in sorry capital n dot vertex plus equals vertex offset there we go we can now move it through the shader or where it's getting rendered don't need W for this yeah we can basically render where is going so change where it's getting rendered if we look here the object is still here but we're changing its thing here which is you know quite handy you might want to do that now generally you won't want to bother doing that manually through the input here but you know it's just something pretty cool to show that you can do you can take in an input like that and then move your object now you know before this video gets them too long I've already covered the basics you can probably just mess around whatever you want now we're going to make it kind of animated which is obviously a bit cooler so if I go to hey get rid of the vertex offset thing let's take in some parameters so let's just carried this we want to take in a alright so we'll say animation speed equals animation speed equals I don't I said the equal am i doing that's why I'm asking confused just call it you know animation speed and it's tight float though actually the thing is it's a it's a float but it's only a float one I don't know how it's gonna read that I think I could just refer to the x value of the float what I'll do is I'll put no sorry I'm an idiot range and then we can just say like what what do you want to arrange to be will say 0 comma what should we use for the maximum value we'll say five free I think 5 only too much so we'll leave that deficit equal to default value then we want to say you know how intensity I'm because it's going to be using a curve we want to say about how so if you're not a sine curve looks like you know it's just a up down up down up down up down this next value will be like how up and down it goes how bigger the offsets so I'll just call it you know offset size offset size it's a range again between 0 and 10 I'd low depends how extreme want it to be and we'll say we can just leave that I think actually let's leave that how it is okay if we go down here then vertex function so before it here we have to take enough things so we're taking in what two floats were taking in a okay so the date if we actually go out here you'll see that actually just sliders now what I didn't run here so there's nothing wrong there I don't think is it because I've put semicolons did not like that that was why believe me now we've got sliders here yeah between our values that we've put in as Max and min so let's use them shada cool all right so we wanted to say down here somewhere I've got lost again all right here we are float animation speed and then float offset size like that which declared on it and then we are going to use them so what do we want to do well we want to take a particular let's say we've got our object like a sphere right let's say we want it to go where you V like I showed you earlier so that like it kind of goes like that you know connect across across across Chris as it's going down so what we want to do is we offer f1 sorry we want to offset it on the X we want the X which is left and right we want those to move but we want them to move depending on their Y position if you get what I'm saying so we still want them to move left and right so want to change the X but the X is going to depend on the Y so depending on how high or low it is we'll change the left and right so if we go into the vertex function and we say in dark vertex da X or referring to the X vertex we're going to say we'll take ad then sin is sine you know the same sine cos tan and it basically takes in a value and it's going to output the value so as we go between well 0 and 1 it's going to you'll see you'll see so if we say underscore time dot why that's just the time value that is changing this is increasing we're gonna multiply it by our animation speed and then we're going to be relying on our the basically the offset size is going to be depending on you know how basically how far it goes out so we're going to say in yeah dark vertex dot Y this is what it's depending on and we're gonna multiply that by offset size so now basically this is going to be depending on our sliders on how much it does it now let's have a look oh my table see fix our problem first it's got problem because I didn't end line okay so on our shader now please work okay this is interesting it's doing stuff what kind of values have I used let me just tweak the values a bit this is interesting I feel like oh the reason why it's happening is probably because the unity default yeah the unity default sphere doesn't have enough faces you know what I'll really quickly save the day let's just get rid of this stupid sphere I think because it only has a few vertices on it it's basically not good luck if I placed it to this a flight to thee oh no sorry it might be because I'm not in plane mode sometimes when you're in yeah now actually that's that's pretty cool on the cube to be honest it's pretty weird but it's pretty cool if I go back to the scene view now you'll see it's offsetting on a curve by the promise because there's only two kind of layers of vertices on the Y it's only gonna move like that now let me actually sorry go back and put in the sphere and press play it's gonna be all funky isn't it okay it's working just very weirdly but it looks pretty cool actually so as you see on this Nasheed I don't need to change it I don't get to go to blender it's working the values are just a bit strange so that's the speed right so if I increase that's gonna push push push then just want to lower the amount so you see here it's just gonna be moving the object and then the more increase that's the more bendy it's gonna get the offset size so you can make it look like that oh like less messed up so here's your slightly deformed shape depending on you know it looks pretty cool doesn't it yeah I'll advance onto this on this sorry I'll advance in in on this whatever in our next video I'll go into more detail things I also add lighting so you can see the shape it better but yeah let's just also put this onto the key why not we'll have some dancing shapes so there we go there is the video I guess that's a simple introduction to moving vertices and obviously animating them taking in some more mitr types just slowly building up your knowledge of the shader code to build some simple but cool shaders to mess around then we'll end up moving on to more meaningful shaders and you know cooler ones but now that you have access and a function to your vertices you can do whatever you want with them you know you can just put them wherever you want I guess depending on different things you know just go use your imagination see what you can make you know I feel free to send me their creations you've made if you made anything interesting you know show them off if you want to have any feedback on anything or you know give feedback or whatever then officer there's a comment section and I'd also recommend joining our discord server where we have discussions about things unity related JavaScript c-sharp whatever whatever it's just a good place to be and also if you haven't already I would appreciate you know like subscribe it'd mean a lot if you want to see more these videos obviously commenting what you'd like me to cover more of I think I might make quite a few more these shader videos because they're actually really fun to make compared to my other videos no not that I dislike the ones but these are pretty fun to make and it's also cool to see the outcomes of these videos and just like this but anyway I think I've said everything let's get this video uploaded before midnight thanks for watching and good bye

Channel: Dapper Dino

Views: 23,408

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

Id: NdKry7MCPM0

Length: 19min 18sec (1158 seconds)

Published: Thu Jul 05 2018