<\/div>See, I’m going to be writing the lighting shader. My hope is that I’ll be able to use Unity to save me from the arduous task of writing my own shadowing system. I want buildings to be able to cast shadows on each other, the ground, and even themselves. But a cube doesn’t have any overhanging bits that might cast shadows on itself. So before I go messing around with shaders, let’s make some more complex buildings.<\/p>\n
I don’t need to make the full building generator just yet. All I need is something complex enough to self-shadow.<\/p>\n
<\/div>I’ll probably throw most of this code away later. These buildings are stupidly primitive. There’s a triangle pair for every single window, there aren’t any “gaps” with no windows, the ledges all look the same, there’s no street detail, and there isn’t any clutter on the roof. But these buildings can self-shadow, which is what counts.<\/p>\n
So let’s work on that shader…<\/p>\n
<\/p>\n
The Shader<\/h3>\n
Remember that a shader is a special program that runs on your graphics card. It’s not written in the same language as the rest of the program. If you’re using OpenGL to make your graphics, then you program your shaders in a language called GLSL. If you’re using DirectX, then you’ll write your shaders in a language called HLSL. In Unity, you’re using a modified version of HLSL. <\/p>\n
In the OpenGL world, I really dislike how messy it can get when you’re trying to manage your shaders. Rendering is usually a multi-stage process. Somewhere at the core of your program you’ll have a bit of logic to the effect of:<\/p>\n
- \n
- Grab all the FooBar objects in the scene and render them using shader A.\n
- Now take all the Widget objects and render them with Shader B.\n
- Now take all the Whatsit objects and render them with Shader A, except with a few different parameters than the ones we used for FooBars.\n
- Now take all the transparent<\/em> FooBars and and Widgets and render them with Shader C, in the order of their current distance from the camera.\n
- Now finish it off by applying Shader D to the entire screen.<\/ul>\n
I’m leaving out a lot of details, but hopefully you get the idea. The program is sending various scene elements to different shaders and when you’re looking at the C++ code you can’t see what the individual shaders do. To see that, you need to switch over to this other programming language (and maybe even a different text editor) to look at all of those scattered source files. And when you’re looking at the shader code itself you can’t tell when it gets used. You can alleviate this by liberally commenting your code and documenting the structure, but that doesn’t change the fact that some of the most intensely complex logic in your program is straddling two different languages and several different source files.<\/p>\n
In the world of Unity, they move a lot of the “what objects get drawn by which shader” logic into the shader itself, and made it so that you can bundle all of your shaders into one file. This weirded me out at first, but once I start building my shader I realized how much clearer and more manageable this system is. I really like it.<\/p>\n
ON THE OTHER HAND…<\/p>\n
The documentation<\/a> for the Unity shader language barely exists, and the parts that do exist are apparently written for people who already understand it. There’s almost no example code whatsoever. And even when it does give you a bit of code, it does so without giving you the full context of where it’s used.<\/p>\n
Car analogies are played out, so let’s try…<\/p>\n
A Baking Analogy<\/h3>\n
<\/div>Dangit. Now I want cake. I guess I should stick to car analogies.<\/div><\/p>\nI search for “How do I make chocolate cake?”. Then I wind up on the Unity documentation for Chocolate cake, where it tells me:<\/p>\n
Chocolate Cake is a kind of food. It can be made in a kitchen using ingredients. <\/p>\n
Related topics: Cupcakes, Dessert, Cooking.<\/p><\/blockquote>\n
The docs are so aggressively useless that sometimes I wonder if it wouldn’t be better if Unity just took them down so they stop poisoning the search results. (Probably not. I’m sure they very occasionally answer people’s questions.) Most of what I learned about Unity came from forum discussions<\/a>. <\/p>\n
So I read a few forums and I see people talking about “eggs”. Apparently eggs are an ingredient in chocolate cake? So I look up eggs in the docs.<\/p>\n
Eggs are an ingredient. The are frequently used in making various cakes. They should not be added during the cooking process.<\/p>\n
Related topics: Cupcakes, Chickens, Chicken breeding.<\/p><\/blockquote>\n
Okay. I see that cupcakes keep showing up in related topics. Maybe that’s<\/b> where the payload of information is.<\/p>\n
Cupcakes are a smaller type of cake. Please refer to the documentation on Chocolate Cake<\/a> for more information.<\/p>\n
Related topics: Chocolate Cake, Food, Feudalism in the 12th Century, The Moon Landing.<\/p><\/blockquote>\n
Or maybe not. <\/p>\n
Sometimes it’s even worse than this! Sometimes the only “help” I can find is one of the Unity tutorial videos<\/strong>. Regular video is bad enough, but these are archives of livestream sessions. It’s incredibly demoralizing to reach for something simple like, “Where are the options to disable [some feature]?” and the best “answer” is an hour and a half of unedited footage<\/a> for a previous version of Unity that you can’t even be sure will answer your question. This system is so bad at providing information that it borders on encryption. <\/p>\n
But after several frustrating hours of trying to break through the layers of obfuscation in the Unity documentation, I do manage to learn a few things.<\/p>\n
The Few Things I Learned<\/h3>\n
The Unity shader language forms a hierarchy. You write a single shader. That shader might contain many subshaders. Each subshader might contain multiple passes. Each pass contains a vertex shader and a fragment shader. So then you finally come across a few lines of example code in the skeletal Unity documentation, but you have no idea where this code goes within that structure. I searched for ages and I never did find just a simple example shader that the user could start with. The closest thing I could find was this:<\/p>\n
Shader \"MyShader\" {\r\n Properties {\r\n _MyTexture (\"My Texture\", 2D) = \"white\" { }\r\n \/\/ other properties like colors or vectors go here as well\r\n }\r\n SubShader {\r\n \/\/ here goes the 'meat' of your\r\n \/\/ - surface shader or\r\n \/\/ - vertex and program shader or\r\n \/\/ - fixed function shader\r\n }\r\n SubShader {\r\n \/\/ here goes a simpler version of the SubShader\r\n \/\/ above than can run on older graphics cards\r\n }\r\n}<\/pre>\nThis is supposedly an “Example” program, except it has only a single line of code (Line 3) that actually does<\/strong> something. The rest is just comments and curly braces. Lines 7-10 are a description of what sort of code might go here, without telling me what that code is or what it does. (Or where to look that up.) It’s the equivalent of, “After the ingredients are combined, put them inside of a specific container and place the container in the appropriate appliance for a length of time or until the cake is a particular color.” I swear it’s taunting me by explicitly listing the things I need to know that it refuses to tell me.<\/p>\n
Maybe elsewhere I’d find something that was supposedly an “example program” that fills in lines 7-10, but I try pasting it in and it doesn’t work and I have no idea why. There’s no starting point<\/em> for learning any of it. I couldn’t just find the basic framework and build up from there. <\/p>\n
I did eventually find this tutorial<\/a> on a blog called Catlike Coding, and that basically saved this project. I never would have gotten anywhere without it. I don’t know where author Jasper Flick got his knowledge, but I’m guessing it wasn’t from the relentlessly unhelpful and secretive manual pages.<\/p>\n
The Catlike tutorials give me the crucial first step of explaining the overall structure of a shader and how it operates with Unity, and then it gives a working example that will actually compile. From there I can begin modifying it to meet my needs. The Catlike project builds towards photorealism effects, and I’m headed in the opposite direction, but at least I have some sort of foothold on what I’m trying to learn. <\/p>\n
When I’m done, I have lighting and shadows:<\/p>\n
<\/div>If you look closely you can see a red speck on the left and a blue one on the right. That's the origin of the lights. There's also a green light positioned below the camera.<\/div><\/p>\nYou’ll notice that the scene is no longer textured. This is the lighting component of the scene, with nothing else.<\/p>\n
How the program builds this:<\/p>\n
Shader pass #1: Render the entire scene. I could use this lighting pass to project sunlight onto the scene, but I’m not planning on using sunlight in this world. So for now everything is drawn solid black. Later I’ll do something else with this shader pass, but for now it’s just a pitch-black city.<\/p>\n
Shader pass #2: Lighting pass. Unity goes through every light in the scene. You’ll notice I’ve got three: Red, green, and blue.For each light, it renders all of the objects that fall within that light’s radius and might possibly be illuminated by it. My shader renders these objects with this particular light’s properties. This lighting contribution is added to the existing image. When this pass is done, we have the image above. <\/p>\n
I should add that most of step #2 is automated. Unity sorts through the objects in the scene and figures out which objects need to be illuminated by which lights. So that’s a bunch of work I don’t have to do. Like, Unity just saved me from writing hundreds of lines of code.<\/p>\n
In OpenGL, we would do things a little differently. We would render the entire scene at full brightness, producing something like this:<\/p>\n
<\/div>I know the sidewalks look goofy. We'll take care of that mess in a later entry.<\/div><\/p>\nThen we’d do the lighting pass. Except, instead of drawing directly to the screen, we’d draw into a framebuffer. A framebuffer is like another screen you can draw to. It’s the same size as the viewport. (So if the user is running the game at 1920×1080, your hidden framebuffer would be the same dimensions.) <\/p>\n
So then we have two different images: The scene at full brightness is in the main viewport, and we’ve got the lighting stored in a spare framebuffer. We could then draw the framebuffer into the main viewport, having it multiply the two images together. Here is what that looks like if I take the two previous screenshots and combine them in an image editor using a multiplication filter:<\/p>\n
<\/div>This is actually an image edit and not a render.<\/div><\/p>\nYeah. That’s exactly what we’re going for. Except, Unity doesn’t give me the ability to create a framebuffer. When I search for how to do this, I get endless forums posts where people answer with “Use a render texture”. A render texture is a texture you draw into and then slap on an object in the scene. It’s used for things like mirrors or in-game security screens that show you what’s going on elsewhere in the level. In the world of OpenGL this would be the wrong way to do thingsRender textures MUST be a power of 2. So to make one large enough for a 1920×1080 display I’d need to make a gargantuan 2048×2048 texture, even though half of that texture memory would go completely to waste.<\/span>. <\/p>\n
What I’m trying to do here is called “deferred rendering”. I see that Unity offers a totally different rendering path that supports deferred rendering, but that whole system is built around assumptions that you’ll be using stuff like normal maps and other modern-day FX. The documentation on that stuff is in even worse shape than the rest of the docs. I think to use this I’d have to start over, except I’d be making something even more complicated with less information.<\/p>\n
Shamus, why don’t you just look at the…<\/strong><\/p>\n
Let me stop you right there, because I’ve seen a LOT of these sorts of answers over the last couple of days as I’ve waded through forums looking for answers. I get the sense that the Unity documentation was in better shape in the past than it is now. This is bad because the various forum questions are now poisoned with flippant RTFM<\/a> answers that have become useless. This page<\/a> in the Unity docs tells me to go and look at the built-in shaders so I can see a working example of the thing I’m interested in. But when I follow the link it redirects me to a generic download page where I can download Unity itself. <\/p>\n
The page is confusingly designed and it looks like you’ve been redirected somewhere useless, but if you poke around you’ll find a download for the promised shaders. But then I download the file and it’s just hundreds of shader source files. Okay, thanks… but which one of these – or which several of them – are the answer to my question of “How does rendering system X work?” I wanted to know which shaders were used in which order, and now I’m looking at a huge pile of random shaders and I have no idea where to go from here. <\/p>\n
I’ve spent half a day of chasing links that promise knowledge but only take me to unfinished manual pages, dead links, and unrelated topics. Maybe<\/em> there’s some magical combination of search terms that will take me to the payload of information, but the longer this goes on the more I suspect it just isn’t there.<\/p>\n
I’ll come back to deferred rendering later in the project, but at this point I’d really like to get back to programming.<\/p>\n
Let’s Get Back to Programming<\/h3>\n
So now maybe you’re asking:<\/p>\n
Shamus, why can’t you just draw everything into the main viewport? Why not just draw the full-bright city and then layer the lights on top of it?<\/strong><\/p>\n
Remember that each light adds itself to what’s already there. Then the result of those passes is multiplied with the full bright scene. If I draw the full bright scene and then ADD the lights to it, then it would be trying to brighten an already maximum-bright scene. If I multiplied each pass, then I wouldn’t get the right result. During the pass for the red light, everywhere the red light isn’t touching would be turned black. Then when the blue light came along, it wouldn’t be lighting the brick face of the building, it would be lighting a pure black void.<\/p>\n
Or to put it another way. What I’m trying to do is this:<\/p>\n
Frambuffer = (Redlight + BlueLight + Greenlight)
\nViewport = Buildings
\nFinalImage = Viewport * Framebuffer<\/code><\/p>\nI want to add the lights together, and then combine it after the adding is done. That’s not the same as:<\/p>\n
FinalImage = Buildings * Redlight * BlueLight * Greenlight<\/code><\/p>\nAnd it’s also not the same as:<\/p>\n
FinalImage = Buildings + Redlight + BlueLight + Greenlight<\/code><\/p>\nOnly the first will produce correct results.<\/p>\n
Hm. Maybe I can hack my way around this.<\/p>\n
Whatever Works, Right?<\/h3>\n
Rather than build up the lighting contributions in a framebuffer and then multiply them with the viewport, what if I did it the other way? What if I add all the lights together FIRST, inside the viewport. (Which is what I’m doing now.) Then I’ll draw the textured buildings into the scene using a multiply filter. Will Unity let me do that? If I stick another extra shader pass at the end will Unity just blindly throw all the objects into it?<\/p>\n
<\/div>Okay. That worked. Huh.<\/div><\/p>\nApparently so!<\/p>\n
Yes, this looks almost identical to the previous image. But this one really was built with shaders and the previous one was created with an image editor. So basically I’m doing: <\/p>\n
Redlight + BlueLight + Greenlight * Buildings<\/code><\/p>\n(Yes, in mathematics you normally do multiplication before addition, but since we’re drawing color values onto a canvas the order of operations is strictly left-to-right.)<\/p>\n
Now, let’s get back to that first shader pass. (The one that’s all black.) What I’m thinking of using that for is emissive stuff. (Stuff that glows.)<\/p>\n
Right now I’ve got my window texture. It’s your standard 32 bit texture, with a byte for the red, green, blue, and alpha channels. The alpha channel is used for transparency. So a single window looks like this:<\/p>\n
![](\"images\/pixelcity2_texturemap6.jpg\" "\\"For")
<\/center><\/p>\n(Yeah I didn’t put a lot of time into this texture.)<\/p>\n
You’ll notice the windows don’t completely obscure the wall behind them. The window itself is opaque, but then around the window is some empty space where you can see through to the bricks \/ concrete \/ whatever behind it.<\/p>\n
The thing is, we’re using an entire byte for that alpha value, and we don’t need to. I don’t plan on having windows with soft faded edges that blend in with the wall. In my textures, the window is either fully opaque or fully transparent. We only need one bit (a single zero \/ one value) for that. That means we’ve got another seven bits I can use for other things. <\/p>\n
So I make the highest bit control the alpha, and I use the next bit for emissive glow. If the bit is set, then during the first render pass this pixel will be drawn at full brightness rather than pure black.<\/p>\n
<\/div>Wow. That made a big difference.<\/div><\/p>\nYeah. Now the windows glow. Above I said that every single window was a triangle pair. (A rectangle.) This is stupidly wasteful and I’ll make it more efficient later. But since we’re already making so many polygons, it should be trivial to assign each building its own color, and then have every polygon in the building be a random offset from that:<\/p>\n
<\/div>You know, this flat-poly stuff looks really unexpectedly cool. I might come back to this later.<\/div><\/p>\nNow, instead of making the windows pure white, I’ll have them use the polygon color to determine the glow coming from the window:<\/p>\n
<\/div>Apparently there's a city-wide rave going on?<\/div><\/p>\nNot bad, giving how much of this I’m half-assing. Okay, the magenta windows look pretty silly, but I think we’re on the right track here.<\/p>\n
Eventually I’ll come up with a less ridiculous way of lighting these windows, but for now this works.<\/p>\n","protected":false},"excerpt":{"rendered":"
Last time I talked about making a special shader in Unity. It turns out that writing Unity shaders is a mixture of awesome and awful. But before we can get into that, we need to fix these buildings: See, I’m going to be writing the lighting shader. My hope is that I’ll be able to […]<\/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-42495","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\/42495","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=42495"}],"version-history":[{"count":46,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/42495\/revisions"}],"predecessor-version":[{"id":42646,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/42495\/revisions\/42646"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=42495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=42495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=42495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Now finish it off by applying Shader D to the entire screen.<\/ul>\n