{"id":11318,"date":"2011-04-10T06:50:52","date_gmt":"2011-04-10T11:50:52","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=11318"},"modified":"2011-04-10T15:45:36","modified_gmt":"2011-04-10T20:45:36","slug":"lets-code-part-16-fun-with-shaders","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=11318","title":{"rendered":"Let&#8217;s Code Part 16: Fun with Shaders"},"content":{"rendered":"<p><table   class=\"\" cellpadding='0' cellspacing='0' border='0' align='center'><tr><td><a href='http:\/\/www.sea-of-memes.com\/LetsCode16\/LetsCode16.html'><img src='https:\/\/www.shamusyoung.com\/twentysidedtale\/images\/letscode1.jpg' class='insetimage'   alt='letscode1.jpg' title='letscode1.jpg'\/><\/a><\/td><\/tr><\/table><br \/>\nIt&#8217;s been a while since I talked about this series, but Goodfellow has been putting out a steady supply of really interesting work while my attention has been <a href=\"?p=10750\">elsewhere<\/a>. Part 16 of the series is <a href=\"http:\/\/www.sea-of-memes.com\/LetsCode16\/LetsCode16.html\">now up<\/a>, and it&#8217;s full of interesting ideas.  Let me give a cliff notes version of what he&#8217;s doing:<!--more--><\/p>\n<p>Sending data to your graphics card is slow.  (Relatively speaking.)  Your graphics card is sort of like another computer.  It has its own memory and its own processors. Your PC sends it a fat wad of data describing the position of the polygons in the world, and the GPU (your graphics card) has a jolly good think.  When it&#8217;s done, it sends back the finished image. (Basically.)  The problem is: There&#8217;s a limit to how fast data can be moved between the two.  It&#8217;s like two bustling cities with vast ten-lane highway systems, but between the two is just a dirt lane. <\/p>\n<p>The traffic between these places is measured in bytes. One byte can hold an integer from 0 to 255.  That&#8217;s it.  In C++, you can make a variable to do exactly this.  If you&#8217;ve got two bytes, you can store values from 0 to 65535. Most of the time in graphics programming, we&#8217;re using variables called <tt>float<\/tt>.   A <tt>float<\/tt> is 4 bytes, and can store non-integer numbers like 3.14 or 0.00001.  When you send a vertex off to be rendered, it needs 3 <tt>float<\/tt> values, one for the x, y, and z values that say where the vertex is located.  At four bytes each, that works out to 12 bytes.  We also need three more <tt>float<\/tt>s to describe the texture. And we need three more for the surface normal, which is used to describe which <em>way<\/em> this vertex is facing, for the purposes of lighting. <\/p>\n<p>That&#8217;s nine <tt>float<\/tt> values.  At 4 bytes each, that&#8217;s 36 total bytes.  If you try to render an object with 1,000 vertex points (chump change) you need 36,000 bytes, which is just over 35 kilobytes. Again, not a big deal.  But once you start pumping millions of the dang things through the system you end up with a horrible bottleneck.  You can send that data every frame and clog up your dirt road, or you can try to store it all on the graphics card and eat up all your GPU memory, but either way, you&#8217;re dealing with a glut of data.<\/p>\n<p>But Goodfellow has implemented are really clever idea. Unlike more traditional games, a Minecraft-style world is made from cubes that are (assuming the programmer is not an idiot) exactly 1 unit in size.  So even though you&#8217;re using <tt>float<\/tt> values that can store stuff like &#8220;12,552.08423&#8221;, the values are all 1.0, 2.0, 3.0, and so on.  They&#8217;re simple whole numbers.  They would fit in a single byte. In fact, less than a byte.  You don&#8217;t even need the whole byte.  Likewise, surface normals are usually able to define verticies facing any direction &#8211; you can make a sphere that is smoothly shaded.  However, we&#8217;re rendering cubes, and the sides of a cube face in one of six different directions.  Instead of three <tt>float<\/tt>s at four bytes each, we only need <em>part<\/em> of a byte.  <\/p>\n<p>So what he&#8217;s doing is reducing all of these values to integers, and &#8220;packing&#8221; them together.  That is, several different pieces of data are sharing a single byte.  <\/p>\n<p>Imagine a guy doing the books for his company.  In most cases. he&#8217;d fill in each bit of paperwork with the employee&#8217;s full name.  But because of some freak of luck or extreme nepotism, everyone at the company is named either Adams, Smith, or Zoidberg. He can then save himself some hassle by filling out the paperwork with A, S, or Z as the last name, as long as they translate it back into the full last name when they go to fill out the paycheck.  <\/p>\n<p>Now, this takes some extra thinking on the part of both the CPU and GPU. Goodfellow has to write his game to condense everything into this shorthand.  Then he has to write another program for the GPU (called the &#8220;shader&#8221;) that will take the shorthand and turn it back into the full 36 bytes of data for rendering. <\/p>\n<p>I&#8217;ve never heard of anyone doing something like this.  I would normally be worried that a process like this would slow things down, but it turns out that Minecraft-style rendering isn&#8217;t really taxing the GPU. It has plenty of time for this sort of business. (Remember, the GPU&#8217;s of today are made to draw bump-mapped polygons with several textures and all kinds of exotic lighting effects on them.  Simply drawing flat cube faces leaves the GPU feeling bored and under-appreciated. <\/p>\n<p>So he&#8217;s getting all this for &#8220;free&#8221;.  <\/p>\n<p>There&#8217;s a lot more going on.  Be sure to check out the <a href=\"http:\/\/www.sea-of-memes.com\/LetsCode16\/LetsCode16.html\">full article<\/a>. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>It&#8217;s been a while since I talked about this series, but Goodfellow has been putting out a steady supply of really interesting work while my attention has been elsewhere. Part 16 of the series is now up, and it&#8217;s full of interesting ideas. Let me give a cliff notes version of what he&#8217;s doing:<\/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-11318","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\/11318","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=11318"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/11318\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=11318"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=11318"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=11318"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}