T w e n t y S i d e d

A malfunctioning back is preventing me from investing more time into the procedural city project. But that’s fine, because I think I’m at the stage where I need to stop and have a jolly good think. Even if I was up for working on it right now, I’m sure I’d just end up writing code that would have to be rewritten or replaced later.

When I began I had some aspects of the project worked out in my mind. Now I’ve distilled those ideas into code, and the next few steps are much more murky. I know if I wait, the ideas will firm up and I’ll get a better idea how to design things. This is one of the reasons coding as a hobby is more fun than coding for a living. Your average boss isn’t going to want you to take a couple of days off to screw around while you design the thing in your head. This is perfectly understandable, but sometimes it’s nice to work at the rate at which you get good ideas instead of at the rate which someone is paying you. I suppose if I was smarter then my ideas would keep up with my schedule. But… if I was smarter I’d probably have a more demanding job for more money. Hm.

Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.

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 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.

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.

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.

* 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.

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 which works out to about 4 meters. So my city will be about 4 kilometers on a side, or ~16Km² and have just over a million individual 4-meter plots that can be assigned as space for buildings or streets.

City Planning

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.

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.

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.

And finally I fill in the remaining empty space with simple cube buildings.

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.

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

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:

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.

I cruise around the city and take notes:

• 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.
• 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.
• 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.
• 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.
• 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.

We’re probably 15 or so hours into this 30 hour adventure. Still on my to-do list:

1. Sky.
2. Lights, both streetlights and lights on buildings.
3. Car lights.
4. The big one: Optimization. I’m eager to get to this step and find out what’s slowing the program down.
5. All the fixes and changes I’ve mentioned earlier.

Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.

Buildings

In my previous step I cranked out some plausible textures to go on my buildings. But this next step takes a bit of audacity, since I’m going to need to write a program to engage in architecture. Talented architects get paid huge sums of money to design buildings. It’s a complex and highly creative process, and it would be insane to think I could just simulate all of that cognitive work with a a few hundred lines of code written in the space of an evening. Particularly since my ignorance of the subject is nearly all-encompassing.

Still, I’ve got some Google’d pictures of buildings and stuff. Let’s see how this goes.

Luckily, I don’t really need to duplicate proper architectural work. For the more classic skyscrapers, a lot of the really artistic stuff goes into the surface of the building in the form of fancy stonework, and that sort of detail (or lack thereof) will be obscured by darkness. Hopefully I can simply present the outline of such a building and the viewer will fill in those details based on previous experience.

For more modern buildings, the process is even simpler. No offense intended towards the people who design those buildings, but the really sleek (to my eye) modern stuff is little more than simple geometric shapes. In either case, all I need to do is come up with a simple set of rules that will lead to a building-ish shape.

Blocky Buildings

So I’ll start with the blocky type buildings. You know, the kind shaped like cubist tumors. I’m sure there is a special architectural term for these towers with little interesting bits added on to keep them from being simple cubes, but I’m too ignorant of the discipline . The rules I come up with go like this:

1. Starting on the ground, produce a rectangular region that a) fits within the building footprint and b) contains the exact center of the building somewhere within its area. This rectangle is extruded up to the maximum building height.

2. Make another rectangle using the same rules as before, with the additional limitation that at least one of the sides of the rectangle must protrude from the center further than any of the previous ones. (Otherwise it would simply be hidden within the previous blocks. Extrude the rectangle from the base up to a height some random value less than the previous one.

3. Repeat step 2 until we hit some limit of tiers, the building footprint is filled, or we get to the bottom.

Rounded Modern Buildings

These are simple. This type of building is a cylinder, going around in ten-degree segments. In the image to the right, the second one down is the default shape. Randomly, during the building process it might choose to skip ahead 90 degrees. This will (from the viewpoint of the user) slice off a section of the cylinder. A single skip produces the top-most building in the example image. More skips can produce a variety of interesting and plausible shapes. It’s sort of amazing how pleasing the shapes are. Any two cuts will form a nice symmetrical shape. Three cuts will produce an interesting triangle-shape. Four cuts would result in a boring old cube building, and so I prohibited that from happening. (It would be exceptionally unlikely anyway.)

There is some ugly distortion on the top of the building, the result of screwy texture mapping. I’m still thinking about adding some sort of cap piece to the tops of buildings at a later point. I’m not sure what kind of speed / polygons tradeoffs I’ll be up against, so I’ll leave the distortion in place and revisit it later.

Classic Buildings

This is the simplest type yet. It’s a series of tiers. Each one is half the height between the previous one and the top, and slightly narrower. Once a randomly chosen number of tiers have been added, it closes the remaining distance to the top with a simple spike. And so…

It sucks. It just doesn’t look like a real building. I experiment with the dimensions of the building, adding ledges, changing the size of the spike, and a few other tricks. None of them really help. My approach is fundamentally flawed, most likely due to my lack of understanding.

I study the reference pictures again. Eventually I realize that the problem isn’t with the actual shape, the problem is with the shape suggested by the windows. Buildings like this one have stonework on the corners and in long vertical stripes between the windows, and I haven’t left any room for that sort of thing. It’s all windows, edge-to-edge.

I could make texture with those gaps built in. I could leave (say) every other column of windows black, but then I’d have a texture for a specific building type. I very much wanted a completely mix-n-match system, both for the ease of coding and also for the greater variety. Worse, buildings of different dimensions might need different specific textures. Instead of wrapping an arbitrary texture around a building, I’ll have to make special textures and make them line up just right. This is needlessly complex and inelegant.

I decide to shelve this issue until I get a bit more done. These buildings will stay for now, but they will have to go before the end.

Cube Buildings

My plan is to have a few showy skyscrapers sprinkled around the city. Everything else is to be simple cube buildings of varying dimensions. I don’t think I’ll waste page space showing you a picture of a cube. I doubt you need help visualizing it.

Other Buildings

I’d wanted a few more types of building, but I think I need to see how it all looks together. Once I can see the big panoramic view of the city I’ll consider adding more building types.

Next up is the big step: City planning. I’ll jam a bunch of buildings into the scene and see how they look and how fast it runs, and then reassess.

Shamus Young is a programmer, an author, and nearly a composer. He works on this site full time. If you'd like to support him, you can do so via Patreon or PayPal.