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.

Technical Details

I should have given these details in the initial post:

• The project is bound to Windows right now. Several people made great suggestions yesterday for wxWidgets, Qt or SDL. I don’t have time to examine those now (the interface is already done and I’m anxious to move forward) but I am making a note to make sure my next project is written on something portable.
• I’m using OpenGL for rendering. The API seems more quaint every year, but it still gets the job done without getting in the way.
• The look I’m going for is a helicopter-level view of a city, not a street-level view.
• The city is going to be pretty basic. 30 hours is not much time, and I’m aiming for simple-yet-effective as opposed to profound and feature-rich. While a lot can be done with a procedural city, I’m not going to take this idea very far to begin with. I just want something that’s fun to view for a couple of minutes.

Textures

As I stated in my original post, my goal is to make a program that generates all of its own art assets. The first asset I’ll need is a texture map for on the buildings.

The surfaces of buildings are typically complex. Brick? Concrete? Classical engraved stone? Steel? Making all of those surfaces, their colors, their shapes, and making those details line up with the building itself would be a huge undertaking. We’re not making GTA IV here and I don’t have an army of developers and artists at my command. We’ve got one guy, store-brand coffee, and 30 hours. So the smart thing to do is to make this a stylized low-detail night scene and make the buildings themselves pitch black. I’ll hint at a detailed building using the light coming from the windows.

Since I’m dealing entirely with windows to define a building, I grab some reference images of nighttime cityscapes and study them to see what kind of details and effects I can devise.

I set up a texture map. It’s 512×512 pixels (a nice mid-size texture) and I divide it into a grid of 64 x 64 windows. This means each window gets just 32×32 pixels. That’s a very small space, and the goal here is to make the most of it. The old Douglas Adams quote comes to mind, “Little expense had been spared to create the impression that no expense had been spared.” That’s sort of the approach I want to take in regards to the details in these windows. Here is part of the full 512×512 texture:

This is the upper-left quarter of the texture. There’s just no point in making you download the whole thing.

Note that this texture will never appear in its entirety on a single building. Instead, many buildings will share this texture and each will take a randomly chosen section of it. Now, so far this doesn’t look very interesting. Obviously some lights are turned off at night. But even in windows where the lights are off, there’s often a little bit of light coming from other nearby interior rooms. So few windows are truly black. And in rooms where the lights are on, the amount of light visible outside varies a great deal based on the placement of the lights and the positioning of light-blocking furniture within the room. Taking this into account, I make a texture that looks a lot more plausible:

Again, this is just 25% of the texture.

This texture is randomly generated when the program is run, so the pattern of windows changes each time.

Looking at the reference photographs of buildings at night, I note that a lot of them have dark clutter / shadows along the bottom of the windows, which is either furniture or shadows cast by furniture. This presents an interesting challenge, which is how to create this effect with just 32×32 pixels. (And since I need a 1-pixel border around the window I actually only have 30 pixels to work with.)

I try adding some random grayscale noise to the windows. It helps make the windows look less artificial, but it doesn’t really convey the impression of stuff being in the rooms. I try adding a few randomly generated vertical lines across the bottom of each window, but then the windows sort of look like tiny little bar graphs. Eventually I realize that since I’m trying to clutter up the window to give the impression of furniture, I should aim for making dark patches in the lower half of the texture. Also, the lights in a window tend to be brighter at the top, so I create a slight fade that darkens the lower half of a window. The result:

That’s closer, but the windows still seem a little flat. I try adding some random color noise and all of a sudden the windows pop to life. The changes in color make the brain think this is a far-off view of a cluttered, busy scene.

This might seem like a lot of silly fussing around over individual pixels, but these little squares of light will be all we have to go on and they will need to sell the rest of the building.

This scattered look for the lit windows doesn’t apply to all buildings. Some are lit by floors or sections of floors. Sometimes people are working late on one floor while the workers in another office have sensibly gone home for the night. So I add a random chance that sometimes a building texture will light its windows in groups instead of scattershot.

That should create some much needed variety. Now that I have a basic system for making little squares with “lighting” and “furniture”, the last step is to just make a whole bunch of different window shapes. Some will be long horizontal windows. Some will be slightly rounded. Some will be slightly narrow. Etc. I manage to come up with 8 different varieties of window that look acceptable, which is less than I was hoping for. (There are only so many window shapes you can make with 30 pixels!) If I don’t have enough different textures then the constant repetition will be obvious to the viewer. The human brain is infuriatingly good at detecting repeating patterns.

Here is a full view of one of the 512×512 textures. Note that it’s 64×64 windows, so if a building was 65 stories tall then the top floor would have the same window pattern as the bottom. Not that anyone would notice, but I don’t plan on making any that tall.

And just because I can’t stand to wait any longer to see if all of this work is worthwhile, I turn off the green development background and slap the textures onto a big row of cubes:

Two thousand frames per second. I tell my graphics card not to get too cocky. We’ll see how badass it thinks it is once I hand it a few thousand of these suckers to draw at once.

Pretty cheap, but it looks good enough so far. Next time: Buildings!

EDIT: As has been pointed out below, 64×32 does not equal 512. I changed the parameters of how textures would work several times, and I wasn’t careful to make sure I updated the post to reflect these changes. For the record, it’s 512×512 pixels, 64×64 windows, and 8×8 pixels per window in the screenshots you see in the post. I’m still tweaking them from time to time to see how it looks at different settings. It actually looks worse when using more pixels per window. With 32 pixels per window, the detail hinted at is revealed to be nothing more than a sprinkle of color and the illusion is broken. It could still be done, but the furniture simulation would need to be more sophisticated.)

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.