{"id":12362,"date":"2011-07-15T11:15:43","date_gmt":"2011-07-15T16:15:43","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=12362"},"modified":"2011-07-15T12:10:20","modified_gmt":"2011-07-15T17:10:20","slug":"project-frontier-17-feature-dump","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=12362","title":{"rendered":"Project Frontier #17: Feature Dump"},"content":{"rendered":"<p>Okay, this series has fallen way behind. I basically spent an entire week writing about one day of work, so to get caught up I need to cover a week of work in one day.  Let&#8217;s get started.<\/p>\n<p>But before we begin: IGNORE THE SILHOUETTE GUY HE IS PLACEHOLDER ART. ANYONE CAUGHT CRITIQUING PLACEHOLDER ART WILL BE BEATEN WITH A 1987 VINTAGE MONOCHROME MONITOR. THANK YOU.<\/p>\n<h3>Day \/ Night Cycle<\/h3>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier17_1.jpg' class='insetimage'   alt='frontier17_1.jpg' title='frontier17_1.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>The sky has become significantly more complicated since I wrote about it back in <a href=\"?p=12038\">part six<\/a>.  <\/p>\n<p><!--more-->We still have the original cone, which is used to create the fade.  Then we have a canopy that I use for the star texture.  Imagine you and a friend have a bedsheet by the corners, and you quickly lower it to the floor.  The corners are flat, but there is still a bit of air trapped in the middle.  That&#8217;s the shape of my sky, which has a star texture painted onto it.  This shape is sub-optimal, because you can see the <a href=\"http:\/\/en.wikipedia.org\/wiki\/Perspective_(graphical)#Foreshortening\">foreshortening<\/a> on the stars.  In the distance, they are tiny dots.  Overhead, they are big blurry messy dots.  In between, you&#8217;re looking at them at an angle and they end up looking disk-shaped.  On the horizon they are numerous and tiny.  Overhead they are large and sparse. It still looks nice, but it could look better.<\/p>\n<p>I seriously considered using a scattering of square panels floating in the sky, as Michael Goodfellow discussed way back in <a href=\"http:\/\/www.sea-of-memes.com\/LetsCode4\/LetsCode4.html\">part 4<\/a> of his project.  His is a superior method, since none of the stars end up being stretched out.  <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier17_2.jpg' class='insetimage'   alt='frontier17_2.jpg' title='frontier17_2.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>As it gets dark, this star canopy gradually fades in.  There is a huge billboard on the western and eastern side of the sky.  At sunrise \/ sunset, the appropriate billboard fades in.  The texture on the billboard is just a big fuzzy blob of light &#8211; bright in the center, dark at the edges.  I render it so that half of the billboard falls below the horizon.  In the morning it&#8217;s tinted yellow, in the evening it ends up being more red.  It&#8217;s laughably simple from a simulation point of view, but it sells the sunset \/ sunrise idea nicely. <\/p>\n<p>There are two aspects to the sun itself:  Where the sun appears in the sky, and where the light is <em>actually<\/em> coming from.  See, when the sun is overhead the world looks very boring.  There&#8217;s no shading to the world in the middle of the day and so everything looks kind of flat. That&#8217;s fine for a short period of time, but in a twenty-minute day\/night cycle I don&#8217;t want five whole minutes of dull lighting. (Yes, shadows would help, you relentlessly demanding taskmasters. One thing at a time.) So I have the sun move overhead at a steady pace, while the light origin stops at the 45 degree position and lingers there all morning.  (Since the sun is now overhead, it&#8217;s very, very hard to get both the sun and the landscape into view at the same time, so nobody is going to notice this discrepancy.) After midday the light origin hurries across the sky to catch up with the sun.  <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier17_3.jpg' class='insetimage'   alt='frontier17_3.jpg' title='frontier17_3.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>At sun rise \/ set, I have to pull this trick again.  Once the sun touches the horizon, the lighting would normally come in perfectly horizontal.  As it lowers, the light would actually come up from below. This looks really, really bad, and would actually wreck most shadowing systems. So what I do is have the light source stop about ten degrees above the horizon and let the sun move away on its own.  The light goes from yellow \/ red to pale blue.  Once the sun itself is gone, the light sneaks back to the eastern side of the sky, to be ready for when the sun appears the next morning. <\/p>\n<p>No, I don&#8217;t have a moon yet.<\/p>\n<h3>Vertex Shaders<\/h3>\n<p>I finally break down and add some shaders to my program, taking me from 1998-level technology to 2004-level technology.  Now I can do all of these crazy per-frame calculations to the world.  First up, I curve the points away as they near the horizon, making it appear as if we were on a spherical planet.  <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier17_4.jpg' class='insetimage'   alt='frontier17_4.jpg' title='frontier17_4.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>(This is a bit of an optical illusion.  I&#8217;m not 200 meters tall, I&#8217;m just flying way up in the air.)<\/p>\n<p>Now I don&#8217;t need some fancy-pants system of fading in blocks of terrain. (It&#8217;s pretty hard to sneak something that huge into view, no matter how you handle it.) The new terrains will just appear over the horizon.  We will still have pop-in problems with things like mountains, but screw that. You can&#8217;t make everything perfect and if you try you&#8217;ll go broke before you&#8217;re ready for alpha testing.  The pop-in isn&#8217;t that bad, and it&#8217;s rare. It&#8217;s trivial compared to the pop-in you see in Minecraft (Donk! Suddenly there is a mountain!) and nobody complains that the Minecraft pop-in is this immersion-shattering annoyance. Artistic myopia can kill a budget faster than anything else.  (Not that I have a budget.)  My pop-in should be less intrusive because the pieces it drops in are smaller, and the draw distance is further. So the things that are popping in are very small, from the player&#8217;s perspective.<\/p>\n<p>Speaking of pop-in, way back in <a href=\"?p=12061\">week 3<\/a> you could see obvious pop-in when blocks of grass would appear.  These were very close, filled a lot of the player&#8217;s view, and so looked bad.  (The fact that they were great big squares didn&#8217;t help.)  So I add a vertex shader to make grass fade in gradually. <\/p>\n<h3>Undergrowth<\/h3>\n<p>I take the grass system and make another similar system for undergrowth. <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier17_5.jpg' class='insetimage'   alt='frontier17_5.jpg' title='frontier17_5.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>As others have predicted, this makes an immense difference.  The world feels much richer and more varied.  The undergrowth actually shares the same texture as the grass, so I can draw all of them in a single pass.  Like this:<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier17_6.jpg' class='insetimage'   alt='frontier17_6.jpg' title='frontier17_6.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>The first row is flowers. The second is grass.  The last row is undergrowth.  Again, I&#8217;m not much of a pixel artist, but I did what I could.  I experimented with the bushes a bit, seeing what looked good and what didn&#8217;t.  Amazingly, bush #3 &#8211; which to my eye looks the best &#8211; doesn&#8217;t look significantly better than the others in-game.  Bush #4, which looks stupid and horrible on the texture, doesn&#8217;t look half bad within the game. Bush #1 is actually the best of the bunch.<\/p>\n<p>It takes a great deal of effort to pry myself away from this.  I could blow two days fussing with pixel art and texture maps and figuring out why some things look better than others, but I&#8217;m on a push to hammer out the technology.  For now, this is good enough and I can see that it works.  <\/p>\n<h3>Wind<\/h3>\n<p>What else can we do with vertex shaders? Hm.  You know, let&#8217;s try making the trees blow in the wind. If you remember, tree textures look like this:<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier10_8.jpg' class='insetimage'   alt='frontier10_8.jpg' title='frontier10_8.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>I can isolate any vertex that uses texture values from inside of that second panel.  I&#8217;ll check it&#8217;s distance from the center of that panel.  The further away it is, the more it moves.  I apply a rolling sine wave over the whole world and use it to push the points around.  The result?<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/frontier17_7.jpg' class='insetimage'   alt='frontier17_7.jpg' title='frontier17_7.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>Uh.  Yeah.  I guess you can&#8217;t see those moving in the screenshot.  Well too bad.  I don&#8217;t have time to make a video of it, but take my unbiased word for it: This looks awesome.  You are totally missing out by not being able to see it in action.  Really.  You poor thing.<\/p>\n<p>I try the same trick on grass, and it is also awesome.  <\/p>\n<h3>End of Week 7<\/h3>\n<p>We&#8217;re getting near the end now.  I&#8217;m planning on finishing up as much of the technology as I can in the next week, and I&#8217;ll do another video for the wrap-up.  At that point I&#8217;ll have the core technology done, and I&#8217;ll be in a position to decide what I want to do with my time. <\/p>\n<p>While using this to make a game would be nice, the important thing has been to prove that procedural development is a woefully under-developed area of study.  Yes, there&#8217;s a procedural game now and again every few years, but that&#8217;s less than 1% of all games. We haven&#8217;t even mapped out all of the things that are possible, much less harvested all of the low-hanging fruit. <\/p>\n<p>The point I want to make is that procedural techniques can allow one guy to accomplish in two months what a large team can accomplish in half a year.  Hopefully I&#8217;ve made my case.  We&#8217;ll see once the video is out.  <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Okay, this series has fallen way behind. I basically spent an entire week writing about one day of work, so to get caught up I need to cover a week of work in one day. Let&#8217;s get started. But before we begin: IGNORE THE SILHOUETTE GUY HE IS PLACEHOLDER ART. ANYONE CAUGHT CRITIQUING PLACEHOLDER ART [&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-12362","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\/12362","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=12362"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/12362\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}