Make Awesome Effects with Meshes in Unity | How to make a Mesh

in this video we're going to see how we can make a mesh dynamically through code this is extremely useful in many scenarios like for making a custom animation system like the one I use in my videos or make me heat map or a radar chart let's begin [Music] hello and welcome I'm your code monkey and this channel is all about helping you learn how to make your own games with in-depth tutorials made by a professional indie game developer so if you find the video helpful consider subscribing okay so let's first talk about how useful it is to be able to make dynamic meshes meshes are used to render everything as you will soon see and making meshes through code allows you to dynamically generate interesting shapes on the fly we can modify the vertices and what part of the texture is rendered which allows for very useful matte facts one of the recent videos was covering a radar chart new UI and the shape for that radar is using a custom mesh the environment heat map used in Parramatta gone along with the four towns our own based on dynamic meshes another example is simply the animation system that I use in my videos each unit is a single mesh that is dynamically composed of multiple quads that display certain parts of the texture also the persistent particle system that I use for both particles is also mesh base each particle is a single part that moves its vertices until it comes to complete stop so this is just a sample from the awesome stuff we can create once you know how to create custom dynamic meshes so in this video we're going to learn how to create a mesh completely from scratch we're going to see how something is rendered on screen then we're going to learn to create a mesh object in code learn what size each of the mesh elements need to be draw a triangle then apply a texture to it and finally draw another triangle in order to create a square with that you will know everything you need to know in order to make your own custom meshes to create your own specific awesome systems then in the end I will expand upon the code to make some examples of custom meshes in action like a 4-time and the animation system okay so now that we've seen just how useful it is being able to make a mesh through code let's talk about how something is actually rendered on screen so here is my empty scene there's nothing on it over here in the hierarchy you can see that all I have is the UI and a simple camera and the camera as you can see it is rendering component in black now here I make a new game object and again still nothing is rendered now I add mesh filter and a mesh renderer and again stone nothing invisible however now I go in here and I set a mesh let's use the default quad and now finally you can see something it's increasing and now I drag a material onto it and there yo we can now view our texture so these are the two core components that we need in order to render something on screen we have a mesh and a mesh renderer the mesh is what defines the shape that is rendered and the material contains the texture data to be applied to that mesh as you may know computer graphics are made using polygons so triangles and over here I have chosen the default quad mesh and in order to make a Quan or square we need two polygons or two triangles and if we go in here on our scene we can select here it is currently shaded and we select wireframe instead and you can see indeed that our quad is made up of two polygons so here we have one and down here we have not so you put two of them together and we have a nice square make me what mesh the sprite renderer works exactly in the same way so if we go in here create a new sprite there Lissie sprite renderer drag the sprite and here you can see the sprite ring does the example the same thing also has a quad with two polygons all right so now that we've seen how something is rendered on screen let's see how we can dynamically create a mesh through code so let's make a script to test our code so in here make a new C sharp script let's call it our testing let's make a new game object call it testing and drag the script on to it okay now here in our script let's first just going to our private void start and do a simple debug well just make sure that our script is running okay I'm let's see the console and we have our console same test okay great so our script is running correct now in here let's start by creating a mesh so it's going to be an object of type mesh well it's called mesh can we just do new mesh all right there's our mesh object however unlike this all we've done is create a mesh in memory it doesn't really exist in our scene in order to show our mesh like we saw one of the things we need is a mesh filter so here in our testing object what mesh filter and now we can go back into our code and here we get the component of type mesh filter and we set the mesh to be our and you only create an mesh okay now let's test okay here we are and so nothing is visible however if we inspect in here on our mesh filter we can see that there is something in there and if we double click we can now inspect the mesh and we can see that it has zero vertices and zero triangles so the mesh has no data but we did manage to create an assignment okay so far so good all right now let's set up the vertices and triangles over here back in our code when we create the mesh there are three fields that we need to set we need to set the vertices which is an array of vector threes vertices represent each vertex of our mesh then we also need to set the UV this is an array of vector twos which define the part of the texture that matches with a certain vertex and finally we need to set the triangles which is an array of ends which define the vertex index and three of them make up a polygon okay so let's set them all first let's make some local arrays we're going to set them up and only in the end do we assign it to our mesh so we need an array of vector threes for our vertices then we need an array of vector twos for our UV and finally we need an array of events for our triangles all right so we do it we set them all up and finally we upload them to the mesh alright so far so good now as you can see we need to define a size for our race so let's start off with the simplest thing we can render which is a single polygon in order to create the triangle polygon we need three points so in here we're going to have three vertices then the UV is always the same size as the vertices so we also have three and finally the triangles contains the indexes of each vertex that makes up a triangle and a triangle is made up of three points so in here again we're also going to have three alright so just like this let's test and inspect our mesh okay see we are we still can't see anything but let's inspect our mesh and there it is our mesh now has some data it has three vertices it has UV and one triangle one polygon triangle alright great back in the code in here let's define our vertices so we're going to have three vertices for vertex zero let's put it on new vector3 on 0 0 then for d1 let's put it right above so on 0 100 and finally for the third vertex let's put it up into the right so we're going to set it to 100 100 alright these are our three vertices now for the UV let's ignore it for now and finally for the triangles this is an array of ins which contains the index of the vertices that make up a polygon so it start our triangle on vertex zero then we connect the vertex 0 into the vertex on index 1 and finally we connect it into the index 2 and that's it now one thing that is very important in here is the order of the indexes each polygon has a face and a back face and some shaders won't call the back face what defines the front and back of the polygon is the order of the indexes in order to see the front face always set the indexes in a clockwise order so here you can see that our triangle is going from the origin then going up and then up into the right if we swapped it and then up to the right to the up to the down then we would have said our triangle counterclockwise which would swap the front and back so always keep that in mind and in most cases just set it to clockwise all right so now that we've set everything up let's test ok here we are and we still can't see anything let's inspect the mansion there yo everything is correct reverse his triangles in the UV and the reason we can't see anything is like we've seen previously we need a mesh filter for the mesh and then we need a mesh render and you we can finally see our next polygon awesome if we inspect the scene and again put it on wireframe we can see our nice poly you're on connecting there's a virtus here one here one here and the Tran connecting of them now our polygon is currently not displaying a texture because we did not set the UV so let's do that so we're going to set up the UV right now in here the UV array always has the same size as the vertex array so we have three vertices and three UV each UV index contains a texture position that should be matched to the vertex in that exact same index over here on the project files I have this texture as you can see it has a bunch of different colors so we can easily see what part of our texture is being shown now we want to apply this texture to our polygon in here the UVs are vector twos and they are normalized vector twos that means that the lower left corner of the texture is on point zero zero and the upper right point is on one one so we created our polygon with three vertices one on the bottom then one above and one two right so in order to display this texture just like the polygon shape we're going to set the vertex on index 0 into 0 0 so that it displays the lower left corner then on the index one we want to show the upper left part of the texture so we're going to keep the X at 0 and the Y at 1 and finally on the two we want to show the upper right so we set it into 1 1 all right that should do it we assigned our vertices or UVs and our triangles so our mesh has complete information let's test so here we are and we still see the same thing texture the reason is because we need to assign our material so down here we have our texture let's make a material to a point to it so a new material thrown with the same thing and here in this case let's use a very simple shader so just unlit texture and we drag our rainbow texture ok now back in our testing object we just drag the material and there it is and as you can see the texture perfectly matches with the corners we select so down here the in light blue exactly matching that one then appear the green yep and the red yep and the rest of the texture is not visible since we did not set the UV to use it awesome so a triangle is a great shape but on one of the time a square shape is more helpful so let's see how we can expand our mesh in order to make a quad now here in our code we set up our triangle which has three versus three UVs and three triangles now in order to make a quad essentially what we need is just another triangle we put two triangles together and we have a nice square so let's think about what we need in order to make a square we need four points so in here we need four vertices then you these are the exact same number as the vertices so again also for and now for the triangles over here we have three triangle indexes for each polygon now in order to make our square we need two polygons so that means we need to have three times two triangles which is six and that's it that's the size of our race now here we are setting up our values so you have 0 0 0 100 100 0 and another to make quad what we need is the one that is right and down so let's at the very Sun index 3 to be on 100 and 0 now on the uvn let's show the entire texture so for the UV 3 let's put it on 1 0 and now in here for the triangles the first polygon stays the same so we'll leave the first three indexes and now for the next 3 again we remember to set them clockwise so for the second polygon we're going to go from vertex 0 then go into vertex 2 which is up and to the right and finally going to vertex 3 which is to the right and down and that's it we have our quad nicely set up so we have 4 vertices for UVs and six friends alright let's test any of there it is we have our quad being displayed as a perfect square showing the entirety of our texture so we have essentially recreated the underlying code for the sprite printer if we inspect our scene we can see that indeed we have our two polygons so we can see shades wireframe and see exam like that we have two triangles connected not to make NS quad so now you know how to create a mesh and set up the vertices UVs and triangles to take any shape you want every other effect you want to make is just an expansion of this code by adding more sieze and different triangles for example let's make some tiles alright so here's the code to make some tiles now I plan on doing a dedicated video on how to make a grid map and visualize it but for now I just want to quickly demonstrate the various uses for the dynamic mesh so here you can see that I have a certain width and certain height let's put this bigger let's put it 4 by 4 and a certain town size then the vertices I calculate them by 4 since again we have 4 per quad so 4 vertices 4 and 6 multiply them by the total size of the grid then I cycle through the website onto the height and set the quad data for that specific quad so do all this and then the result and here it is we have our result our nice tiled grid so again the way that it works essentially each of these is a nice quad so we can go back into the scene and here inspect and you can see that each of them is indeed one quad so this is just an expansion of what we were doing previously so instead of having this texture you would add a fourth out lecture and you can see how you could have a nice 4 tile system just like the one that is used in Parramatta kun now for another example let's make a simple animation all right so here is a small animation that functions exactly like the custom animation system that I use in my videos so as you can see the head is bouncing up and down there's a body behind and if we go and inspect again our boyfriend there it is you can see the quad for the body and the quad for the head so put it on shaded and yep there you go you can easily see two quads and one of them is moving and down here I have the texture and you can see it is a simple spreadsheet texture with the various body parts cleanly separated now here in the code as you can see it is all based on quads so we have two quads then we have a quad to render our body exactly the same way that we created our previous quads and another one for the head when the main difference is over here on the UV again the UV is a normalized value so we need to take the texture width and height in pixels take the position in pixels and then we simply divide them in order to get our normalized ohms so we do that in order to just show the body texture on this force quad and down here we show just the head texture and then down here I'm using the code monkey Tonys to create a function on update so this code runs on every update and it's just a simple moving up and down code so as you can see I just take the head position I move the Y up and down then I modify the vertices array based on the new head position and I upload them back into the mesh remember that in order to modify a mesh first you need to modify and local array and in the end you need to apply it to the mesh so we do all that and again here is our nice result we have our simple character with two quads one of them moving up and down by modifying these vertices and again you can see that it is all running on a single game object on a single mesh so this is the core for my animation system you just have more buddy parts store the keyframes positions in a file and have it all working so now you know everything you need to know about making custom meshes now go ahead and make some cool stuff yourself as always you can download the project files any tony's from unity code monkey comm if you liked the video subscribe the channel for more ent tutorials post any questions you have in the comments and I'll do my best answer them alright see you next time [Music]

Channel: Code Monkey

Views: 48,631

Keywords: unity mesh, unity mesh effects, unity generate mesh, unity create mesh, unity create mesh at runtime, unity mesh animation, unity heatmap, unity heat map, unity mesh builder, unity effects, unity particle mesh, unity create mesh procedurally, unity mesh manipulation, unity make mesh, code monkey, brackeys, unity tutorial, unity game tutorial, unity tutorial for beginners, unity 2d tutorial, unity 3d, unity 3d tutorials, unity tutorial 2d, unity2d, unity3d, unity

Id: 11c9rWRotJ8

Length: 17min 48sec (1068 seconds)

Published: Tue Oct 01 2019