Biomes generation and rendering

We have already generated and rendered a heightmap, and now it’s time to add the next map layer — vegetation map based on biomes definition. The theme is boundless, but I’m going to cover both biomes generation and rending in a single post. The first reason that I’m a bit tired of it, the second — there are already some good tutorials available. From the procedural generation perspective theme was covered by Jon GallantScott TurnerAmit Patel, Tommy Waters and Miguel Cepero. There are also a lot of materials prepared by Cartographers Guild members.

As you may notice, in all of the articles linked above biome generation is based on a the same principle. A well-known Whittaker diagram shows the distribution of vegetation types as a function of mean annual temperature and precipitation and hence very convent to use in a procedural generation. All that we need is to define precipitation and temperature for each polygon, prepare our own diagram and define the biomes based on these three components.

Continue reading “Biomes generation and rendering”

Heightmap rendering

One of my first posts was devoted to a heightmap generation and now it’s time to talk about heightmap rendering. Most map generators consider heightmap as a technical thing only, but I believe it’s beautiful as is and with some improvements could be used as one of the main map layers.

As of now I’ve added 5 different heightmap styles, 2 optional features and some usable color schemes. The problem is that I need to select only one as I tend to keep things simple. I’m still at the crossroad not knowing which of the styles is the best and I hope this post and your comments will help me decide.

Continue reading “Heightmap rendering”


The previous post was mostly devoted to the Fluvial Network calculation and rivers rendering was not covered enough. I stayed on the straightforward and even unexpected solution: draw rivers based on their length only. It’s rather elegant, but tributaries don’t increase the main stem volume and this may be a problem. In real world tributaries usually don’t do it too, at least not in a direct way. But from a world-building perspective my implementation looks a bit boring. I want rivers to be not so predictable.

The problem is that we had amended rivers with bends and rivers’ control points don’t coincide with map polygons anymore. Usually we have 3 river elements for a polygon, so we need to interpolate the related polygon’s flux to have different width for each element.

Another solution is to combine flux and length approaches. On a regular stream width should get constantly increasing based on length, but on confluence river width should be completely recalculated based on the polygon’s flux value.

Continue reading “Confluences”

River systems

Now it’s a good time to draw some rivers. As we already have a heightmap we do not need to fabricate rivers out of nothing and will calculate river systems based on precipitation drainage.

The first step is to build a precipitation model. Frankly speaking, we can omit this step and consider that each cell has the same precipitation. It will be enough to create plausible rivers, but having a precipitation model is useful not only for rivers calculation, but also for biomes and erosion modeling.

The most interesting precipitation model I know is the Wind model presented by Scott Turner. Here he shows how it can be easily used for biomes definition and here disclose a few info regarding rivers. Despite this model is cool, it’s a bit over-complicated for a landscapes created via blobs approach and requires more detailed map.

Continue reading “River systems”


We already got scalable Voronoi graph and heightmap on it. The next step is to draw a coastline that will make the border between water a land masses clearer.

The easiest way to separate land and water is just to omit the water rendering. We can set background to our svg element to represent the water and then draw only the polygons higher than water threshold. It’s a good idea to have a small margin for a water height, it will be useful later. As the currently used spectral color scheme already provides rather plausible colors I prefer to define a sea level to 0.2 (green color starts here). In this case polygons with height less than 0.2 will be considered as water and won’t be drawn, polygons with height more or equal to 0.2 will be considered as lands.

Just minor change and voila, map looks plausible and even close to the some of these NASA relief maps.

Continue reading “Coastline”

Voronoi Graph

1000 polygons - relaxed 1 iterationBefore we will start to generate something looks like a map we need to understand what is the map and decide what method we are going to use to generate it. Simplifying,  the map is the two-dimensional representation of the surface of the world. The main thing that allows us to say whether this image is map or not is the obvious partition between land and water masses. To have an ability to divide a canvas into land and water we need to know what pieces are lower that others, it means we need to generate a heightmap.

Continue reading “Voronoi Graph”