Procedural City in Javascript

21 Jun 2015

Inspired by Shamus Young’s Procedural City series, where he builds a randomly generated city set at night, I decided to attempt to recreate his metropolis in Javascript, using Three.js, a library I’d experimented with briefly but never really used.

Procedural City screenshot

My work was kickstarted with @mrdoob’s similar work, City 0.1. I took that as a basis, set it at night, and created three types of buildings by combining simple geometry, as Young had done.

Unfortunately I ran into some issues combining geometry and applying matrices. The approach I took involved keeping every element of every building in one single giant piece of geometry, which made for very fast rendering (only one trip to the GPU) but meant manipulating individual parts was tricky at best. I’m not totally sure there is a solution for this approach.

A better option would be either working with individual polygons, as Young did originally, or building actual Object3Ds. The former is more complex and the latter loses speed. I may take the time to do this in future but for now I’m releasing the project as is.

You can view the city here, and fly around if you’d like:


Yesterday I attended my second gamejam, an eight hour event where teams form to work on small games together around some loose themes, which this time were Black & White, Rockets, and Masks.


It’s early to say this, and maybe a little crazy, but I can’t help but put Twenty, a simple game from Stephen French, in the same category as Tetris. Not just in the way it plays - though it shares that methodical feeling of clearing a space that transitions to crowded panic - but in how it takes just a single mechanic and a simple interface to create something truly elegant and timeless. Twenty deserves to be played for decades to come, just like Tetris.