{"id":23380,"date":"2014-06-23T23:19:59","date_gmt":"2014-06-24T04:19:59","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=23380"},"modified":"2014-06-23T23:25:51","modified_gmt":"2014-06-24T04:25:51","slug":"project-unearth-part-1-shadow-of-the-occluder","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=23380","title":{"rendered":"Project Unearth Part 1: Shadow of the Occluder"},"content":{"rendered":"<p>We&#8217;re here to work on shaders, but we can&#8217;t very well just start writing code without blathering on for a thousands words about random things. I mean, <strong>I<\/strong> can&#8217;t. How you program is your business.<\/p>\n<h3>Code re-use<\/h3>\n<p>I&#8217;ve written all this before. In <a href=\"?p=15742\">Project Octant<\/a> I made a block world. <\/p>\n<p>I will say that to a certain extent &#8220;code re-use&#8221; is overrated. Not to say that it&#8217;s not incredibly important. It&#8217;s just not the end-all-be-all of software engineering. Sure, it&#8217;s nice to be able to make use of code you wrote in the past.  But it&#8217;s also really nice to be able to write a more perfect version of something. Every time you attack a problem you understand it a little better, and every solution is just a little lighter and cleaner than the last. Yes, you can gradually improve something you&#8217;ve already written, but there&#8217;s nothing like a re-write to let you really fix structural problems. <\/p>\n<p>I&#8217;ve discovered that re-writes aren&#8217;t nearly as expensive as they seem. They&#8217;re mentally daunting and often boring because it feels like busywork, but if you wrote the previous code and you&#8217;ve still got the structure rolling around inside your noggin, then re-writing isn&#8217;t that much worse than re-typing. <\/p>\n<p>Of course, all of this is only true to a point. If I was working on some behemoth like the Crysis engine I wouldn&#8217;t be able to get away with re-writing. The job is too big, too interconnected, and it&#8217;s so complicated I&#8217;d never have the whole thing in my head at once anyway. <\/p>\n<p>Still, I have to say that re-writes have a lot of good points. This new version of the cube-based world is shorter, cleaner, and clearer than my last attempt. And I&#8217;d be lying if I said that didn&#8217;t feel good.I guess re-writes are kind of decadent: The work of someone who is able to polish their code instead of being obliged to ship something useful. <\/p>\n<p>And now&#8230;<\/p>\n<h3>A Brief History of Shadows<\/h3>\n<p><!--more-->Let&#8217;s talk about why I&#8217;m doing this. <\/p>\n<p>Back in Ye Olden Thymes, when buxom barmaids served flaggons of ale to world-weary pilgrims as they traveled from kingdom to kingdom, we had games with really terrible graphics. I mean, they didn&#8217;t even have <em>shadows<\/em>. It was a stark, ugly existence where everything was out of scale and the pixels were so big you couldn&#8217;t tell the giblets from the bullets.<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_shadow1.jpg' class='insetimage'   alt='unearth_shadow1.jpg' title='unearth_shadow1.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>I&#8217;ll be using Minecraft here to demonstrate what I&#8217;m talking about. Just to be clear, all of this is photoshopped. This is easier than digging up and playing all the old games and finding screenshots to illustrate what I&#8217;m talking about<span class='snote' title='1'>And then I resort to that later anyways.<\/span>.<\/p>\n<p>The problem with not having shadows is that everything seems kind of floaty and it&#8217;s difficult to judge scale. Eventually we discovered that if you draw a simple black circle under a character it roughly approximates having a shadow.<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_shadow2.jpg' class='insetimage'   alt='unearth_shadow2.jpg' title='unearth_shadow2.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>By putting a shadow directly under his feet we can suddenly see that the little guy is actually slightly off the ground in mid-jump, and not larger and further in the distance, which is what your eye might assume.  This trick seemed to work well, even when the light source wasn&#8217;t directly overhead. Our eyes are just used to the idea that we&#8217;ve always got shadows around the base of things. Tables, chairs, people&#8217;s legs: It&#8217;s usually darker underneath stuff. I mean, duh.<\/p>\n<p>But the little blob shadow has its drawbacks. It&#8217;s kind of cartoony and you&#8217;re missing out on some really interesting gameplay. (Shadows falling across doorways in a stealth game is a good example.)<\/p>\n<p>There were a lot of ways to half-ass this. Here is one of many:<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_shadow7.jpg' class='insetimage'   alt='unearth_shadow7.jpg' title='unearth_shadow7.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>Between frames you take something that should be casting shadows and draw it into a texture. Draw it from the point of view of the light, pure black.<\/p>\n<p><table width='107'  cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_shadow3.jpg' class='insetimage' width='107' alt='unearth_shadow3.jpg' title='unearth_shadow3.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>Then stick it on a panel, and position the panel so that it&#8217;s projected away from the light.<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_shadow4.jpg' class='insetimage'   alt='unearth_shadow4.jpg' title='unearth_shadow4.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>The bad things about this system:<\/p>\n<ol>\n<li>How many little textures do you need to draw? You need <code>number of lights<\/code> &times; <code>number of things<\/code> to cast shadows. That scales poorly, particularly when it means a lot of fiddling around to get those panels positioned properly.<\/li>\n<li>The larger the shadow, the more texture memory you need. This sucks, because there&#8217;s no upper limit on how long a shadow can be. If we&#8217;re casting a shadow at an extreme angle<span class='snote' title='2'>Like at sunset, for example.<\/span>, then we can either devour tons of memory, chop off the shadow at some arbitrary cutoff point, or lower the resolution of the texture, making the edges more pixelated.\n<li>No matter how much texture memory you use, the edges of the shadow are always a little ugly\n<li>This technique is really only useful for stand-alone objects. You would get very poor results (bordering on disastrous) if you tried to use it to have the interior walls of a building cast shadows.\n<li>The shadows &#8220;stack&#8221;. So if I&#8217;m standing in the shadow of a large object, I will cast an even darker shadow on top of it.\n<li>The shadows really only appear on fixed surfaces like floors and walls. One character isn&#8217;t going to cast a shadow on another, and the item on the table will sometimes cast this odd shadow under the table.\n<\/ol>\n<p>There are ways to mitigate these problems, but only at the expense of more processing. And no matter what you do, it always feels like a bit of a hack. I experimented with shadows like this way back in the early aughts, and I hated the entire system. For all this fiddling around, there are still situations where they look more ugly and incorrect than those cheap and easy blob shadows of yesteryear.<\/p>\n<p>This is just one shadow solution of many. And to be fair, I think this was the worst one. It&#8217;s certainly the worst one that I tried. <\/p>\n<p>For static stuff we could bake shadows in. The Quake games had shadows that were created by the level editor. They looked amazing for the time period. The drawback was that the shadows couldn&#8217;t move. If I put a shadow on some bit of moving wall or platform, then it would carry the same lighting with it whenever it moved. If I had a lift shaft that was brightly lit at the bottom and dark at the top, then it would look horrible no matter what. Either the platform would be lit at the bottom position and then seem to glow when it was at the top, or it could be lit at the top position and be jarringly dark when it got to the bottom. <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_shadow5.jpg' class='insetimage'   alt='This is a secret wall in Quake. The level is lit with the panel fitted seamlessly into the wall, where lights can&#8217;t reach that edge. So when the panel slides open, the edge remains black.' title='This is a secret wall in Quake. The level is lit with the panel fitted seamlessly into the wall, where lights can&#8217;t reach that edge. So when the panel slides open, the edge remains black.'\/><\/td><\/tr><tr><td class='insetcaption'>This is a secret wall in Quake. The level is lit with the panel fitted seamlessly into the wall, where lights can&#8217;t reach that edge. So when the panel slides open, the edge remains black.<\/td><\/tr><\/table><\/p>\n<p>John Carmack called this the &#8220;Hanna-Barbera effect&#8221;. All animators suffered from this to some degree. Even Disney. But HB &#8211; who were pretty <a href=\"https:\/\/www.youtube.com\/watch?v=XWo5aUzJ4_c\" title=\"THE COLLAR (The Big Picture)\">aggressive and inventive with their cost-cutting<\/a> &#8211; were particularly bad about it. The moving scene details would be flatter and simpler than the more lavishly drawn static backgrounds, which made them stand out. You could tell ahead of time that the precipice of rock was going to fall away when someone stepped on it, because the rock didn&#8217;t match the rest of the scene in terms of lighting and color. <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_shadow6.jpg' class='insetimage'   alt='What is going on with this wooden floor? Is it supposed to be polished? (It&#8217;s not a reflection.) Or are those shadows? (They&#8217;re too bright.) Or are the colored patterns supposed to be marks on the floor? (They don&#8217;t look like it.)<\/p>\n<p>Anyway.<\/p>\n<p> The rake in the foreground is drawn flat-color while the background is drawn using fancier shading. This makes the rake stand out, so it&#8217;s obvious it will be a moving object in the upcoming scene.' title='What is going on with this wooden floor? Is it supposed to be polished? (It&#8217;s not a reflection.) Or are those shadows? (They&#8217;re too bright.) Or are the colored patterns supposed to be marks on the floor? (They don&#8217;t look like it.)<\/p>\n<p>Anyway.<\/p>\n<p> The rake in the foreground is drawn flat-color while the background is drawn using fancier shading. This makes the rake stand out, so it&#8217;s obvious it will be a moving object in the upcoming scene.'\/><\/td><\/tr><tr><td class='insetcaption'>What is going on with this wooden floor? Is it supposed to be polished? (It&#8217;s not a reflection.) Or are those shadows? (They&#8217;re too bright.) Or are the colored patterns supposed to be marks on the floor? (They don&#8217;t look like it.)<\/p>\n<p>Anyway.<\/p>\n<p> The rake in the foreground is drawn flat-color while the background is drawn using fancier shading. This makes the rake stand out, so it&#8217;s obvious it will be a moving object in the upcoming scene.<\/td><\/tr><\/table><\/p>\n<p>So you&#8217;ve got all these different shadow and lighting techniques. One is good for small stuff that moves. Another is good for static walls. Another is great for objects that need to receive light but don&#8217;t need to cast shadows. So you&#8217;d have all these different lighting systems, and they didn&#8217;t really interact intuitively. <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/unearth_doom3.jpg' class='insetimage'   alt='I know it&#8217;s popular to dump on this game, but I still really dig the first half or so.' title='I know it&#8217;s popular to dump on this game, but I still really dig the first half or so.'\/><\/td><\/tr><tr><td class='insetcaption'>I know it&#8217;s popular to dump on this game, but I still really dig the first half or so.<\/td><\/tr><\/table><\/p>\n<p>One of the breakthroughs of Doom<sup>3<\/sup> was the unified lighting model: It was designed to do away with these various hacks and tricks. There wasn&#8217;t one technique for walls and another for furniture (with a special side-case of usable items) and another for people. There was one pipeline for everything. <\/p>\n<p>This has an interesting effect on complexity. The unified lighting system was at least as complicated as what came before, but all of that complexity, once managed, could be shoved into a box and you could forget all about it. You didn&#8217;t have special case-checking right in the middle of the game code, and the artists just had to concern themselves with a few basic rules<span class='snote' title='3'>Limits on the number of lights shining on a particular surface, for example.<\/span> and not have to be aware of the more technical systems underneath. Art was as challenging as ever and the code was as complex as ever, but the two were no longer mixed together in a big soup of compromises, exceptions, and special-case uses. <\/p>\n<p>I really like this, and I think it&#8217;s a good place to start messing around with advanced shaders. The techniques and theory are pretty well documented, so I shouldn&#8217;t need to invent anything new. <\/p>\n<p>Onward.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>We&#8217;re here to work on shaders, but we can&#8217;t very well just start writing code without blathering on for a thousands words about random things. I mean, I can&#8217;t. How you program is your business. Code re-use I&#8217;ve written all this before. In Project Octant I made a block world. I will say that to [&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-23380","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\/23380","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=23380"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/23380\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=23380"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=23380"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=23380"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}