UrbGen is a JavaScript library for the procedural generation of urban environments, designed primarily for game development. It can be used via this web app or as a library in your own code. UrbGen brings 3 benefits of procedural generation to JavaScript game developers:

  1. It expediates the process of designing and modelling urban environments
  2. It allows games to feature 'infinite' pseudorandom environments (think Minecraft )
  3. It helps to reduce file sizes by allowing games to generate environments on the fly

UrbGen was created by Nigel Robb.

Using the UrbGen web app

Use the control panel to set the parameters for your city.

Hit 'update' to generate and display a new city.

UrbGen is procedural, not random - the same settings will always generate the same city.

'random' randomises the settings.

You can download a Wavefront.obj file of the currently displayed model using 'exportOBJ'.

You can also download a text file containing the actual parameters of the currently displayed city by hitting 'exportParams'. This can then be used with the UrbGen library (see below) to generate this city in your code.

Use the left mouse button to rotate the model, the right mouse button to move it, and the scroll wheel (or two fingers on a trackpad) to zoom in or out.

Using the UrbGen library

Download the script and include it in your code:

<script src="path/to/UrbGen.js">

Next, instantiate a generator object:

var generator = new URBGEN.Generator()

Create an object to store the settings for your city:

var args = {
  globalAngle: 0.1, // the overall grid angle
  blockSize: 30000, // the minimum block size
  cityWidth: 1000, // the width of the city
  cityDepth: 500, // the depth of the city
  streetWidth: 25, // the width of the streets
  localGrids: 0.4, // the size of regions with a unique grid angle
  randomSeed: 0.6, // seeds the random number generator
  throughRoads: 27 // the distance at which street ends snap together

You can use the web app to see how changing these values affects the layout of a city. As mentioned above, you can also use the web app to save a set of values. Any undefined parameters will be randomised.

UrbGen also defines constant maximum and minimum values for each parameter:

URBGEN.Constants.MAX_BLOCK_SIZE = 50000;
URBGEN.Constants.MIN_BLOCK_SIZE = 15000;
URBGEN.Constants.MAX_CITY_WIDTH = 2000;
URBGEN.Constants.MIN_CITY_WIDTH = 400;
URBGEN.Constants.MAX_CITY_DEPTH = 2000;
URBGEN.Constants.MIN_CITY_DEPTH = 400;

These are suggested values; UrbGen will not restrict you setting values outside these ranges, but the results will be unpredictable.

You're now ready to generate a city. Simply call the generate() method, passing in the settings object. You can also call the method with no setttings, which will randomise all the values. Either way, the method returns a URBGEN.CityElement.City:

var city = generator.generate(args) // returns a specific city
var city = generator.generate() // returns a random city

See the documentation for a description of a city's structure, including all methods and fields.

Using UrbGen with three.js

three.js is a popular library for creating and displaying animated 3D graphics in a web browser. UrbGen provides a helper method to convert your city into a three.js geometry.

First, make sure you've included the three.js script in your code (if you're planning on using three.js you've probaby already done this):

<script src="path/to/three.js">

Once you've generated your city (as above), you need to use the URBGEN.Generator.getThreeJSGeometry method. This method takes either a single URBGEN.CityElement or an array of URBGEN.CityElement. Simply pass the elements in and the method returns a geometry:

// passing in a single city element
var threeGeometry = generator.getThreeJSGeometry(cityElement);

// passing in an array of city elements
var threeGeometry = generator.getThreeJSGeometry([cityElement]);

You can now use this geometry to create a three.Mesh.

For more information on using UrbGen, see the full documentation.