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 Gallant, Scott Turner, Amit 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.

Mean temperature in Ireland

The precipitation model was already prepared for a river systems generation. As of temperature, I decided to use the model based on annual average sea temperature and land elevation. We create Islands, and even I’m still not sure, but our Islands seems to be about 100k square kilometers (~40 sq mi) in area. Like real-world Ireland or Iceland. What we know about the island is that their climate is profoundly impacted by ocean temperature, not by the latitude. And it is so even for a such a big islands like Ireland, having insignificant regional temperature variation. Generally it’s not “a warm South and a colt North” as in continental Europe, but “a bit warmer coastline and cooler inland areas”. So the sea temperature is the first key value.

One more observation is that we, unintentionally, create high, or volcanic islands. These island are based on one or more mountains and have an easily recognizable conical profile. Volcanoes could be really height, like Hawaiian Mauna Kea, standing 4,207 m (~14k ft) above sea level. But, as long as Ireland is selected as a model, I decided to define the highest altitude as 1 kilometer (~3,4k ft). The land elevation is the second key value.

Let’s take a look on a sea temperature. I don’t want to over-complicate the maps handling seasonal climate changes, so we should think in an average annual temperature direction (AAT). Keeping it easy, the AAT at sea level equals to a temperature at the coastline, so on the height = 0.2 in our case. Using the data from climatemps.com I’ve prepared a list of AATs for some places on European coastline. I selected one city to represent each Celsius degree. The place altitude and precipitation are also added:

City	Temperature, °C	Altitude, m	Precipitation, mm
Messina	19	54	830
Seville	18	31	610
Athens	18	28	375
Lisbon	17	95	750
Dubrovnik	16	49	1300
Barcelona	15	5	660
Marseille	14	32	545
Venice	13	6	800
Constanta	12	14	395
Antwerp	11	16	850
Dublin	10	85	730
Hannover	9	59	655
Gdansk	8	12	500
Stockholm	7	52	540
Riga	6	9	635
Trondheim	5	115	860
Reykjavik	4	61	800
Tromso	3	9	1000
Ust-Tsilma	2	79	565
Arkhangelsk	1	4	560
Murmansk	0	51	490

As you can see the temperature range is 0-19 °C. I didn’t find any significant European cities with AAT greater than 19 or sub-zero temperatures. I consider the 10 °C (50 °F) as a standard value (wow, it’s a Dublin, what a coincidence), 5 °C as a normal deviation (Trondheim-Barcelona range) and 10 °C as an extreme deviation (Murmansk-Messina range). Using this ranges we can get a semi-random temperature for each map.

We know that temperatures decrease with altitude and in mountainous regions altitudinal zonation is used to describe the ecosystems. Moreover, we now the rate of decreasing, which is approximately 6.5 °C/km. It means that with highest elevation equals to 1 km, the temperature delta across the map will be about 6.5 °C. From my point of view it’s too low for a fantasy world. We can either increase the lapse rate or the land elevation. As I don’t want to break the basic laws of nature, I increased the peaks up to 2 km height, so the temperature delta is doubled. So with a standard 10 °C temperature at the coast the annual average temperature on the mountain tops will be about -3 °C. On this temperature we can expect peaks to be above the snow line and some beautiful snowcaps should be there.

Knowing a coastal temperature and a cell heights we can calculate temperature for each cell. The general formula is coastal_temperature – (cell_height – sea_level) * 20, where sea level is always 0.2, coastal_temperature is user defined value in a range 0-20 and cell_height is in range 0.2-0.8 (upper bound may vary from map to map). So, a minimal 0.01 point height change will shift the actual temperature to 0.2 °C (0.36 °F). The maximum temperature delta, as was mentioned above, is 13 °C.

The formula to get land elevation is cell_height * (cell_height – 0.195) * 4000. The result is an altitude in meters. The minimum elevation above the sea level is 4 meters (~13 ft), maximum — 1936 meters (~6350 ft). As you can see the function is quadratic, but it’s just a trick to change the altitude more drastically on the mountains. I use elevation values in meters only for a reference as they more user friendly, while system always considers raw cell_height or point_height values. Formula for depths calculation is (cell_height – 0.2) * 70 / cell_height, just for your reference, it is not used for a biomes definition.

As of precipitation, I decided to fit the values I already have into a 0-9 range scale. The most arid cells get moisture level 9, while the wettest get level 0. For a user friendly value  I just multiply the initial raw precipitation by 500. So, the minimum non-zero precipitation (0.01) is considered as 5 centimeters (~2 in) of precipitation. The highest value is about 700 cm (~275 in).

Whittaker diagram

Having both temperature and precipitation key values defined, we can start to think over the biomes. Classical Whittaker diagram defines about 8-10 biomes and looks as a right-angled triangle. This number is too low for me and triangle shape is not very convenient for programming. So, let’s consider the intermediate ones to get about 20 biomes and create a rectangular array instead of Whittaker’s triangular matrix. I could safe some time using more appropriate Holdridge life zones classification, but I noticed it too late.

The y axis is our 10 precipitation levels. The x axis, that defines temperature based on cell height value, contains 100 elements. This is bigger than actual height delta, which is 60 points (0.2-0.8 range), and hence allows us to shift the scale left or right to maintain different coastal temperatures. The shift formula is cell_height * 100 – (coastal_temperature – modifier) / 0.2. Modifier is a customizable value controlling the shift, as of now I set it to 12 to get snow at sub-zero temperatures and hot deserts at highest values.

Biomes matrix implementation is pretty straightforward. Initially I reproduced Whittaker’s diagram in a rectangular form as 100×10 Excel table. Then I added some new intermediate biomes and changed the biomes for actual usage. The main problem is to define good colors for each biome. I was guided by both real-world colors from satellite Earth photos and standard colors used by mapmakers. The general idea is that cells with more moisture should be more saturated than arid ones. One more idea is to define a snow-white layer with some rocky-grey colors for low temperatures.

The next step is to turn the matrix into a JavaScript code. I made a separate jsfiddle as a biomes workshop. It’s not well-done, but has some useful functions to operate with colors and visualize the matrix. It also can interpolate colors in a selected range or smooth the entire axes. I have some ideas on how to turn this fiddle into a built-in custom color-schemes creation module, but it’s not a high-priority plan as of now.

Basic biomes matrix. Numbers show biomes IDs

Let’s take a look on the defined biomes. The classification I made is messy and illogical, detailed in some places and too general in others. I was focused mostly on colors than on correct biomes representation. Please note that I use the term temperature as a synonym of average annual temperature. For example you may thing that 20 °C is a comfort temperature, but in real-word we have this AAT in Marrakech, the city sometimes called “the Daughter of the Desert”.

Initially I planned to describe each biome in a separate paragraph and include some bio-geographical information, but I don’t thing it’s really necessary. We all know what is savanna and what is tundra, so here is just a summary table:

ID	Name	Temperature	Precipitation	Color
0	Hot desert	hottest-hot	superarid	#fbfaae
1	Savanna	hottest	arid	#eef586
2	Tropical dry forest	hottest	humid	#b6d95d
3	Tropical wet forest	hottest	superhumid	#7dcb35
4	Xeric srubland	temperate-cold	superarid	#d6dd7f
5	Temperate dry grassland	hot-temperate	arid	#bdde82
6	Temperate wet grassland	hot-temperate	subhumid	#a1d77a
7	Temperate deciduous forest	hot-temperate	humid	#29bc56
8	Subtropical rain forest	hot	superhumid	#76bd32
9	Cold desert	temperate-cold	superarid	#e1df9b
10	Temperate rain forest	temperate	superhumid	#45b348
11	Coniferous wet forest	temperate	superhumid	#52a444
12	Temperate coniferous forest	temperate	humid	#6fb252
13	Subtaiga	cold	superhumid	#567c2c
14	Boreal wet forest	cold	humid	#618a38
15	Boreal dry forest	cold	subhumid	#a4b36d
16	Subpolar scrub	cold	arid	#acb076
17	Subpolar desert	cold-coldest	superarid-arid	#b5ad8b
18	Tundra	coldest	humid	#d5d59d
19	Rocky desert	coldest-frosty	superarid	#bfbfbf
20	Polar desert	frosty	any	#f2f2f2
21	Glacier	frosty	any	#fafeff

The basic scheme is ready and now we can apply it to a map. I added a separate function that assign biome ID and associated color to each polygon, so it’s easy to render it in polygonal style described in the previous post:

Hm, it could be worse. The temperature is set to default 10 °C, the precipitation level is height. Most of the land is covered with Temperate deciduous (biome 7; 7-8 °C) and Coniferous wet (11; 7-4 °C) forests. The 2000-meters peak in the center has a glacier (biome 21; -1 °C) and slopes with Boreal dry and wet forests (biomes 14-15; 1-2 °C). The right slope is in rain shadow, so there is not too much precipitation and it’s covered mostly with shrubs and grass (biomes 4-5; 3-6 °C). You can also see that rivers tend to spread precipitation and usually river cells have better vegetation that surroundings.

Map looks a bit messy. Too make it better I can smooth the matrix using the linear color interpolation. Color of each element should be the average of its neighbors. After 2-3 cycles I got the updated matrix:

Not let’s apply it to the polygonal map:

Yes, just slightly better and still a bit messy. It’s not a real issue as I don’t plan to use biomes as a main layer, but I’m still want to try some styles already developed for a heightmap. I shouldn’t add shadows for a biomes, but I can render the map in a plain contours style:

Not sure this style is better. Let’s relax the contours shapes by taking into account just every fourth control point and then smooth it using D3 line interpolation:

Wow, it’s a super-messiness. I definitely need to reduce the layers count:

Not bad, I like the organic forms, but there are some rudiments. Maybe I will use this idea with contours simplification for something different. I don’t want to even try the pixel style, so the last one is triangled style:

Much better! It gives a lot of details, maybe even more than expected and completely change the map look.

Now let’s check the map in a temperature dynamic. Global warming model based on gradual average annual temperature increase from 0 to 25 °C (refresh the page to restart animation or check the video on YouTube):

Looks good, I suppose. Of course, temperature should affect the rivers, ocean could be covered with ice floes et cetera, but I’m quite happy with the current result as of now.

As usual, I will appreciate you comments and ideas. You are welcome to play with the generator jsfiddle, point me on mistakes and so on.