{"id":10209,"date":"2010-12-19T10:02:41","date_gmt":"2010-12-19T15:02:41","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=10209"},"modified":"2010-12-19T10:04:35","modified_gmt":"2010-12-19T15:04:35","slug":"lets-code-part-4","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=10209","title":{"rendered":"Let&#8217;s Code, Part 4"},"content":{"rendered":"<p><a href=\"http:\/\/www.sea-of-memes.com\/LetsCode4\/LetsCode4.html\">Craft of Craftcraft is done<\/a>!<\/p>\n<p>Actually, that was a lie. It is, in fact, not remotely done. Which is good, since you can read about <a href=\"http:\/\/www.sea-of-memes.com\/LetsCode4\/LetsCode4.html\">the steps being taken<\/a> to correct the fact that it is not done.<\/p>\n<p>In this entry Michael explains the z-buffer. Let me take a crack at the same thing, because I enjoy doing it&#8230;<\/p>\n<p><!--more--><br \/>\nSo you&#8217;re there, rendering polygons, and you want to make sure that stuff in the background is properly obscured by the things in front of it.  In the old days, it was a lot like painting with oil-based paints.  You had to paint the far away details first, and gradually layer on things closer and closer to the viewer, covering up the stuff you painted before.  <\/p>\n<p>Of course, we&#8217;re talking about computer rendering here, so we&#8217;re trying to make a new painting 30 times a second. (Eat your heart out, <a href=\"http:\/\/en.wikipedia.org\/wiki\/Bob_Ross\">Bob Ross<\/a>.) The problem with drawing the world back-to-front, is that players insist on always moving around all the time.  This means that you have to keep re-calculating the distances to all of the stuff to be rendered and then re-sorting them.  That&#8217;s expensive even today, and back in the (very) early 90&#8217;s,  computers had even less CPU time to waste on this sort of business. <\/p>\n<p>Enter the z-buffer.  (Sometimes called the depth buffer, because programmers are never happy until they have eleven different names for everything.) Imagine that we have two canvases.  One is the rendering buffer, where we will paint our picture.  <\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/zbuffer1.jpg' class='insetimage'   alt='zbuffer1.jpg' title='zbuffer1.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>The other is the z-buffer, where we will record how far away things are. Now, the z-buffer is never shown to the user, but you can think of it as a grayscale image.<\/p>\n<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/zbuffer2.jpg' class='insetimage'   alt='zbuffer2.jpg' title='zbuffer2.jpg'\/><\/td><\/tr><\/table><\/p>\n<p>Every time we draw a pixel in the render buffer, we draw a pixel in the z-buffer as well, recording how far away that pixel is. In our example, farther = brighter.  If we ever run into a situation where we would be drawing a brighter pixel over a darker one in the z-buffer, then we skip drawing it and neither the z-buffer or the render buffer are changed.  <\/p>\n<p>Once the painting is done, you wipe the z-buffer clean and start over.  <\/p>\n<p>But that only solves half of your problems.  If you want to draw transparent stuff (like windows) then you need both a z-buffer <em>and<\/em> sorting to make it look right.  <a href=\"http:\/\/www.sea-of-memes.com\/LetsCode4\/LetsCode4.html\">Check out the Let&#8217;s Code entry<\/a> to read the rest of that puzzle.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Craft of Craftcraft is done! Actually, that was a lie. It is, in fact, not remotely done. Which is good, since you can read about the steps being taken to correct the fact that it is not done. In this entry Michael explains the z-buffer. Let me take a crack at the same thing, because [&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-10209","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\/10209","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=10209"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/10209\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10209"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10209"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10209"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}