{"id":12038,"date":"2011-06-16T05:14:11","date_gmt":"2011-06-16T10:14:11","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=12038"},"modified":"2011-06-16T05:35:15","modified_gmt":"2011-06-16T10:35:15","slug":"project-frontier-6-growing-grass","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=12038","title":{"rendered":"Project Frontier #6: Growing Grass"},"content":{"rendered":"

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

I think we’re done mucking with the terrain for now. There will be optimization to be done later, but for now it’s stable, fast and it accomplishes most of what I need it to do. We’ll revisit it later when I add more geographical features, but for now it’s time to move on to putting stuff ON the terrain.<\/p>\n

Actually, no. Let’s do something quick. The sky is really bugging me. Right now I’m just using a solid color to match the fog, so that things in the distance will fade into the sky. That’s nice, but we can do a lot better with very little effort.<\/p>\n

Surprisingly enough, step one is to create a… cone?<\/p>\n

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

We color bottom rim the same as the fog color. The tip is colored to be the same color at half brightness. This isn’t a texture map or anything. Just a plain colored polygon. Your graphics card is actually personally insulted when you render these. It’s like asking Superman to bend a bar of Play-doh. <\/p>\n

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

We render this so that the player’s head is always inside of the cone, with their eye even with the bottom rim. The advantage is that this is fast and cheap. The other advantage is that we have tricked the unwitting player into wearing a dunce cap. If we render it so that everything else ends up being drawn in front of the cone, we end up with:<\/p>\n

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

NOW we can put stuff on the terrain. Let’s start with grass.<\/p>\n

The most common technique for making grass is to take two rectangles and intersect them at a right angle.<\/p>\n

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

Then you just slap a picture of grass on them and call it a day. Actually, I guess this was the most common way of doing this ten years ago. Today, people use more polygons, and alpha-blending prevents them from intersecting to panels like this. But this project is all about building a rocket ship out of stone knives and bearskins, so that’s how we’re doing this.<\/p>\n

True story: The tufts of grass in Oblivion have twenty eight polygons<\/em>. For comparison, my little-two panel model is just four. (Each rectangle is two triangles for the purposes of rendering.) Back when Oblivion was new<\/a>, I couldn’t turn on grass at ALL, because it would bring my poor little machine down into single-digit framerates. LOW single digits. <\/p>\n

Someone came out with a mod that was nothing more than an alternate grass model. It replaced the twenty-eight polygon monster with a simple pair of panels like I have above. The result? The game ran about ten times faster. Visually, you could barely tell the difference. When you stood at a certain angle and saw a lump of grass in isolation (perhaps on the edge of a grassy area) you could tell the difference. A bit. And even that visual gap could have been fixed by simply moving from four polygons to eight. (So that from above, the panels form an asterisk shape.) Twenty-eight polygons is insane<\/em>, and even on today’s hardware using the Crysis 2 engine, I would still slap the artist that made a twenty-eight polygon tuft of grass. There are just so many ways we can better use that power.<\/div>\n

So, I take a grass texture and slap it on my panels. The result?<\/p>\n

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

Looks okay. Now, I came to this spot for screenshots for a good reason. I like the really stark difference between the bits of ground here. My plan is to just render these tufts of grass to match the texture underneath them. Let’s add this coloring, and add a few more bits of grass.<\/p>\n

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

Hey! Why is the grass still greyscale? See, the grass texture is white, and my plan was to color the polygons to make it match the terrain. I could use a texture with green grass on it, but then I’d be stuck with a single shade of green. I have thousands of subtle shading changes all over the terrain to make it look diverse and vibrant, but that’s all for nothing if I’m going to carpet over it with a fixed shade of green! It defeats the entire purpose of what I’m trying to accomplish here. So why is the grass white, even I’m coloring the polygons different shades of green?<\/p>\n

Oh wait. Now I remember.<\/p>\n

Head. Hit. Keyboard.<\/p>\n

I’m using what’s called the “fixed function” rendering pipeline. This is pretty much the default behavior for OpenGL. See, how it works is there are two ways of coloring polygons. One is using the color command. This is like what I used on the sky. You tell OpenGL what color you want the vertex, and it will do a nice neat fade from one vertex to the next. The other technique is to use the lighting system. If you use that, then if you want a polygon to be green you need to aim a green light at it. These two systems are mutually exclusive. The sky works because I turn lighting off when I draw it. (It wouldn’t make sense to have the sunlight shine ON the sky. It would not look like sunshine. It would just put a big vertical stripe up the sky.)<\/p>\n

If I want a lighting system that incorporates polygon coloring, I’ll have to make my own. I can either do that with vertex shaders or by turning off all OpenGL lighting and doing all of the lighting calculations myself. Both of these steps are complex and time-consuming, and might require changes to the low-level bits of my engine. (Including the terrain system, which I just resolved to leave alone for a bit.) Can I use vertex shaders when I’m using OpenGL through SDL? Wait, now I have to read up on what functionality is available with SDL. Oh, there’s a beta version of SDL that might offer…<\/p>\n

No. No no no no.<\/em> I will take this step eventually, but this is NOT the right time for it. I started this project because I want to experiment with my ideas for procedural content, not so I can muck out implementing my own lighting model. That will be a time-consuming distraction, and will lock me in to certain decisions that I’m just not ready to make yet. <\/p>\n

So we need a way to fake it. Let me think…<\/p>\n

(The next day….)<\/p>\n

Okay, I think I’ve got it. First, I render the grass, as before. I have lighting enabled, so the grass is white.<\/p>\n

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

Now, I turn off lighting and render all of the grass polygons again<\/em>, but this time using the colors I want. <\/p>\n

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

Now, I can change a setting so that when it renders these polygons, it will ONLY render them where there is already a pixel at the exact same depth, and nowhere else. <\/p>\n

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

I can also set it to blend the results of the second polygon, instead of just overwriting them. If you’ve ever used Photoshop, this is almost identical to using the “multiply” feature on a layer. It changes the color of the stuff underneath.<\/p>\n

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

Almost there. But it’s too bright. I fiddle with the filter a bit until I get the results I want. <\/p>\n

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

It’s good. Up until now I’ve had the grass only once every five meters, for testing. Let’s increase it to full density and see how it looks:<\/p>\n

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

Good enough. There are drawbacks to my approach, though. It won’t look right with fog. It can’t. If I have fog touching the grass, the affected grass will seem to glow. If I use dark fog, the grass will turn very dark. Basically, if the fog gets close enough to interact with the grass, the grass will no longer match the terrain and the two will look wrong together. This is a small problem, and I’m willing to tolerate it until I decide on a lighting model.<\/p>\n

You know… this has me thinking. The grass tufts are two intersecting panels. What if I took those four points on top, and connected them?<\/p>\n

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

Yeah, like that. And now if I add another region to the texture and change the coloring of the top…<\/p>\n

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

Yeah.<\/strong><\/p>\n

Well, we’re now at the end of the features I’d already mapped out before I began. But from here on I’ll be making it up as I go. Which should be interesting.<\/p>\n

Wait. One more:<\/p>\n

Click for larger view.<\/a><\/td><\/tr>
Click for larger view.<\/td><\/tr><\/table><\/p>\n","protected":false},"excerpt":{"rendered":"

I think we’re done mucking with the terrain for now. There will be optimization to be done later, but for now it’s stable, fast and it accomplishes most of what I need it to do. We’ll revisit it later when I add more geographical features, but for now it’s time to move on to putting […]<\/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-12038","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\/12038","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=12038"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/12038\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}