{"id":144,"date":"2006-02-06T17:33:19","date_gmt":"2006-02-06T22:33:19","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=144"},"modified":"2011-04-10T05:42:30","modified_gmt":"2011-04-10T10:42:30","slug":"terrain-part-4","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=144","title":{"rendered":"Terrain, Part 4"},"content":{"rendered":"<p>Now that my program has distance-based polygon reduction, I need the terrain to change whenever the user moves around.  If they are on the east side of a mountain, the area nearby should be detailed, and everything else should be more simplified.  If they move to the west side of the mountain, the detail should appear there instead of on the east side.  To set this up, my program comes up with a set of polygons optimized for viewing near a given location.<\/p>\n<p><center><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/terrain20.jpg'\/><\/center><br \/>\n<!--more--><br \/>\nOpenGL has something called &#8220;lists&#8221;, which is a list of stuff you want OpenGL to do.  A set of directions, if you will.  When I create a new terrain (a new group of optimized polygons) I send all of the vertices (the points) and polygons (the triangles) over to OpenGL and all of that data is stored as a list.  Later, when it&#8217;s time to render the scene, I just tell OpenGL to draw the list I created.<\/p>\n<p><em>Think of it this way: The list is a series of directions for how to get to Pittsburgh.  Get on this highway, turn left here, take this exit, etc.  Once I feed it the directions, I can tell it &#8220;go to Pittsburgh&#8221; anytime I want without having to give the detailed directions again.<\/em><\/p>\n<p>But I&#8217;m noticing that sending over this stuff to build the list is causing a problem.  As I fly around the terrain, there are little pauses every few seconds.  Lots of games have these from time to time.  Some people call this &#8220;stuttering&#8221;.  It&#8217;s acceptable once every minute or two, but once every five seconds is annoying.  I&#8217;m sending so much data at once that it&#8217;s causing a slight pause (perhaps a quarter-second) as OpenGL chokes down all that data. I suspect that the major problem is that I&#8217;m sending too many points.   I need to fix this. Let&#8217;s get to it:<\/p>\n<table width=100% cellpadding=15>\n<tr>\n<td valign=top>\nLet&#8217;s imagine we need to draw eight triangles, as pictured on the right.   Up until now, I&#8217;ve been drawing polygons using the simplest method possible.  I just send it 3 vertices and it draws a polygon.  This means that I need 3 vertices for every polygon I draw.  If I have half a million polygons, I&#8217;ll have to play connect-the-dots with 1.5 million dots.\n<\/td>\n<td><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/trifan1.gif'\/><\/td>\n<\/tr>\n<tr>\n<td valign=top>\nTo draw triangle A, I send it the the vertices pictured.  <\/p>\n<p>Keep in mind that &#8220;sending&#8221; a vertex is kind of a big deal.  Each vertex has its own location in 3-d space, a color, some data for how the texture should be painted on, and what direction the point is &#8220;facing&#8221;.   Multiply this by 1.5 million and suddenly we&#8217;re talking about a lot of data.\n<\/td>\n<td><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/trifan2.gif'\/><\/td>\n<\/tr>\n<tr>\n<td valign=top>\nAnd now I want to draw polygon B.   I send it 3 more points, as pictured.  Notice something about the points?   I just sent point #1 again.  Also, point #2 is the same point I used as #3 in triangle A.  Now here I am, sending the same data for that vertex all over again. My program is choking as it sends vertex data, and I&#8217;m making things worse by sending most points more than once! Can&#8217;t it just, you know, re-use them somehow?<\/p>\n<p>Actually, yes. This situation is fairly common and OpenGL has a tool for dealing with it.  It&#8217;s called a triangle &#8220;fan&#8221;.<\/p>\n<p>When using a fan, you send a whole <i>bunch<\/i> of vertices at once.   Each triangle is still made of 3 points, but the points get re-used in an interesting way.  The first triangle still comes from the first three points, as in the triangle A image above.  After that, each vertex I add creates another polygon, which comes from the very first vertex in the series, and the last two.  <\/p>\n<p>So, if I send all the verts in a fan, I get:\n<\/td>\n<td><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/trifan3.gif'\/><\/td>\n<\/tr>\n<tr>\n<td valign=top>\n<code><br \/>\nTriangle A is points 1, 2, 3<br \/>\nTriangle B is points 1, 3, 4<br \/>\nTriangle C is points 1, 4, 5<br \/>\nTriangle D is points 1, 5, 6<br \/>\nTriangle E is points 1, 6, 7<br \/>\nTriangle F is points 1, 7, 8<br \/>\nTriangle G is points 1, 8, 9<br \/>\nTriangle H is points 1, 9, 10<br \/>\n<\/code><br \/>\nPoint 10 is the exact same vertex as point 2, which means I do have to send a bit of redundant data by sending that vertex twice.  However, this is still a lot less than before.  Originally I needed 24 verts for 8 triangles, and now I&#8217;m down to 10.  That&#8217;s some impressive savings.\n<\/td>\n<td><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/trifan4.gif'\/><\/td>\n<\/tr>\n<\/table>\n<p>Of course, things are never this simple.  If you remember the wireframe images from earlier updates, you&#8217;ll notice that we almost never get nice, neat triangles like the ones in our example.  Instead, the grid is a mess of different-sided triangles that don&#8217;t always form nice fans.  Let&#8217;s look at one example:<\/p>\n<p><center><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/terrain19.jpg'\/><\/center><\/p>\n<p>In the outlined block, you can see that B, E, F, and G  appear normally, but A and H are merged into one big triangle.  Even more interesting is C and D, which are actually broken down into a smaller group with their own set of A through H triangles.  (And this entire highlighted square is in itself a sub-group made from the E and F area of an even larger block. Confused? Sorry.  Almost done.)<\/p>\n<p>The code to figure out how to make fans in these situations is fairly complex.  It took some time to look at all of the variations and come up with an optimal system. (Assuming I did)<\/p>\n<p>The result? Let&#8217;s see:<\/p>\n<p><center><\/p>\n<div class=date>Before:<\/div>\n<p><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/terrain_lowvert1.jpg'\/><\/center><\/p>\n<p><center><\/p>\n<div class=date>And After:<\/div>\n<p><img src='http:\/\/www.shamusyoung.com\/twentysidedtale\/images\/terrain_lowvert2.jpg'\/><\/center><\/p>\n<p>So, I nearly cut the number of points in half.  But now the bad news:  After all of this, I didn&#8217;t solve the slight stuttering problem I was having.  The terrain-rebuilding pause was reduced, but I can still detect it when the framerate is smooth.  This just won&#8217;t do.  <\/p>\n<p>Sigh.<\/p>\n<p>The problem is that I&#8217;m doing the whole terrain in one go.  I&#8217;m sending the whole mesh to OpenGL at once, which just takes too long.  I knew from the start that I could fix this problem by breaking the terrain into many seperate sections and sending the terrain over to OpenGL a section at a time.  I would take that quarter-second delay and spread it out over several seconds worth of animation.  This will fix the problem for sure,  but this is a complex step and I didn&#8217;t want to take it if I didn&#8217;t <i>need<\/i> to.  I had hoped that just switching over to triangle fans would fix the problem.  It didn&#8217;t, and now I have to take the more drastic step of breaking the whole terrain into smaller sections that can be sent one at a time.  <\/p>\n<p>Once this was finished, the stuttering went away and the program now runs smoothly all the time.  <\/p>\n<p>This probably seems like an awful lot of work to eliminate a quarter-second hitch.  It was, but I think the effort was worth it.  If this were a game, this would be one of those nagging issues that annoyed players and would lead critics to mention poor performance in their reviews.  You have to take care of stuff like this if you want good performance.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Now that my program has distance-based polygon reduction, I need the terrain to change whenever the user moves around. If they are on the east side of a mountain, the area nearby should be detailed, and everything else should be more simplified. If they move to the west side of the mountain, the detail should [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66],"tags":[],"class_list":["post-144","post","type-post","status-publish","format-standard","hentry","category-programming"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/144","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=144"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/144\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=144"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=144"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=144"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}