Intro to Graphics 12 - Triangular Meshes

hello thank you for coming to another lecture for introduction to computer graphics i'm gonna just dive in and start talking about today's topic that is um going to be triangular meshes right so last time we talked about surfaces in computer graphics and today we're going to zero in on triangular meshes and there's a there's a reason for that now we talked about different types of surface representations and at the end we at the end i said that probably the most popular way of generating 3d models today is using polygonal meshes and in the polygonal meshes what people typically prefer are quad dominant meshes these are meshes that are mostly made out of quads but not necessarily exclusively made out of quads so they're not quad meshes that don't have anything else but but quads but they're quite dominant matches that means they can have triangles they can have larger polygons but most of their faces are going to be quads and they're preferred because they perform a lot better when it comes to operations like couple clark subdivision than other types of polygons so so they're very good that they're very good structures for modeling anything but once we're done with modeling once we're when we finished our model and said this is this is my object model whatever it is that i'm trying to model from that point on regardless of what type of representation i use for it i could be using some polygonal mesh for modeling i could be using maybe nerve surfaces i could be using anything else at the end of the day once i'm done with preparing my model i typically convert my model to a triangular mesh and there's a very good reason for that and here it is triangles are nice a triangle can be defined by three vertices in space just three points in space and i can just move them around however i like like like so and this these three vertices in space three points in space will define a unique plane just one unique plane and this is going to form a a planar that means a linear shape for me the same cannot be said for hierarchically degree polygons so if i have a quad the fourth vertex here that would form a quad it doesn't have to be on the same plane as these three vertices right and if it's not on the same plane the shape that this this quad will represent um is not going to be necessarily a rectangle or you know some planer it's not going to be a planar quad it's going to be a deformed it might be a deformed quad actually what it represents more specifically is going to be a a bilinear patch a bilinear patch is a funny funny shape it's formed of linear lines that connect the edges but its shape is actually curved it's a it's a relatively more complicated shape than the triangle or a planar surface but we don't want to deal with the complexity of that instead we're we're working with simpler shapes that are planar shapes and triangles and there are good reasons for that and i'm hoping that at the end of this lecture this is going to become clear why we would prefer triangles but if you want to have curved surfaces if you want to have more detailed curved surfaces what we typically do is that we just use more and smaller triangles right just you add more and smaller triangles and you will have a representation of a curved surface so we use triangles as our building blocks so we just connect these vertices in space and we get a triangle right triangles are nice so as i said if i want to have a sphere i can just do something like this right i can put a bunch of triangles together i have a triangular mesh that represents a sphere of course remember the implicit sphere i talked about last time with the implicit formulation for a sphere a triangle mesh is not going to be a perfect sphere right it's going to be sort of faceted it's it's because every every triangle here is planar but on an actual sphere there are no planar planar pieces planar surface pieces like the surface of a sphere is always curved so this is not going to be a perfect sphere ever but if these triangles become smaller and smaller on the surface especially when they become smaller than a pixel then do i care if it's planar at the triangular level i probably don't because i can't even see them anymore right if they're smaller than a pixel um so uh this relatively simpler building blocks of triangles are very very useful for representing all sorts of surfaces all sorts of objects for us but here's our fringe remember this guy i i love this model uh so you know this is all made out of a bunch of triangles right it's it's really nothing else as scary as it looks it's it's made out of a bunch of triangles and of course they're sort of painted over so you know it gives you the illusion of a lot of surface detail here but it's a relatively few number of triangles you actually don't know the number of triangles for this particular model but you know we know that it's made out of triangles and with some painting over the the triangle that textures that's going to be our next topic but i'm not really planning to talk about textures today anyhow you look at this it's just a collection of triangles and we use triangles and triangular meshes for representing pretty much any object in computer graphics i'm saying pretty much any object by that i do not mean every object there are exceptions to this there are certain types of objects where triangular meshes may not be a perfect representation a good example of that and not that not the only example but a good example of that is is hair for example this wonderful model created by luke begin he's a wonderful artist if you look at this model most of it is actually modeled as a polygonal mesh and then converted into a triangular mesh and rendered but not all of it the hair not not just the your hair on on on on top of the character's head but but also the facial hair and and also there's some little um particles on on the character's shirt all of those are represented using splines represented as curves not as triangular meshes but most of the surface is actually modeled as a triangular mesh right so that's that that's the point so here's another example here again most of this this character model is crafted and built modeled using polygonal meshes and converted the triangular meshes and rendered the triangular meshes but not the hair hair is the hair is modeled differently i'm not going to get into the the details of how this particular hair was modeled and these splines are what is used for rendering the hair in this example right nonetheless most objects if not all objects or most objects we use in computer graphics are rendered as a bunch of triangles even if they're not modeled as a bunch of triangles they're converted to a triangular mesh before they're rendered so that's why triangular meshes are very very important and um and until i gave hair as an example of a an object that is not necessarily converted to a triangular mesh for rendering but there are methods that actually convert splines to triangle meshes while rendering so even even splines can be rendered as triangular meshes because gpus are designed to render triangles so well i'll talk about rendering on the gpu in a little bit nonetheless triangles are very important because whatever we do with with surfaces with any kind of objects we have in computer graphics they may end up being a bunch of triangles in the end right so let's go back and take a look at our triangles and try to try to understand them a little better now okay defining a triangle is easy i just have three points in space and i define the triangle okay but i kind of i define the triangle but you know i kind of need to figure out all the points on this triangle somehow right let's let's pick a point here like yeah at this point in the middle this this green spot let's let's call it p um where is that p in space because you know i i know where these three vertices are let's call them p0 p1 p2 i know where these three vertices are but i kind of need to figure out a way to compute the position in space for any point on this triangle right that's what i need to be able to do um it turns out that that's fairly easy because because this is a planar this this is a planar surface and triangle is a planar surface and these three points in space uniquely define that plane any point on that plane any point on this plane represented by these three points can be represented as a linear combination of these three points in space again any point on this plane any point on this plane can be represented as a linear combination of these three vertex positions so i can write this point p as a linear combination let's say p is equal to alpha p0 beta p1 plus gamma uh p2 good just some some numbers whatever they are turns out we have a very specific name for for this for this kind of representation we call it the the pericentric coordinates of this position p on this triangle so this alpha beta gamma is going to be is going to represent the pericentric coordinates of this point p on this triangle uh it's very specific to this triangle right because these are the weights that i'm going to be using and to form a linear combination of these vertex positions and here's an interesting thing about the percentage coordinates this is a very very general concept and used a lot in computer graphics because triangles show up in a lot of places one interesting thing about this is that these bicentric coordinates will have three components right because it's defining a position on this triangle let's say but i'm not saying anything about the the dimensionality of these vectors p0 p1 p2 so this could be a 2d triangle now it could be a 2d triangle such that p0 p1 p2 only have x and y coordinates i would still have three coordinates here to represent my paracentric coordinates right because it's just the weights of these three vertices or this could be a i don't know four-dimensional triangle can you define four-dimensional triangle they're easy you just pick x y z let's say w uh for these points to represent their positions in four dimensions and that will form a four-dimensional triangle or a triangle in four dimensions and again it's going to have this three coordinates representing its burst entry coordinates for any points on on this triangle now these barycentric coordinates they're supposed to represent a position on a plane but i have three components here that's a little odd now for some of you you may think okay this is normal i have three vertices of course i have three coordinates but a plane a plane is a 2d construct so on a 2d construct i actually don't have 3 degrees of freedom i should be able to represent positions on a plane using just two values think about this a position on a line it's very easy to think about right a position on the line you should be able to represent a position along the line using a single value right it's just a you know if you have a reference point you call it a zero any other point along that line can be represented by how far that point is from this this origin origin point that you picked right so a position on the line you can represent it using a single value a position on a plane being a 2d construct i should be able to represent it using just two values i shouldn't need the third one but i have three values here so that's a little odd right when you think about it that way actually it's not odd because turns out the percentage coordinates because of this has a very specific property that is these coordinates must always add up to one so these are not completely independent values they are actually dependent to each other and they all they need to add up to one right so if i know two of them alpha and beta here i can compute the third one right because they must always add up to one and this sort of makes sense because at the end of the day what i'm trying to do here is just a linear interpolation of three values right so it's just a the average of three values so they must add to one right so we talked about this while we were forming curves whenever you're averaging things they must add up to one if they don't add up to one you're sort of secretly adding a a zero vertex here somewhere right that has the remaining the remaining weight uh so whenever whenever you're doing a an average of three values they must add up to one and that's the only way that's the only way i will guarantee that this point p is going to be on the same plane defined by these three vertices in space that's the that's the only way that i can guarantee this equation must be satisfied so this is a very very important equation paracentric coordinates will always satisfy this equation all right good now i said that this point p on this triangle can be represented as a linear combination of these three points using very centric coordinates like this but this is not specific to the points on this triangle i can actually represent any point on this plane as a combination of these three vertices literally any point on this infinite plane can be represented such as this one that's outside of the the triangle any point on this plane can be represented like so as a linear combination of these three points again the body centered coordinates will add up to one right but but if this point if this point p is on that triangle then i have an additional nice property that these percentage coordinates will always be positive and smaller than one they will always be positive and smaller than one now this property that they all add up to one that always exists and if they are also between 0 and 1 then this point p is going to be inside that triangle right and if it is if point p is outside of the triangle then you know this this property that alpha beta gamma being positive or not negative and and smaller than one it doesn't hold anymore so that that's it's gone so if this point is outside of the triangle then that property is gone but if the point is inside the triangle then i have this property it's a very very useful property so just to give you some intuition about what barycentric coordinates are why we like it so much in computer graphics uh now think about it this way if i take this point p uh that point p over here and if i move it to one of the edges i'm gonna move it to the edge between p0 and p1 see i'm moving it to the edge between p2 and p1 what happened to my third percenter coordinate is it just went to zero and that kind of makes sense makes sense because now point p is between p0 and p1 so it should be represented as a linear interpolation between p0 and p1 right it's along the line that crosses p0 and p1 so it it doesn't depend on this p2 anymore so p2's weight is going to be zero so for a point along one of the edges one of the very centric coordinates will have to be zero right what if i take that point and move it towards one of the vertices if i take it and move it towards one of the vertices then two of the weights are going to be zero and the other one will have to be one because you know this property always holds right and that kind of makes sense well i just took p and put it on p0 so yeah the others are zero and then p0 is one i mean what else can can it possibly be so as you move this point from one of the vertices towards the the the opposing edge its weight is going to go from one all the way down to zero and if you move it even further out of the triangle then its weight is going to start becoming negative right it's not going to be between 0 and 1 anymore right so that's the property of our biocentric coordinates and we can compute this for any point on this triangle also anywhere anywhere on this plane and we can do this for computing the positions the exact positions for any point on the triangle which is very nice but we don't all we don't just use it for computing positions on on the triangle we also use it for computing all sorts of attributes on this triangle now we're working with triangular meshes triangles are going to be our discretization of the surface so whatever property we define on on our surface is oftentimes going to be stored at these vertices right i'm going to be storing some attributes at these vertices and to find the value of that attribute at any point on the triangle i can do the same thing i can get used by centric coordinates to interpolate the value of that attribute for example instead of positions here i can just assign some colors to these vertices let's say that i'm assigning the p0 is going to be red p1 is going to be green and p2 is going to be blue right let's let's do it i did that all right so the triangle is just interpolating these color values right and to find the color value at any point on this triangle i can just do this linear interpolation using my barycentric coordinates so paracentric coordinates are very frequently used for for rendering and they're very nice and very simple and that's probably one of the reasons why we like triangles so much because you know because they are they're planar and they're they form linear interpolations and those linear interpolations can be represented using bicentric coordinates like this it just simplifies the whole rendering process quite a bit and that's one of the reasons we we like them so imagine we use them so so often all right and this is not specific to position or color like any attribute you can think of that you can add to a vertex if you want to find the value of that attribute any point on the surface you just look at the corresponding triangle and find the bar centric coordinates of that point and and do the interpolation what did i say i said something scary did you catch that i said actually something scared i said compute the percentage coordinates of a point uh let's let's see how we can do that now i kept saying if you give me alpha beta gamma like if you give me the percentage coordinates i can tell you where that point is it's very easy right what if i want to do the exact opposite what if i give you a point on that triangle and i say well give me the body-centric coordinates like why would i ever need that well let's say that i know the position on the triangle somehow but i want to be able to compute the the values of these other attributes that are stored on on these vertices right and to be able to uh interpolate those attribute values i need to know the bar centric coordinates of this point so how do i do that well there are various ways of computing the barycentric coordinates i'm just going to show you one of them that that i find to be sort of intuitive and nice now what i'm going to do is i'm going to take this point point in the middle here and i'm going to use that point to split this triangle into three triangles like so right i split my triangle into three triangles okay and here's what i'm going to do now i'm going to compute i'm going to compute the area of these smaller triangles here the areas of these smaller triangles and i'm going to label them like so uh you know this was my vertex 0 right p0 so the triangle that is opposing to that vertex i'm going to label its area as a zero okay so this one was p0 and the opposing triangle on the other side i'm going to call its area a0 i'm going to do the same for the others so a1 is going to be area of this triangle and a2 is going to be the area of the remaining triangle now if the total area of this triangle is let's say a then my barycentric coordinates can be written as aziz a 0 over a is going to be the barycentric coordinate of p0 that's going to be alpha and a1 over a is going to be the very central coordinate of this point and a 2 over a is going to be our center coordinate for for for this vertex and hmm why is that well let's see if this makes sense at all right so i know that my birth century coordinates they're supposed to add up to one do they add up to one i know that the total area of the triangle is a so a0 plus a1 plus a2 is equal to a so these these weights will add up to one okay at least we're okay with that that that part seems to seems to check check out alright uh let's take a look at the other properties now imagine that this this green point is along this line over here if it's along this line what's going to happen if it's along this line that means my alpha by centric coordinates will have to be 0 right because it's the point is just going to be a linear interpolation between p1 and p2 right and again if this point is along this line look at the area of this triangle over here that the area of that triangle is going to be zero right that triangle is going to collapse so okay so when alpha is supposed to be zero a0 is zero that kind of makes sense that that's great what if i take that point that green point and move it all the way on top of this p0 if i move it all the way on top of that p0 then the area of a0 will be equal to a right it's going to cover the entire triangle and so the alpha value will become one and the others will be zero the other two triangles will collapse so intuitively seems like it is working and yeah so this this relationship exists there are other interesting relationships as well with the angles of these triangles you can also compute the percentage coordinates but yeah i'm not i'm not going to get into that just just one way of computing the bicentric coordinates all right uh so are we going to do this um maybe but just not yet so this is going to be something that our gpu is going to do for us while we're rendering that's very nice right so you won't have to worry about this too much but it's it's good to know that this is happening so remember this guy does the gpu rendering pipeline i call it gpu pipeline so we feed in triangles on one end and those triangles come to our vertex shader as a single vertex at a time in our vertex shader we transform them into the canonical view space and then our rasterizer gets those vertices in canonical view space and their primitives their triangles then it rationalizes them excuse me and forms these um fragments and those fragments are sent to our fragment shader and the fragment shader computes the color and we get our image so this is our regular rendering pipeline now let's take a look at over here what's happening here is that our rasterizer is producing these fragments that correspond to the pixels now its input is going to be the vertex positions in canonical view space these three vertex positions and the other one and along with whatever attributes we store at these vertices so our asterizer okay technically our restaurant is not directly going to get but nonetheless our rasterizer is going to get the canonical v space positions for these three vertices and it's going to compute the canonical view space positions for all of these fragments and it's going to compute more importantly the barycentric coordinates for these fragments well how do i compute a very centric coordinate for a square i don't do that right so when we think about a pixel remember we talked about this pixels are not little squares we talked about this right so think about a pixel as like a a sample of an image so what gpu will actually do is they will look at the the centers of these pixels the center points of these pixels and the gpu will compute the barycentric coordinates for the centers of these pixels for these fragments right and if i know the barycentric coordinates of these points that correspond to the centers of these fragments then i can use those very centric coordinates for interpolating any of my vertex attributes so our gpu is going to do that right before calling our fragment shader here right before our fragment shooter our gpu is going to do that interpolation so if you remember our fragment shader and vertical fragment here would look like this so here i have um a varying vector for that that's colored i'm specifying a vertex color in my vertex shader that is a vertex attribute and that's going to pass through my rasterizer here and after the rasterizer i will know the barycentric cord my gpu will know the barycentric coordinates and using those barcentric coordinates my gpu will automatically interpolate those values and give me the value that corresponds to the center of the fragment right so the value that i get the value that i receive in my fragment shader is going to be that interpolated attribute value right and you know my gpu doesn't know what i'm going to do with that attribute like i'm writing the code here i could i could do whatever i want with it it just knows that it's some some value some varying value so it's going to interpolate it and and and give it to me my fragment shader and i'll do whatever i want with it right so this is not what i'm trying to say is that it's not specific to computing colors you could use it for computing pretty much any kind of attributes but color is a good example good simple example that's why that's why i keep using it here in these slides so let's take a look at how to structure all this stuff in in webgl a little bit but let's let's go back to let's go back to the triangular meshes so remember we talked about how to store polygonal meshes and you know we had a list of vertices for polygonal meshes and the list of faces lists of polygons for a triangular mesh that's going to be a list of triangles so our faces are triangles and each triangle will have three vertex indices obviously right so this is a very typical way of representing triangular meshes although we don't necessarily send our gpu this structure remember we also talked about edges maybe and storing edges in different formats we're not we're definitely not going to do that for for gpu rendering we you want we won't need the edges for for gpu running we will not need the edges for some specific algorithms that use gpu based rendering they may use edges but you know gpu will know nothing about edges edges don't exist for gpus right gpus will know vertices gpus will know faces they will call them elements that that's about it right and these vertices they don't have to be vertex positions like people their vertices will contain all sorts of vertex attributes not just positions but they could be all sorts of other things as well so but you know typical vertex attribute of course is going to be positioned right so in most cases my vertices vertex positions will be stored now um i i've shown you something like this earlier so it's just xyz xyz xyz xyz positions for my uh vertices but this is typically you should you should think about this as like a 1d array of x y z values so x y z like the scan line order x y z and then go back x y z and x y z so this kind of looks like a 2d array and by 3 that's what it looks like but it's not a 2d area it's actually a 1d array x y z and then the next x comes and then the next x x y z and then the next x comes x y z comes and so forth does that make sense it's just like the rgb image or rgba image um you know i can i can do the same thing for my color values if i have vertex attributes as colors i i can have another list like this actually just to be complete here there are ways to combine these lists together and you can even store your vertex attributes as position and then color of one vertex and then go to next vertex position color and then next vertex position color you can you can do all sorts of crazy things it's very customizable the way that you send data to the gpu but just to keep things simple for the time being at least let's assume that these are separate arrays and it's okay you know what i'm actually going to get just get rid of these these colors colors are gone we're just looking at positions right i have positions but i could have other attitudes as well but you know i'm just looking at positions uh now when i want to render a bunch of triangles using my gpu we did that earlier when we were talking about webgl so i'm sort of repeating myself here a little bit uh the the first three triangles here they are going to form the first the first three vertices here will form the first triangle all right and the next three vertices will form the next triangle and if i want to draw this i can just use this lovely webgl command gl draw arrays so i presumably i put these arrays on gpu memory now i'm ready to draw of course i need to do some initialization we talked about all that stuff earlier so i'm skipping those steps so by calling this gl draw arrays i and saying that hey i'm drawing triangles and i'm going to draw vertices starting from vertex 0 and i'm going to draw six vertices because there's six vertices and i'm drawing triangles that means i'm drawing two triangles right and my gpu will just draw two triangles using this good enough all right well good enough maybe maybe maybe not now here's a problem now if this these two triangles are the triangles of a quad in this case actually let's say that they are and let's say these blue vertices are actually the same vertex and these uh red vertices are actually the same vertex the problem with this representation is that you know what let me let me color these position values based on which vertex they represent so as you can see this this red vertex appear appears twice it appears here and it appears down here and the same goes for the blue vertex it appears twice right and that's that's not very good i keep repeating the same data and i'm storing the same data on gpu memory actually with this kind of representation for a triangular mesh on average you would expect a vertex to appear let me see one two three four five six times six times yes every vertex six times that means this array will will have six times more data that it needs to have which is not very good right yeah especially if you're rendering very high resolution models that's going to be a lot of unnecessary vertices that maybe i don't have to store what i actually have here is i actually have just four vertices i actually just have these four unique vertices that's it i don't have all those sex ones right even for a simple case like this i ended up adding more vertices and for a general mesh you would expect a vertex to be duplicated six times on average so can i get around it well i can i can just define my triangles uh opengl and webgl will call them elements so i can have an array of elements an elements array will contain indices into this triangle area so that's going to be uh 0 0 1 2 will be the indices of these vertices vertex 0 1 2 will be the first element that is the first triangle and then it says 0 2 3 will be the next triangle so the first triangle is going to be formed by this 0 1 2 and the next triangle will be formed by 0 2 and 3 and this way i have my two triangles now here also i am going to be duplicating vertices these same vertices will again appear six times on average because a vertex will be used by six different triangles but every time i'm repeating a vertex here i'm only storing one index and that one index can be just one integer instead of three positions plus plus all sorts of vertex attributes whatever attributes i have right i'm not duplicating all of vertex theta i'm just duplicating its index which is a lot cheaper than not forgetting the entire vertex right so you know this is in many way many ways it's preferable okay simple enough right well all right drawing this is going to be a little more difficult because now i need to tell webgl here to use this elements array for drawing so if i were to to draw this and i say just you know do draw me two triangles starting from zero this is not gonna work because you know this buffer is not set up to draw like this anymore it's not duplicating any vertices so yeah this this is not going to work what i'm going to have to do is i'm going to have to use a different command for drawing these elements and that's going to be the command that says gl draw elements in gel draw elements i'm saying i am drawing triangles starting from the very first element and i'm going to be drawing drawing two elements each one of them will have three indices because they are triangles so this way i got rid of the well i didn't get rid of the duplication but i minimized the application quite a bit because i'm only storing a an index instead of storing all of that data uh this buffer is going to be a special type of buffer it's going to be an element buffer so you're going to have to allocate an element buffer and then you know put in some integer values those integer values don't have to be 32-bit integers they can be 16 bits they can be eight bits if you just have um 256 vertices then you could just use eight big values they're going to be even even smaller setting this up is actually a little bit easier because its meaning is more clear that there's less customization going on for the elements area what else can it possibly represent is these are just the vertex indices of triangles and so it's fairly easy to set this up and then you need to call gl draw elements if you want to use elements for drawing so this is just another way of of drawing and this is more more efficient so one element in this case we'll need exactly one triangle yes because i'm saying my elements are triangles but i could be i could be using this sort of rendering for drawing line segments as well in this case i would be calling gl lines right so i didn't have bgl triangles but because i called it triangles my elements in this case are triangles all right all right i'm rendering triangles like this this seems to be more efficient but there are better things i can do this is not the best i can do better now remember this this array uh these are my vertices right so if i put my vertices in a specific order you know if i carefully order my vertices around in this case what i'm going to do is i'm going to take the first vertex and the second vertex and i'm going to swap them i'm going to shift their places if i swap them instead of starting with red i'm going to start with green and then and then red right green red so if i do it this way then here's what i can do i can render this this buffer in a special way and it will render as it will just draw the first first vertex and then the second vertex and then the third vertex well i have three vertices now three vertices will here will define a triangle so i can form a triangle all right then i'm drawing my fourth vertex now i look at the last three vertices i've i drew and those three vertices will define the next triangle so this is what we call a triangle strip so if you order your vertices carefully you might be able to draw your mesh using triangle strips so in this case i can i can draw it using triangle strips just like this i'm saying i'm not drawing triangles now i'm drawing a triangle strip so and every group of three consecutive vertices will form a triangle in a triangle strip and i'm saying i'm starting from zero and i'm saying i'm going to draw four vertices that means i'm drawing two triangles in in triangle strip format right so a triangle strip just let me give you a longer example of a triangle strip this is let's say this was my my first vertex i have another second vertex i can't do anything with two vertices just yet i have a third vertex and as soon as i have three vertices now i can draw a triangle now i add another vertex with the last two vertices it forms another triangle and i add another vertex where the last two it forms another triangle and another vertex that becomes another triangle another vertex another triangle right another vertex another triangle and you get the idea so moving on the surface like this if i carefully order my vertices i might be able to take advantage of this and store less data for my vertex attributes and my vertex buffers and also and also draw my object more efficiently because these vertices will be transformed they will pass through my vertex shader only once right and i'm sorry reusing the same data that comes out of my vertex shader to draw two triangles right so this is actually each vertex here is used for drawing three triangles so it's actually fairly efficient uh so the problem with this is now i need to take my polygonal mesh i mean i can convert my polygon mesh to a triangular mesh that's relatively simple but beyond that i also need to figure out these triangle strips out of that as well i kind of need to order my vertices and it's a little bit of a mess yeah that's going to be the difficulty here for example if i wanted to draw a model like this i'm going to have to draw it in multiple triangle strips or maybe in some cases i might figure out a way to generate one triangle strip that goes around the entire model and draws it at just one giant triangle strip but a lot of times i may need to actually separate it in multiple triangle strips like this right and i i i like this sort of visualization a bit because uh it's it's showing that you know like a long as i'm moving along a triangle strip things are very efficient right but a triangle strip is just a strip and on either end either side of that strip i have vertices and i'm going to be duplicating those vertices when i'm drawing the next strip above it or the strip right below it so imagine this this brown strip over here this green strip is sharing some of the vertices some of its vertices along their border right so those vertices will be duplicated in my vertex buffer [Music] yeah and they're going to be processed multiple times so i mean that's that part is not ideal but the the rest of it is you know yeah at least i'm not duplicating each and every one of them but in this case my duplication is a lot less i'm duplicating them only two times instead of six times right so each vertex on average will be duplicated two times just so that i will be able to draw but we can do one more thing let's let's let's we said we can draw triangles we can draw triangle strips the other form of uh using sort of strip like construction is a triangle fan triangle fan is sort of like a funny thing it just forms a fan as you would imagine so it's going to use the first vertex let's say this guy is the first vertex here all triangles will be using the first vertex and the last two vertices so instead of a strip that just starts from somewhere and moves on uh a a triangle fan is going to always use one the very first vertex and it's going to form a fan around that vertex that's why it's called triangle fan right it's not triangle fan is not that frequently used triangle strips are very very frequently used actually but with gl draw arrays you can you can do either one of any one of these three when you're drawing triangles you can draw triangles separately or you can draw them as triangle strips or you can draw them as a triangle fan whichever one you like but we're not done remember we sort of minimized our duplication cost with triangles when we use an elements array we can use the elements array with these two there's nothing stopping us the same thing will apply it's just that this time our elements array will be forming strips or or fans so i can just call geological elements using triangles or triangle strips or a triangle fan in which case my index duplication is going to be minimized by by this formulation also it's going to be more efficient for the gpu to process then it's going to have to process less data that way so um the the most efficient one of all of these for for general purpose problems is going to be using elements as triangle strips so this is going to minimize the data duplication minimize the cost of data duplication and it's going to have the efficiency of drawing triangle strips so this is probably the best option out of all of these using elements with triangle strips but what i'm going to ask you to do in our upcoming project for which we're going to be drawing triangular meshes i'm going to be asking you to do this draw triangles because this is the simplest option here yeah we're duplicating everything we have six times the cost of of storing data and takes time the cost of processing all the vertices too but don't don't worry about it too much it's uh vertex processing is relatively fast so even if you're rendering a relatively high resolution model you probably won't see too much of a difference unless you're rendering millions and millions of vertices it's hard to see the the cost of vertex processing with modern gpus today so yeah this is going to have some it's not going to be the most efficient one of them all but it is by far the simplest one of them all you won't have to form strips which would be you know a little bit complicated you also won't need to worry about generating an element array just to keep things simple i'm going to recommend that you use this one for all of the projects in this in this class but i wanted to yeah i had to mention this because this is a more efficient way of rendering things and if you look at any production code you'll probably see more of this than this guy right all right so um this is all i plan to talk about regarding triangular meshes all right then we'll end it here for the day thank you all for tuning in and i'll see you next time yeah thank you

Channel: Cem Yuksel

Views: 1,331

Keywords:

Id: HV2dKIQcp6k

Length: 53min 11sec (3191 seconds)

Published: Thu Apr 29 2021