Random City Generator is a WebGL Mirror’s Edge-like city generator based on Three.js made on my free time in June 2014.

See what it looks like in real time on this page.


I used this project to learn WebGL (javascript). Thus, the algorithm behind the city generation is extremely simple.

At first, the system generates parallel and perpendicular roads (like a grid). Then removes parts of them. That creates city blocks (or districts) of different sizes and makes the city feels less like a giant checkerboard.

Then for each district a height range will be decided. Indeed, the buildings inside a city block usually have about the same size. So there will be skyscrapers districts and bottom districts. That creates homogeneous buildings inside the districts, and heterogeneous districts inside the city. In other words, The city contains districts, the districts contain buildings. A random height range makes the city look kinda realistic. But controlled height range can lead to interesting looking cities. Like if height range starts low, then increases, then decreases again: the city will look like a hill.

Once the height range is decided, the buildings are generated. Their height is +/- 10% of the height range of the district. Width is slightly random but cannot lead to two buildings touching each other. The color is pseudo random as is has more chance to be light grey than dark grey. And a very little chance to be red.

Random City Generator


Pierre Planeau

My name is Pierre and I run this website. You can learn more about me over here and some of my personal projects over there. 🙂