Procedural City, Part 3: Generating Buildings

By Shamus Posted Wednesday Apr 15, 2009

Filed under: Programming, Projects 41 comments

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

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

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

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

 


From The Archives:
 

41 thoughts on “Procedural City, Part 3: Generating Buildings

  1. RCTrucker7 says:

    I think your city is coming along nicely Shamus. Looking forward to the end product. Question; Will the final program be something that you’ll make available for download? I think it’d be cool to show off to friends and co-workers and whatnot.

  2. Marmot says:

    Hey Shamus, I’m very much enjoying these chronicles of production that you’re posting. It’s great to see something like that coming to life from scratch!

    I was wondering, how much time of your alloted 30 hours have you used so far? Do you include studying pictures of real buildings in that count too?

  3. Samadhi says:

    Shamus, this stuff is pure awesome. I’m really enjoying seeing the thought processes going on behind the scenes and I really hope you’ll release this when it’s done so we can enjoy the final product.

  4. Henebry says:

    It struck me yesterday that the texture map you’d fashioned was really only appropriate for sleek, modern architectural forms. So I’m not surprised that you ran into trouble with traditional buildings.

    Interesting to note, by the way, that “sleek modern architecture” was built only from the mid fifties to the mid eighties. Most buildings put up today hearken back to the traditional shapes of yesteryear, though they do so ineptly sometimes, so that the end result looks weirdly like the buildings you rejected.

    One thought on how to fix the problem you identify here: what if the traditional buildings had narrow rectangular columns of variable width at each corner? I’m imagining a narrow column with a square cross-section placed at each corner. The column is placed so as not to just overlap the skin of the actual building underneath, covering its “windows” with a black skin.

  5. AceCalhoon says:

    One way to approach the texturing of the traditional buildings is to change their UV coordinates. Because you know the proportions of the texture map, you can stretch out the dark areas near the corners of the buildings (and any dividers you need).

    So, for a fixed sequence of points across a face you might normally have coordinates like this:
    1, 2, 3, 4, 5, 6, 7, 8, 9, 10
    (evenly spaced)

    And instead you change them to:
    1, 1.5, 2, 3, 4, 5, 6, 7, 7.5, 8
    (with the pixels at the start and end stretched, extra pixels are cut off)

    If that makes any sense…

  6. RCTrucker7 says:

    Hey Shamus, saw this on Rock, Paper, Shotgun and thought you might find it interesting as it relates directly to this project;
    http://www.rockpapershotgun.com/2009/04/15/the-hard-maths-elevated/

    “Elevation is landscape and music generation in 4k, and it really does blow away any of the mathematically generated cleverness I've seen before. It'll black out your screen for a couple of minutes while it loads. Thanks to Tom for the tip.”

    Link to video of it on YouTube:
    http://www.youtube.com/watch?v=_YWMGuh15nE

  7. Jericho says:

    Very interesting stuff, keep it up!

  8. Steve Samson says:

    Shamus,

    I have zero experience or practical interest in graphics programming, but I’m nevertheless fascinated by your project. It occurs to me that you might be able to solve the problem of the textures for your traditional buildings by not approaching it from a texture standpoint at all. If you generate very tall, narrow buildings (the width of one or two windows) on the corners or in the centers of the walls of your traditional buildings and don’t apply any texture to them, won’t that give you the gaps you want?

    In reading the other comments I realize this is similar in effect to Henebry’s suggestion, although I’m not sure if the approach is the same.

  9. Luke Maciak says:

    I declare this series as a pure win!

    Re: traditional buildings – could you just generate non-textured to “cover up” windows where needed? Same idea as for the first building – just strategically place them at the corners to give illusion or sort of columns or whatnot.

    I’m thinking that just throwing the building in a random pattern will not look realistic. I’m anxiously waiting to see it though.

    I was thinking that you will probably need to come up with some algorithm to simulate street placement. I’d first draw bunch of invisible straight lines (streets) on your base surface. I’d make them cross at various angles, with preference for parallel intersections. Then I’d try to place buildings long these lines – so they would align in long rows. Then again, that might be to much work.

  10. Trianglehead says:

    More importantly than will the final program be available, will the final source code be available for us to monkey about with and see what we can do on top of it?

  11. Scott says:

    Adding large, shallow, sprawling buildings and different textured (but simple) buildings like parking structures would help diversify your city.

    EDIT: Wow, that sounded rude… I love what you are doing, and I am really looking forward to viewing these buildings together! Keep up the good work!

  12. Fergle F Fergleson says:

    Epic-cool. I really hope you’ll post some of the more technical specifics (source code would be dreamy) at the end.

  13. ngthagg says:

    Since I’ve lived all my life out west, I have to say I won’t miss the traditional building design. There simply weren’t buildings of that style built while newer cities were developed.

  14. Sigma says:

    I hope you do get this done, because I really like the sound of it. Imagine, a randomized desktop background…

  15. Neek says:

    Greetings

    I think the term for making the interesting bits on architectural models is call ‘greebling’

    You may be interested in some of the work Dr Andrew Hudson-Smith of Centre for Advanced Spatial Analysis gets into on his Digital urban blog:
    http://www.digitalurban.blogspot.com

    He has linked to a few procedural city/road-network design system, and this article, http://digitalurban.blogspot.com/2009/04/new-york-city-2259.html mentions: “The example includes grammar rules to create futuristic skyscrapers in two levels of detail as well as flying cars”

    /edit

    The search link was staring me in the face and I neglected to include it here: http://digitalurban.blogspot.com/search/label/Procedural%20Cities

  16. Matthew Allen says:

    Have you looked at subversion from introversion before? They are in the process of development and it’s pretty hushhush but they are doing basically the exact same thing you are but including terrain and the interiors of buildings.

    Very cool.

  17. Gary says:

    I’m loving this series/project of yours.

    May I suggest that you think about making groups of really short (or non-skyscraper) buildings clustered here and there for a layered, valley and ridge effect. It would make the landscape really show off the variability that is city.

  18. Eric Rossing says:

    I’d like to add my support to the “please share the source” movement. I haven’t done nearly as much of this sort of thing as I’d like to….

  19. Samrobb says:

    Mmm. Can you provide an texture map overlay that goes with each building type, and use it to mask out elements in the standard texture map for the more complex buildings?

  20. Felblood says:

    I’m planning to do a study on drawing cityscapes soon, and this little feature is really helping me get some ideas, in addition to giving me some new directions to extend my research in.

    Thanks.

  21. Kalil says:

    Just wanted to note that I’m enjoying reading these, it’s really cool watching your city ‘grow’.

  22. Dev Null says:

    Just from your few examples, it looks like part of your problem with the “classic” style is the pyramid on the roof. It should either be shorter or have windows in it, since few builders would want to waste that much space – especially in the prime spot on the top of the building – with windowless storage. Of course you can have a tall thin windowless spire at the top – I’m thinking Chrysler building here – but only really when the buidling has already narrowed down significantly (or to put it another way, when the base of the pyramid is a smaller percentage of the building’s footprint.)

  23. Yar Kramer says:

    I’m not a programer (the best I can do is PHP and some Java, orz), but I support open-source on principle. Apart from anything else, you aren’t a pirate if you download it for free. ;)

    Rereading the old article, I think that you’ve got something there, as far as “procedural” level-editors go. I mean, take Portal. It’d be great if you could just do, “Put button here, and have a color-changing strip that runs from the button to a color-changing sign on the wall there, put door here, put box-dispenser on the ceiling off thataway, have streamlined input/outputs for ‘when you press this button’ and ‘when all weight is removed from this button’, choose whether to automatically add the light-strips to the floor or ceiling in this area … oh, and make this metal wall procedurally covered in randomly-jutting-out metal blocks.” Instead, you have to put a static prop for the button base, a dynamic prop for the button itself, a “door” which moves up and down and “parent” the button-prop to that door, add one trigger for the player and another trigger for the boxes (and an “only boxes” filter for the latter if you haven’t made any buttons before), and then you need to add an “on start touch, close the button-‘door’, and on end touch all, open the button-‘door'” to both triggers, and we haven’t even gotten started on the color-changing strip, let alone the door or the box-dispenser. And you have to add every single randomly-jutting-out block individually. And then probably put a “block players” brush over it so that the player doesn’t cheat by jumping on the jutting-out blocks.

    And that’s just Portal. I’ve been on-and-off working on a Half-Life 2: Episode 2 mod set in this space station created by a Q-style reality warper; the room-design is fairly simple and semi-abstract, kinda like in Portal. It’d be great if you could have some sort of “room creator” where you could set architectural styles, “minimum/maximum size before subdividing areas,” and then just set the specific size and shape of a particular room. (Not to mention putting the suit/health chargers at a fixed height, and having them facing the right way just by selecting the wall you want ’em to be on, or requiring that ammo-crates be on the floor and whatnot; I can think of a number of ways so select where something should be, per-item.) But no, I have to spend most of my time worrying about the architecture, instead of being able to just worry about the gameplay.

  24. Grim says:

    Well done Shamus !
    Concerning the traditional building problem, it reminds me of the issue tackled by the developers of Spore creature animation. A creature that lacks hands and uses its mouth to grab a tool needs another animation reference for correct generalization. These special cases need to be identified and handled with specific code. The other option is to plainly reject these cases; what I would call ‘the Young way’ ;)

    I truly look forward to seeing the next part !

  25. Jericho says:

    I am actually rather disappointed this is only a 30 hour project. I can only imagine what can be accomplished in 60, or 90.

  26. Microphobe says:

    Awesome. I totally enjoyed your terrain generation project, and this is just as good!

  27. MaxEd says:

    How about combining “round” and “blocky”? You can just add round base to blocky building, I think, and it’d be something new. Also, it should be pretty easy to add “spires”/towers, like radio/TV towers, although I don’t know if they will be visible enough in the night setting.

    Anyway, great work, Shamus! You make me want to go and program something procedurally-generated myself, but I know I won’t finish it due to lack of motivation/persistance :(

  28. mark says:

    Hey Shamus, I just wanted to drop a line saying how much I enjoy posts like this, where you just get stuck in, elbow deep in code, and create something from nothing. The terrain generator was a fun read for me, and this is shaping up to be even more interesting.

  29. Johan says:

    Yay, the terrain series is what got me into twenty sided in the first place, so i’m really enjoying this.

    Have you seen Pascal Mueller’s work on procedural cities? http://www.vision.ee.ethz.ch/~pmueller/wiki/CityEngine/Documents

    There’s some interesting stuff on shape grammars in there, among other things…

  30. Fon says:

    Now it looks even better, but I was wondering will we see the city from ground or from sky or from somewhere in between? If we see city from ground, the distortion on the top of the building shouldn’t be a problem (we won’t see it anyway).

    Other than that, will this city have “special buildings” with a purpose like a mall or a hospital, instead of only random buildings (which look like a office building)? But the special building could distrub the view too, by making the viewers paying to much attention on it, unless we view it from far (further) away.

  31. Daemian Lucifer says:

    Why not try to add a bit of one or two storey houses?Those dont have to be lit at all,so you can just paint them black.Besides,in between all those skyscrapers,youll usually see just a fragment of those.They could be warehouses,some small shops,or stuff like that.

    Also,removing the window texture from the bottom of some of those buildings might be a good idea as well.

  32. Winter says:

    One note that might help with the building architecture: modern buildings have windows that are very close together (“glass wall” style) but older buildings often had heavy supports in between the windows. So one way to vary buildings even further is to add a small (semi-random) split between the windows on the “older” style buildings.

    I’m not sure how easy that is to do with your textures, though…

  33. Kazeite says:

    You should totally make some procedural gargoyles for those classical buildings :D

    … and then add procedural Bat-signal ;)

  34. Xpovos says:

    Your blocky building implementation is beautiful in its simplicity and its results. I particularly like that they are believable, and yet totally unreal. That is, they could be in any city, but aren’t.

    It can still be optimized. Too many rectangles jutting out causes it to look less authentic, too few makes it too bland. Your example shows 5. 4 and a base. The base is the one problem I see with that example. It jumps up as a block for two stories and then starts doing all sorts of crazy things. The building would actually look better and more realistic with those two stories chopped off. Some minimum threshold for the height of each block, particularly near the bottom would help, I think.

  35. Jos Metadi says:

    In considering layout, the biggest single factor would probably be height. Most cities are tend to follow an exponential height curve from the outskirts to the downtown.

    To me, building height seems to be a rather direct function of the cost of real estate vs. population density at the time of construction. In other words, I would expect an area of buildings constructed around the same time to have more similar building heights (for instance a portion of the city reconstructed after a major earthquake), while a portion that includes buildings 100 years old and 2 years old would have a radical different in heights. A simple way to code this would be to generate your map of planned buildings, and then run a check of the surrounding building types to set a age factor for height, and a distance from city center to generate a real estate value factor. Also each of the building types should have a height range. Traditional skyscrapers would probably average the shortest, and the modern ones the tallest.

    Applying randomization against the building age, real estate value, and building type factors should give you a building height distribution that feels real.

  36. Delve says:

    I just wanted to say that I really enjoy these projects of yours. It’s fun to read how you’ve attacked the various problems. I’d add my voice to the call for source code as well. :)

    Henebry mentioned generating a small column at the corners of the ‘traditional’ buildings to mask the window textures. The same concept could be employed to clean up the texture smear on your roofs by generating a thin polygon on top of each section as they’re created. I’d also like to suggest adding airplane lights. I mean the little red flashers that you often see on the corners and antennae of buildings to warn aircraft of thier perimeters. Especially as you’re planning on viewing this at about helicopter height, not having them would thoroughly spoil the illusion of reality for an observant viewer.

  37. Abnaxis says:

    To me, it seems like you would benefit greatly improved if you procedurally varied how far you stretch your textures. It’s been a long time since I used OpenGL, but I distinctly remember it being a fairly trivial task to divide a face into sections and selectively place the texture on it. Doing so would solve your classic skyscraper dilemma without worrying about the textures not fitting and still maintaining the procedural nature of the program while also supplying one more degree of freedom for you to vary, increasing variety.

  38. Factoid says:

    I think if I were trying to solve the texture problem without going over my memory budget I’d do something like a texture masking polygon. Build up my building and then texture it, then obscure that texture with a flat black strip that lays over the windows in different patterns. Basically it would be like building an invisible lattice that covers your building, but it would be very simple shapes and low poly counts, like maybe 20 extra poly’s and a pure black texture to cover them for the whole building.

    There might be better ways of doing it, but that would let you keep your texture memory low at the expense of higher poly counts. For the kind of scene you’re rendering I would guess that even a very low end machine can handle the poly count, but it’s the texture memory that’s going to be a bottleneck.

  39. lcllam says:

    Nice job. Why not try to hook into the system clock and gradually ‘switch off lights’ as people ‘leave’ the buildings and ‘come in’ for conference calls? Oh right… it’s always night… :)

Thanks for joining the discussion. Be nice, don't post angry, and enjoy yourself. This is supposed to be fun. Your email address will not be published. Required fields are marked*

You can enclose spoilers in <strike> tags like so:
<strike>Darth Vader is Luke's father!</strike>

You can make things italics like this:
Can you imagine having Darth Vader as your <i>father</i>?

You can make things bold like this:
I'm <b>very</b> glad Darth Vader isn't my father.

You can make links like this:
I'm reading about <a href="http://en.wikipedia.org/wiki/Darth_Vader">Darth Vader</a> on Wikipedia!

You can quote someone like this:
Darth Vader said <blockquote>Luke, I am your father.</blockquote>

Leave a Reply to Microphobe Cancel reply

Your email address will not be published.