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

Setting up the World<\/span><\/p>\n

One of the interesting decisions that a programmer must make at the start of a 3D project is figuring out what scale to work in, because the renderer doesn’t care. Perhaps you want to set things up so that nearby things are a unit away, and the stuff in the distance is 100,000 units away. Or nearby is 0.00001 and far is 0.0001. It’s up to you to pick a scale and to decide what the arbitrary units mean. Are you working in meters? Feet? Cubits? Fathoms? The effective range of an African swallow carrying a coconut? In Unreal Tournament, characters were around 160 units tall. (I think that the intent was for 128 units to = 1 meter.) In my day job, we work with a system where 1 unit = 1 meter. <\/p>\n

While the renderer doesn’t care, it’s important to devise a system that makes sense to programmers and artists so that making content is as easy as possible. If you make something like 1 unit = 2.333 meters, then your artist making a 1.5 meter object is going to use a calculator all day and then spend their evenings plotting how they plan to conceal the body after they murder you. Perhaps 1 unit = 1 kilometer seems reasonable, but making furniture that’s 0.0005 tall is going to be really annoying. <\/p>\n

In this program, I’ve decided to eschew using real-world measurements and adopt an arbitrary system of measurement where 1 unit = 1 window. A building that’s 20 units wide will have 20 windows across its face*. 1 unit will also equal 1 traffic lane, so a road 5 units wide will be 5 lanes. Is the typical building window really the same width as a traffic lane? I don’t know, but I’m betting it’s close enough to look believable from a vantage point over the city, which is how the place will be viewed. <\/p>\n

* And by “window” I mean an 8×8 little square of pixels. I might have black lines in the space to make that square look like (say) two windows side-by-side, but it’s still a window as far as the program is concerned.<\/small><\/p>\n

This scale will make it easy to track how I’m using land. I allocate space for my city: 1024 x 1024. According to Wikipedia, a U.S. traffic lane is 12 feet<\/a> which works out to about 4 meters. So my city will be about 4 kilometers on a side, or ~16Km2<\/sup> and have just over a million individual 4-meter plots that can be assigned as space for buildings or streets. <\/p>\n

If you’re a non-programmer you’re probably wondering why we use odd values like 256 or 1,024 instead of nice, round values like 200 or 1,000. The reason for this is because our base 10 numbering system is bothersome and messy. At least for programming. (Arguably for everything else as well, although I’ll bet that assertion is flamebait in some circles.) <\/p>\n

One thing you end up doing all the time in programming is subdividing things<\/a>. Searching, sorting, and grouping things usually involves taking whatever stuff you’ve got and cutting the group in half until it’s found, sorted, or organized. Let’s take a group of 1,000 things and repeatedly divide it in half and see how it goes:<\/p>\n

1,000, 500, 250, 125, 62.5, 31.25, 15.625, 7.8125, 3.90625, 1.953125, 0.9765625<\/p>\n

Now let’s try it with 1,024:<\/p>\n

1024, 512, 256, 128, 64, 32, 16, 8, 4, 2, 1<\/p>\n

But hey, we have the same number of numeric digits as we have fingers, and that’s pretty awesome, right?<\/p><\/div>\n

City Planning<\/span><\/p>\n

So I take my city and mark areas of it as “streets”. The streets will be invisible in the final version, but I’m rendering them here as blue lines so I can see what I’m doing.<\/p>\n

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

Now I place 20 big impressive skyscrapers in the middle area of the map. These are buildings with a large footprint and they range from 45 to 55 units tall. (And since units are windows, that’s how many stories tall they are. <\/p>\n

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

Next I scatter around a few dozen smaller buildings. These are just as elaborate as the last batch, but these range from 25 to 35 stories tall.<\/p>\n

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

And finally I fill in the remaining empty space with simple cube buildings.<\/p>\n

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

4,752 buildings. The framerate is still shockingly high considering what I’m asking of the GPU. Still, I’m well under 100 FPS now and I’m betting this would be unacceptably choppy on low-end hardware. On the other hand, I have made no effort to optimize things yet. I don’t even know where the current bottleneck is. That will come in a later step, when I have a little more of the technology written. <\/p>\n

I try turning off the dev background and the blue “roads” and seeing what it looks like. Disappointingly, the place looks a little… homogeneous: <\/p>\n

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

Looking back to my reference pictures, I notice that each building seems to have its own color. This is either due to the color of the interior lights, the color of the interior stuff like walls and carpeting, or the tint of the windows. In any case, each building has a slightly different tint. I pick a narrow band of hues and apply them to each building:<\/p>\n

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

It’s hard to see in this screenshot, but the overall effect is pretty striking. It adds another layer of randomness to the world, so that even if two adjacent buildings happen to be using the same texture, they’ll likely be different colors. COUNTERPOINT: Uh, in the middle of this screenshot are 3 buildings the same texture and color. Ugh. <\/p>\n

I cruise around the city and take notes:<\/p>\n

    \n
  • I notice some buildings don’t look quite right. Yellow, blue, and white lights look fine. Green and red hues look wrong. This suggests that the real source of the color is the type of light used in the building. I do see some greenish windows in the photos (albeit very pale) but they look wrong in my simplified little world.\n<\/li>\n
  • The window distribution is just too uniform. As I pointed out last time, some buildings should have spaces of dark areas. Right now all buildings are unbroken grids of windows, and it just feels monotonous.\n<\/li>\n
  • Related to the above: I think some protruding ledges, rooftop A\/C units, and other clutter would help a lot, particularly if those items were simple black silhouettes against all of these white grids.\n<\/li>\n
  • As some people have pointed out: The “mirroring” is quite noticeable in some places. The window pattern on the east side of every building will be an exact mirror image of the front, so that when you look at the northeast corner it’s like a Rorschach blot test. Same goes for the west and south walls. This is due to the cheap way I used to map textures onto walls. It was quick & dirty, and I thought it would be fine, but the mirroring is too obvious. How I think it needs to work is that I need to wrap a texture around a building, except that when I turn a corner I should step back exactly 1 window. This means the windows at the end of one wall will be identical to the column of windows that begins the next. Since those windows ostensibly look into the same room, their lighting pattern needs to match or it looks screwy.\n<\/li>\n
  • I don’t like the rigid grid of streets. Some angled or curving streets would help a lot, but that would add huge complexity to the program. Right now the fact that streets run perfectly along an axis without obstruction simplifies many things. I think I’ll live with this problem for now rather than over-complicating things.\n<\/li>\n<\/ul>\n

    We’re probably 15 or so hours into this 30 hour adventure. Still on my to-do list:<\/p>\n

      \n
    1. Sky.\n<\/li>\n
    2. Lights, both streetlights and lights on buildings.\n<\/li>\n
    3. Car lights.\n<\/li>\n
    4. The big one: Optimization. I’m eager to get to this step and find out what’s slowing the program down.\n<\/li>\n
    5. All the fixes and changes I’ve mentioned earlier.\n<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"

      Setting up the World One of the interesting decisions that a programmer must make at the start of a 3D project is figuring out what scale to work in, because the renderer doesn’t care. Perhaps you want to set things up so that nearby things are a unit away, and the stuff in the distance […]<\/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-2983","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\/2983","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=2983"}],"version-history":[{"count":0,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=\/wp\/v2\/posts\/2983\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.shamusyoung.com\/twentysidedtale\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}