{"id":3182,"date":"2014-05-18T23:34:14","date_gmt":"2014-05-18T13:34:14","guid":{"rendered":"http:\/\/www.vectorstorm.org\/?p=3182"},"modified":"2014-05-18T23:34:14","modified_gmt":"2014-05-18T13:34:14","slug":"lines","status":"publish","type":"post","link":"https:\/\/www.vectorstorm.com.au\/2014\/05\/18\/lines\/","title":{"rendered":"Lines"},"content":{"rendered":"<p>For me first week of full-time work on MMORPG Tycoon 2, I&#8217;ve been upgrading the VectorStorm engine to render using an OpenGL 3 core profile.\u00a0 This gives a number of benefits;\u00a0 most notably a vast simplification to managing the capabilities of different drivers.\u00a0 Previously, we supported two different rendering paths (OpenGL 1.2 or 2.1), and the 2.1 rendering path had a whole suite of different extensions which may or more not be supported on any particular piece of hardware, and so needed to be detected and wrangled individually.<\/p>\n<p>For VectorStorm, there is one big downside to switching to OpenGL 3, though &#8212; in version 3, OpenGL has deprecated the ability to render wide lines.\u00a0 Note that &#8216;deprecated&#8217; is OpenGL code for &#8216;removed with caveats&#8217;.\u00a0 This is a shame, because we were using OpenGL&#8217;s wide line drawing in order to draw our bold lines;\u00a0 under OpenGL 3, we can only draw lines which are a single pixel wide..\u00a0 So I&#8217;ve been working on a new line rendering system which will treat lines more nicely.<\/p>\n\n\t\t<style type=\"text\/css\">\n\t\t\t#gallery-1 {\n\t\t\t\tmargin: auto;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-item {\n\t\t\t\tfloat: left;\n\t\t\t\tmargin-top: 10px;\n\t\t\t\ttext-align: center;\n\t\t\t\twidth: 33%;\n\t\t\t}\n\t\t\t#gallery-1 img {\n\t\t\t\tborder: 2px solid #cfcfcf;\n\t\t\t}\n\t\t\t#gallery-1 .gallery-caption {\n\t\t\t\tmargin-left: 0;\n\t\t\t}\n\t\t\t\/* see gallery_shortcode() in wp-includes\/media.php *\/\n\t\t<\/style>\n\t\t<div id='gallery-1' class='gallery galleryid-3182 gallery-columns-3 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/GL2.png'><img width=\"150\" height=\"150\" src=\"https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/GL2-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-3183\" srcset=\"https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/GL2-150x150.png 150w, https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/GL2-50x50.png 50w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-3183'>\n\t\t\t\tOriginal OpenGL 2.1\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/First.png'><img width=\"150\" height=\"126\" src=\"https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/First-150x126.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-3184\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-3184'>\n\t\t\t\tFirst Attempt in OpenGL 3\n\t\t\t\t<\/dd><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/Second.png'><img width=\"150\" height=\"150\" src=\"https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/Second-150x150.png\" class=\"attachment-thumbnail size-thumbnail\" alt=\"\" loading=\"lazy\" aria-describedby=\"gallery-1-3185\" srcset=\"https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/Second-150x150.png 150w, https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/Second-50x50.png 50w\" sizes=\"(max-width: 150px) 100vw, 150px\" \/><\/a>\n\t\t\t<\/dt>\n\t\t\t\t<dd class='wp-caption-text gallery-caption' id='gallery-1-3185'>\n\t\t\t\tSecond Attempt in OpenGL 3\n\t\t\t\t<\/dd><\/dl><br style=\"clear: both\" \/>\n\t\t<\/div>\n\n<p>The leftmost image here shows a magnified version of the cursor from the current development trunk of MMORPG Tycoon 2.\u00a0 The outline of the cursor is okay (or at least, I&#8217;ve been happy enough with it to ship three milestone builds using it), but the corners are a little odd, particularly when viewed this close;\u00a0 it&#8217;s pretty obvious that the outline is made up of a bunch of rectangles.<\/p>\n<p>So while setting up OpenGL 3, I spent some time trying to be smart about building rectangles to represent a thick line.\u00a0 The middle image shows my first attempt at it, which I thought was mostly okay, apart from being oddly thin around sharp corners.\u00a0 To a casual glance, the irregularity was pretty subtle and probably acceptable, but under magnification, it&#8217;s pretty obviously doing something very strange and bad.\u00a0 This version is basically triangulating line as if it was a smooth ribbon;\u00a0 bending it around as it goes, trying to make it face the camera as best as possible at each point.\u00a0 I use this approach for lots and lots of things, including for the body of the cursor itself.\u00a0 But it turns out that this approach simply doesn&#8217;t work reliably for lines.\u00a0 So my next attempt (the rightmost image) did things properly;\u00a0 the line segments are treated as absolutely straight, and maintain width precisely, including performing collision tests to find where the edges of a wide line intersect, at corners.\u00a0 I think this is a much better approach!<\/p>\n<p>If you view that third image full-size, you&#8217;ll see that the tip of the arrow isn&#8217;t yet being handled correctly;\u00a0 that&#8217;s because the outline is drawn as a loop, both starting and ending at that point.\u00a0 The code doesn&#8217;t yet realise that the cursor outline is a loop, so it just puts square rectangular ends on both ends of the line.\u00a0 Fixing that is next up on my list.<\/p>\n<p>I still need to do a little more work to figure out exactly how this line-drawing system will best fit into the VectorStorm library.\u00a0 It&#8217;s complicated because some lines (2D ones, mostly) could theoretically be built just once, and then remain static, whereas 3D ones need to be re-generated each time the camera moves, in order to make sure their triangles are always facing the camera.\u00a0 The raw &#8216;LineList&#8217;, and &#8216;LineStrip&#8217; rendering commands probably go away entirely, and you&#8217;ll instead need to create lines using some new drawing primitive which is able to do these calculations on the fly, to build renderable line geometry on demand.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>For me first week of full-time work on MMORPG Tycoon 2, I&#8217;ve been upgrading the VectorStorm engine to render using an OpenGL 3 core profile.\u00a0 This gives a number of benefits;\u00a0 most notably a vast simplification to managing the capabilities of different drivers.\u00a0 Previously, we supported two different rendering paths (OpenGL 1.2 or 2.1), and&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3185,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":""},"categories":[3],"tags":[],"jetpack_featured_media_url":"https:\/\/www.vectorstorm.com.au\/wp-content\/uploads\/2014\/05\/Second.png","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/so9WK-lines","_links":{"self":[{"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/posts\/3182"}],"collection":[{"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/comments?post=3182"}],"version-history":[{"count":2,"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/posts\/3182\/revisions"}],"predecessor-version":[{"id":3187,"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/posts\/3182\/revisions\/3187"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/media\/3185"}],"wp:attachment":[{"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/media?parent=3182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/categories?post=3182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vectorstorm.com.au\/wp-json\/wp\/v2\/tags?post=3182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}