{"id":3068,"date":"2009-04-21T12:00:12","date_gmt":"2009-04-21T16:00:12","guid":{"rendered":"http:\/\/www.shamusyoung.com\/twentysidedtale\/?p=3068"},"modified":"2010-10-24T08:05:57","modified_gmt":"2010-10-24T13:05:57","slug":"procedural-city-part-6-sky","status":"publish","type":"post","link":"https:\/\/www.shamusyoung.com\/twentysidedtale\/?p=3068","title":{"rendered":"Procedural City, Part 6: Sky"},"content":{"rendered":"

Gradient Sky<\/span><\/p>\n

I need to make a sky for my city. So… I guess I better add one.<\/p>\n

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

This is not religious iconography. <\/td><\/tr>
This is not religious iconography. <\/td><\/tr><\/table>There are a lot of techniques for rendering skies. The most common is probably the “skybox”, which is a simple box with pre-rendered images pasted on it. Sometimes the images are taken with a special camera, but more commonly they’re designed by artists. To the right is an example of a skybox, which I gleefully pilfered from Google. (You could cut that image out and fold it up along the white lines to form a real-world skybox if you wanted.) Imagine folding up the box and wearing it on your head with the images facing inward. Note that all around you would be a seamless mountain vista. Also note that you would look like an idiot and likely bump into things. <\/p>\n

On the computer, it’s possible to draw this box, and then render everything else in the world on top of it, which creates the illusion that the mountains are a huge distance (infinite, actually) away. Now, my skybox isn’t going to be box shaped. Since I’m focusing on making a night time scene, I don’t need the top or bottom. So I’ll make some textures and place them on in side of a shortened tube instead of a cube. So, the viewer of my program is unwittingly wearing a lampshade on their head. Ha ha.<\/p>\n

I make a smear of colors and put it on the lampshade.<\/p>\n

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

It’s amazing how you can blur just about any two colors across the view and see it as a horizon. I start with a random warm color, which then fades to a blue, then fades to a very dark blue, and then to black. The specific colors are randomly chosen. I don’t know if it’s supposed to be a sunset or simply city lights bouncing off the atmosphere. It’s a little bright and colorful to be ambient light. But it goes all the way around the horizon, which is something sunsets don’t usually do.<\/p>\n

I add some stars.<\/p>\n

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

That’s good, but I’m going to need clouds if I really want to make this lampshade look sky-esque. For some reason, I thought I’d try and generate some puffy clouds fractally. It became apparent very early on that this was a foolhardy approach, but I messed with it a bit longer than I should simply because it was generating such interesting images. <\/p>\n

The method I was fooling around with worked like this: I draw this blurry circle of light, and then within that circle I draw several smaller ones, and within each of those I draw more, on and on, recursively. They get brighter as they get smaller. By varying the parameters – how many circles, how bright, how much smaller they get with each iteration – I come up with a lot of very interesting images. Some look like a relief map of a gorge-ridden desert landscape. Some look like cauliflower. None of them look like clouds.\n<\/div>\n

One of the many fractal non-clouds:<\/p>\n

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

Eventually I stop playing around and get back to work. This is very far from my mission parameters. My goal is to sell the scene using simple tricks, and trying to create believable clouds using fractals is the opposite of that. I save the fractal code elsewhere in case I want to play with it again, and devise a simple trick:<\/p>\n

I draw my fading circle texture onto the canvas, only I color the circle black. Then I squash it vertically and draw it again, only slightly lighter. The further down the canvas I go, the more I compress my circles vertically. So the circles near the top will be nearly round, but those at the bottom will be nearly a horizontal line. The result:<\/p>\n

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

And now I slap that texture over top of the gradient and the stars:<\/p>\n

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

This is the way to go. I spend some time fussing with the color parameters: Cloud size, opacity, density, the contrast of the lit underside of the cloud, and the degree to which they flatten out as they approach the bottom of the texture. (The horizon, from the user’s point of view.) Unlike the buildings, these parameters aren’t something I can just plug into the random number spewer and create infinite content. Most of these numbers are tradeoffs, and making it look better one way will diminish it in another. Eventually I decide to stop messing with it:<\/p>\n

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

We’re getting close now. <\/p>\n","protected":false},"excerpt":{"rendered":"

Gradient Sky I need to make a sky for my city. So… I guess I better add one. This is not religious iconography. There are a lot of techniques for rendering skies. The most common is probably the “skybox”, which is a simple box with pre-rendered images pasted on it. Sometimes the images are taken […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[66,10],"tags":[],"class_list":["post-3068","post","type-post","status-publish","format-standard","hentry","category-programming","category-projects"],"_links":{"self":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/3068","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=3068"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/3068\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3068"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3068"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3068"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}