{"id":15956,"date":"2012-05-23T04:57:58","date_gmt":"2012-05-23T09:57:58","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=15956"},"modified":"2013-09-22T15:56:31","modified_gmt":"2013-09-22T20:56:31","slug":"project-octant-part-11-shaders","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=15956","title":{"rendered":"Project Octant Part 11: Shaders"},"content":{"rendered":"

octant10_16.jpg<\/td><\/tr><\/table><\/p>\n

The texture stretching on these blobs is pretty annoying. There’s no good<\/em> way to fix this without shaders. So let’s use shaders. As I’ve mentioned before, shaders are special programs that run on your graphics card. It goes something like this:<\/p>\n

octant11_1.png<\/td><\/tr><\/table><\/p>\n

Now, that’s actually a simplified view. A more accurate flowchart is:<\/p>\n

octant11_2.jpg<\/td><\/tr><\/table><\/p>\n

And even this is a bit of a simplification. It leaves out things like driver layers. Unless something goes horribly wrong, I shouldn’t need to think about all that stuff. You generally don’t need to worry about drivers unless you’re working on the bleeding edge and getting really close to the hardware. I’m talking John Carmack<\/a> distance here, where your code is so close to the hardware that the fan on your graphics card starts shaving off your eyebrows. <\/p>\n

This means I’m going to have to write two new programs: A vertex shader and a pixel shader. (The later is called a “fragment shader” by programmers who are trying to impress you with their mysterious and esoteric knowledge.) I can write these programs in one of three different languages:<\/p>\n

    \n
  1. NVIDIA cg<\/strong>. This is a shading language made by NVIDIA. In theory it follows some sort of standard that should make it work on ATI hardware as well, although I have my doubts. I used this on Project Frontier because I was familiar with it and because I already had the SDK. It’s probably not a great platform to use for this. In fact, I suspect the problems people are having (purple foliage, artifacting on the grass polygons) are the result of using this NVIDIA system on ATI hardware. It’s entirely possible that the cg shaders don’t work for the same reason that the Microsoft webpage doesn’t work in Firefox. Maybe not. Maybe it’s just a stupid bug that doesn’t happen on my machine. It doesn’t matter. The upshot is, we’re not using the NVIDIA toolkit for this project.\n<\/li>\n
  2. HLSL<\/strong>: “High Level Shader Language”. This is the Direct 3D way of doing things. If you’re going for a Microsoft platform using Microsoft tools, then this is your go-to language. I’m using OpenGL, which leaves us with…\n<\/li>\n
  3. GLSL<\/strong>: The “OpenGL Shader Language”. This is obviously the way to go for my OpenGL -based project.\n<\/li>\n<\/ol>\n

    Right off the bat, I can see something is wrong here. These docs<\/a> on GLSL are an absolute mess. The wiki<\/a> is even worse. If you ever Google something and find forum posts listed above the official documentation in the search order, you know you are sailing right into the inky black void near the edge of the map, a place that would be labeled “here be dragons” if not for the fact that the link to the map itself is a 404. <\/p>\n

    Searching for example programs isn’t very helpful either. There are two kinds of example programs:<\/p>\n

      \n
    1. Ultra-simple test programs: Here is how to create a flat-shaded, un-textured, colorless, unlit polygon. These little three-line programs can’t teach you anything because they don’t DO anything.\n<\/li>\n
    2. Super-complex programs for a very specific purpose: Here is how to do toon shading on a bump-mapped, multi-textured, reflective surface with a specular map and fresnel shading. These programs are just pages of un-commented equations and are too advanced and specific to be used to learn how to do anything.<\/li>\n<\/ol>\n

      <\/a>Which leaves us with forums. Here is how things work on programming forums:
      \n
      \nALLEN: Hi, I’m new to driving and I need to move my car back around 5 meters. How can I move the car backwards?<\/p>\n

      (2 days later.)<\/p>\n

      ALLEN: Hello? This is still a problem. I’m sure someone knows how to do this.<\/p>\n

      BOB: I can’t believe you didn’t figure this out yourself. Just take your foot off the gas and let the car roll backwards down the hill. Tap the bake when you get to where you want to be. Boom. Done.<\/p>\n

      ALLEN: But I’m not on a hill. I’m in my driveway and it’s completely flat.<\/p>\n

      CARL: Dude, I don’t know what you’re trying to accomplish, but you should never be driving backwards. It’s dangerous and will confuse the other drivers. See the big window in FRONT of you? That’s your first clue. Don’t drive backwards.<\/p>\n

      ALLEN: I’m not trying to drive backwards. I just need to move back a little bit so I can get out of my driveway and start driving forwards.<\/p>\n

      CARL: So just drive in circle until you’re pointed the right way.<\/p>\n

      ALLEN: I don’t have enough room to turn around like that. I only need to move back a few meters. I don’t understand why this has to be so hard.<\/p>\n

      CARL: Sounds like your “driveway” isn’t compatible with cars. It’s probably made for bikes. Call a contractor and have them convert some of your yard into driveway to be standards-compliant with the turning radius of a car. Either way, you’re doing something wrong.<\/p>\n

      DAVE: I see your problem. You can adjust your car to move backwards by using the shifter. It’s a stick located right between the passenger and driver seats. Apply the clutch and move the stick to the “R” position.<\/p>\n

      ALLEN: But.. I don’t have a clutch. And there isn’t a stick between the seats. <\/p>\n

      CARL: Sounds like you’re trying to drive in Europe or something. <\/p>\n

      ALLEN: Ah. Nevermind. I figured it out.<\/p>\n

      <\/b><\/p>\n

      The other major source of help that I find is… PDF files. And not good PDF files either. These are stupid, primitive documents that take forever to load, don’t have hyperlinks, don’t allow copy & paste, and don’t allow links to specific parts of the document. So when Google points me at the document with the promise that it might contain what I’m looking for, I have to do another<\/em> search inside this document to find the topic, and then read this infuriating mess to see if it actually has the goods. (It doesn’t.) Like all PDFs, my only view options seem to be “too tiny to read” or “waste 75% of my screen space”. <\/p>\n

      Instead of scrolling through a document, you have to scroll down, turn page, scroll up again, then back down, then turn the page again. This is even more infuriating because most PDFs are written either under the assumption that you’re a scientist trying to simulate the behavior of light on the quantum level, or that you’ve never seen a computer before. Sometimes they shift between these two assumptions within the same document. <\/p>\n

      Dear dudes who make PDFs for on the web: Please look into HTML. I promise it’s documented WAY better than the stuff you’re documenting.<\/em><\/p>\n

      You’re trying to figure out how to do something you know is simple, and you just need a bit of help with the syntax. And the top search results are all like the thread above: Long exchanges filled with misinformation and bad advice which you must read all the way to the end before you discover it doesn’t have what you need. <\/p>\n

      As an example of the many, many mysteries I had to unravel: I wanted to add texture mapping to my vertex shader. Which means I need access to the texture coordinates. This is a very simple thing to do – once you know how<\/em>. Hilariously, the manual pages<\/a> don’t list them under “built-in variables”. And after searching around some more, I find there are actually two different<\/em> built-in variables for getting texture coords. I find these in example code. So now I see how to make a program that works, but I don’t know why there are two different sets of variables, how they differ, or how to use them properly. Hours later I’m working on something else and I run into a PDF that mentions the two variables exist because one is what the vertex shader GETS from OpenGL, and the other is what the vertex shader GIVES to the pixel shader. See? Simple and clear. This is something I should be able to find by typing “GLSL texture coords” into Google, not embarking on some Professor Layton-esque adventure of inscrutable puzzles provided by unhelpful idiots. <\/p>\n

      So now I have something that works, and I PROBABLY know what I’m doing, but I don’t really have a clear working knowledge. For example, at one point I was setting values in the vertex shader and they weren’t going to the pixel shader. Again, it was probably something trivial to fix, but without a proper manual I could be making a dozen really stupid mistakes that just happen to “work anyway”. Doing things this way is like taking Carl’s advice and paving my yard. It solves the problem while leaving me ignorant.<\/p>\n

      This is not a programming language. This is folk knowledge. <\/em><\/p>\n

      I spend hours fooling around, trying to find the information I want. I manage to get something working. <\/p>\n

      octant11_3.jpg<\/td><\/tr><\/table><\/p>\n

      You might remember last time I said I needed surface normals. I wrote some code to calculate all the possible normals for my 256 cube configurations. I actually had it print these out into a text file, as C++ code. Like this:<\/p>\n

      \r\nstatic float norm_table[256][16] = \r\n{\r\n{-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1},  \/\/ 0\r\n{0.785398,0.785398,0.785398,-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1},  \/\/ 1\r\n{-0.785398,0.785398,0.785398,-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1},  \/\/ 2\r\n{0,2.35619,2.35619,0,2.35619,2.35619,-1, -1, -1, -1, -1, -1, -1, -1, -1, -1},  \/\/ 3\r\n{-0.785398,-0.785398,0.785398,-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1},  \/\/ 4\r\n{0.785398,0.785398,0.785398,0.12634,0.12634,0.785398,-1, -1, -1, -1, -1, -1, -1, -1, -1, -1},  \/\/ 5<\/pre>\n
      Yes, with curly braces and everything.  I wrote code to make code, which I then copy & pasted into a header file.  (The negative ones at the end of each line are used to mark the end of the list.  I did it this way because that keeps it consistent with how the marching cubes code works. (The stuff I swiped from online.) It wasn’t until just now that I realized this could lead to a bug:  Any walls that face due west (which would be a normal of -1, 0, 0) would end the list.  And yet, I’m not seeing any problem with western-facing walls.  Actually, why isn’t<\/em> this a bug? Why does this system work at all? I’ll have to investigate when I’m done with this post.)<\/p>\n
      Anyway. <\/p>\n
      So when two cubes are beside each other, they need to share verts.  To make the surfaces nice and rounded, their normals must be averaged together.  Right now I’m just adding them together. Other programmers will notice that this should result in normals that are no longer normalized. I actually send the normals off to the GPU in this state, and have the vertex shader normalize them on the way in. <\/p>\n
      I love that the GPU is so fast that it’s more efficient to have the GPU normalize them EVERY FRAME as opposed to having the CPU normalize them ONCE. It’s a mad world.<\/p>\n
      octant11_4.jpg<\/td><\/tr><\/table><\/p>\n
      Am I really 1,800 words into this entry? Shameful.  Let’s wrap this up. <\/p>\n
      You know, there are a lot of things I wanted to try once I got my hands on some shaders.  I wanted to mess with better lighting, maybe get some fog going. But I’m going to set this aside.  This project is about doing fun stuff, and mining forum threads and PDF files for basic information isn’t very giggle-inducing. <\/p>\n
      I’m not sure why it’s so hard to find what you need with GLSL.  There are several versions of the help system for OpenGL itself, and they’re all pretty good.  Sure, they have a severe case of 1998 web design, but that’s actually a plus when you’re dealing with documentation.  But the GLSL pages have the usability of obfuscated c<\/a> printed in wingdings. <\/p>\n
      Let’s work on something else for now and leave the shader stuff for later.  <\/p>\n","protected":false},"excerpt":{"rendered":"
      The texture stretching on these blobs is pretty annoying. There’s no good way to fix this without shaders. So let’s use shaders. As I’ve mentioned before, shaders are special programs that run on your graphics card. It goes something like this: Now, that’s actually a simplified view. A more accurate flowchart is:<\/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":[233],"class_list":["post-15956","post","type-post","status-publish","format-standard","hentry","category-programming","tag-octant"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/15956","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=15956"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/15956\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=15956"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=15956"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=15956"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}