{"id":22965,"date":"2014-05-11T19:42:49","date_gmt":"2014-05-12T00:42:49","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=22965"},"modified":"2014-05-12T00:24:18","modified_gmt":"2014-05-12T05:24:18","slug":"frontier-rebooted-part-2-welcome-to-orientation","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=22965","title":{"rendered":"Frontier Rebooted Part 2: Welcome to Orientation"},"content":{"rendered":"<p>This first part isn&#8217;t important to the project. But we&#8217;re talking about it anyway basically because I want to.<\/p>\n<p>Obviously in 3D space, the concept of which way is up or forward is completely arbitrary. We&#8217;ve got 3 axis, one for each spatial dimension, universally named X, Y, and Z. You can arrange these any way you like. If you want, X can be down, Y can be forward, and Z left. If we&#8217;re looking to assign an axis to the directions of left-right, back-forward, up-down, then we can do it six different ways: <code>XYZ, XZY, YZX, YXZ, ZXY, or ZYX<\/code>. <\/p>\n<p>Furthermore, we can change the orientation of any of these lines, so if we chose XYZ, we could have positive X values go east and negative values west, or we can flip that around and have the axis point the other way. So there are six ways to organize our axis and within each of those there are eight different combinations of which way they point. <\/p>\n<p>In a pure mathematical sense, none of this matters. It&#8217;s all arbitrary. Instead of XYZ you can name your axis HUMPERDINK, SNAGGLETOOTH, and CARROTJUICE. They can be in any order and point any way you like. The math will all work out. But from a practical standpoint, we&#8217;ve basically settled on some conventions and you shouldn&#8217;t break from those unless your plan is to drive people crazy. <\/p>\n<p>In the end, any of these coordinate systems will fall into one of two groups: Right or left-handed systems:<\/p>\n<p><!--more--><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><a href='http:\/\/en.wikipedia.org\/wiki\/Cartesian_coordinate_system#Orientation_and_handedness'><img src='http:\/\/upload.wikimedia.org\/wikipedia\/commons\/b\/b2\/3D_Cartesian_Coodinate_Handedness.jpg' class='insetimage' width='600' alt='NERD GANG SIGNS. From <a href=\"http:\/\/en.wikipedia.org\/wiki\/File:3D_Cartesian_Coodinate_Handedness.jpg\">Wikipedia<\/a>. Relevant article here: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cartesian_coordinate_system#Orientation_and_handedness\" title=\"Cartesian coordinate system\">Cartesian coordinate system<\/a>.' title='NERD GANG SIGNS. From <a href=\"http:\/\/en.wikipedia.org\/wiki\/File:3D_Cartesian_Coodinate_Handedness.jpg\">Wikipedia<\/a>. Relevant article here: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cartesian_coordinate_system#Orientation_and_handedness\" title=\"Cartesian coordinate system\">Cartesian coordinate system<\/a>.'\/><\/a><\/td><\/tr><tr><td class='insetcaption'>NERD GANG SIGNS. From <a href=\"http:\/\/en.wikipedia.org\/wiki\/File:3D_Cartesian_Coodinate_Handedness.jpg\">Wikipedia<\/a>. Relevant article here: <a href=\"http:\/\/en.wikipedia.org\/wiki\/Cartesian_coordinate_system#Orientation_and_handedness\" title=\"Cartesian coordinate system\">Cartesian coordinate system<\/a>.<\/td><\/tr><\/table><\/p>\n<p>Take a right-handed coordinate system and flip one axis, and you have a left-handed system. Flip another, and you&#8217;re back to a right-handed one. <\/p>\n<p>Fine so far? No? Sorry. I tried.<\/p>\n<p>By far the most popular coordinate system (or at least, the one I&#8217;ve encountered the most) is one where X points east, Y points up, and Z points south. This is a right-handed system. This is used by Oculus, all id Software games, and my <a href=\"https:\/\/www.activeworlds.com\/about.html\" title=\"Activeworlds\">former employer<\/a>, and I&#8217;m sure a lot of other games out there. We&#8217;ll call this system Doom-space. Both <a href=\"http:\/\/answers.unity3d.com\/questions\/38924\/unity-is-a-left-handed-coordinate-system-why.html\">Unity<\/a> and <a href=\"http:\/\/wiki.beyondunreal.com\/Rotator\">Unreal Engine<\/a> use left-handed systems, although I can&#8217;t remember how they arrange their axis off the top of my head. Personally, I&#8217;ve favored a system where X points east, Y points north, and Z points up. This works out to be a left-handed system. We&#8217;ll call this system Shamus-space, since in Euclidean geometry my ego is unbounded.  <\/p>\n<p>For the past few years I&#8217;ve favored Shamus-space because to move from 3D to 2D (let&#8217;s say we want to depict where the player is on an overhead world map) all you need to do is throw away the Z value. If you&#8217;re using Doom-space, then to make the transition you throw away Y, invert Z, and re-assign it to Y<span class='snote' title='1'>This is assuming you use the default OpenGL 2D mapping where X runs left-to-right and Y runs bottom-to-top, which is the ACTUAL source of all this chaos.<\/span>. And that&#8217;s a lot more cumbersome and prone to mistakes. On the other hand<span class='snote' title='2'>Literally!<\/span>, OpenGL defaults to a right-handed system, so to use a left-handed system you&#8217;ve gotta flip an axis. So it always feels like you&#8217;re at odds with the underlying system. <\/p>\n<p>Sticking to my unconventional system has its costs. Whenever I check out code snippets or example programs from other coders, I always have to juggle everything around to make it work in Shamus-space, since Doom-space is so much more common<span class='snote' title='3'>If not more common in practice, then at least more common among the types of hobby-coders who share their work online.<\/span>.  In the long run, I think this cost is probably more severe than the occasional annoyance of not having it feel intuitive to me. So for this project we&#8217;re going to use Doom-space.<\/p>\n<p>Also, I am sort of planning ahead. I don&#8217;t have an Oculus yet, but I plan to get one someday and I want to be able to re-use this code when that happens. Oculus provides you with all of the headset position and rotation info Doom-space, and I do NOT want to have to constantly convert between the two. Eugh.<\/p>\n<p>EDIT: And it looks like I inverted the north\/south axis in my above description. I&#8217;m not going to fix it, because this is a great example of the kind of confusion I keep running into.<\/p>\n<p>Anyway. Let&#8217;s get this started. I don&#8217;t want to belabor the first steps of setting up heightmap terrain. I&#8217;ve already <a href=\"?p=9644\" title=\"Project Hex\">done<\/a> <a href=\"?p=11874\" title=\"Project Frontier\">three<\/a> <a href=\"?p=141\" title=\"Terrain Project\">projects<\/a> that involves heightmaps. Let&#8217;s skip the heightmap stuff and get to the shader work.<\/p>\n<p>In the old days, we would begin with a flat grid:<\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/terrain1.jpg' class='insetimage' width='600' alt='Taken from <a href=\"?p=141\">this ancient post<\/a>.' title='Taken from <a href=\"?p=141\">this ancient post<\/a>.'\/><\/td><\/tr><tr><td class='insetcaption'>Taken from <a href=\"?p=141\">this ancient post<\/a>.<\/td><\/tr><\/table><\/p>\n<p>And then we would lift the points up to create hills:<\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/terrain2.jpg' class='insetimage' width='600' alt='terrain2.jpg' title='terrain2.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>That hill-building would be done by the CPU.  We&#8217;d build all these polygons and then send them off to be rendered. But here we can skip that step and just dump all that work onto the GPU<span class='snote' title='4'>Graphics Processing Unit. Literally: Your graphics card. Don&#8217;t let the name mislead you. It&#8217;s not a single processor, but many. (Many many.)<\/span> To do that we use a shader, which is a program that runs on your graphics card instead of on your CPU like all your other software. We create a shader, compile it, and then send it over to the graphics card to be used. That program will control how polygons are rendered, and can do all sorts of nifty things without troubling our poor overworked CPU. <\/p>\n<p>When we&#8217;re using shaders we just render the original flat plane, and provide the shader with an extra bit of info: A texture image like this one:<\/p>\n<p><table width='256'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/freboot4.jpg' class='insetimage' width='256' alt='freboot4.jpg' title='freboot4.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>We use the color values as elevation. So, basically we&#8217;re looking at a map of the world, and lighter = higher. The white spots will be mountain tops and black spots the low points. This is just to get us going. Eventually we&#8217;ll generate our terrain procedurally, but for now this is a quick way to get some polygons to work with. So as the flat plane is being rendered, the shader is looking at this texture, pulling out a color value, and quickly lifting up the vertex before proceeding. <\/p>\n<p>Just so I can see what I&#8217;m doing, I have it color the terrain based on height. This forms some arbitrary strata.  Again, this is just to get us going so we&#8217;re not looking at a field of solid color.<\/p>\n<p><table width='600'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/freboot2.jpg' class='insetimage' width='600' alt='freboot2.jpg' title='freboot2.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>You&#8217;ll note that the world is flat-shaded. There&#8217;s no shading, no shadowing, nothing to give us a sense of contour. If not for my half-assed coloring, the terrain would be a single flat color. This is because, for the purposes of lighting, it&#8217;s still rendering a perfectly flat plane.  We have the information to deform the plane to make hills, but we don&#8217;t have the information to know the angle of any particular point on the surface when we&#8217;re drawing it. If we don&#8217;t know the angle, then we don&#8217;t know how light will interact with it, which means we can&#8217;t shade it.  For that we need a normal map. <\/p>\n<p>We&#8217;ll do that next time.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>This first part isn&#8217;t important to the project. But we&#8217;re talking about it anyway basically because I want to. Obviously in 3D space, the concept of which way is up or forward is completely arbitrary. We&#8217;ve got 3 axis, one for each spatial dimension, universally named X, Y, and Z. You can arrange these any [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66],"tags":[],"class_list":["post-22965","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\/22965","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=22965"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/22965\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=22965"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=22965"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=22965"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}