Mixing textures of the landscape

In this article, I will discuss the algorithm of mixing textures, which allows you to bring the look closer to the natural landscape. This algorithm can be easily used in shaders 3D games, and games in 2D.

This article is intended for novice game developers.

One of the most common ways of texturing terrain consists in mixing textures of several layers. These layers are superposed on each other, thereby forming the exterior landscape. With each layer further has a transparency map, which determines the degree of presence of texture in the landscape. It is measured in percent. Naturally, in each point of the terrain sum of the degrees of transparency for all the layers of one hundred percent, since the terrain may not be transparent. Unlike texture tiles, transparency map stretches entirely on the landscape and therefore has a fairly low level of detail.

Now we come to the most interesting - mixing textures of algorithms. For simplicity and clarity, our landscape will consist of sand rolling in large boulders.

The easiest way to mix - multiply the texture color and transparency, and the results summed.

float3 blend(float4 texture1, float a1, float4 texture2, float a2)
    return texture1.rgb * a1 + texture2.rgb * a2;

It is this technique used in the Unity 3D editor in standard landscape.  The unnatural transition can bring players out of the game. Stones appear uniformly stained with sand, and in fact it does not happen in reality. The sand did not stick to the stone, on the contrary the sand fills the gap between them, leaving apex stones cleaner.

Let's try to simulate this situation in the most ordinary Excel with its tables and graphs. Since we want to sand "falling down" between the cobblestones, for each texture we need a map of her depth. In this example, I generated most of its texture in shades of gray, and placed in the alpha channel.

First of all let us consider a simplified model of the depth map of sand and stones.

Blue line denotes the conditional height map of sand and red - cobblestones. It can be noted that the paving stones protrude above the top level of the sand. Given this fact, we will try to display the pixels of the texture that is above.

float3 blend(float4 texture1, float a1, float4 texture2, float a2)
    return texture1.a > texture2.a ? texture1.rgb : texture2.rgb;

Excellent! The tops of the rocks are clean, then it seems like the sand falls into the gap between them. But we have not taken into account the degree of transparency of the layers. To do this, we simply add the height map with the map transparency.

float3 blend(float4 texture1, float a1, float4 texture2, float a2)
    return texture1.a + a1 > texture2.a + a2 ? texture1.rgb : texture2.rgb;


By summing less transparent texture will be higher than usual.

So we got a more natural transition from sand to rocks. It can be seen as grains begin to fill the gaps between the cobblestones, gradually hiding them behind. But as the painting is pixel by pixel, on the border between textures began to appear artifacts. To somehow flatten them, we will take not one, but a few pixels in the depth and mix them.

float3 blend(float4 texture1, float a1, float4 texture2, float a2)
    float depth = 0.2;
    float ma = max(texture1.a + a1, texture2.a + a2) - depth;

    float b1 = max(texture1.a + a1 - ma, 0);
    float b2 = max(texture2.a + a2 - ma, 0);

    return (texture1.rgb * b1 + texture2.rgb * b2) / (b1 + b2);

In the code above, we first highlight of the visible at a certain depth of the relief.

And then normalize it to get a new degree of transparency.

In the end, we got the mechanism of mixing textures, which gives a result close to their natural landscape.

In conclusion, I want to talk about why this algorithm was developed and how we use it.

Shader designed for indie games in the genre Steam Squad 2D isometric strategy. As a framework for the development, we use the Unity 3D. And as the Unity development environment is extremely flexible, we have made the expansion - a level editor. By and large, the editor is a simplified copy of the standard editor of landscapes with elements taken from the online game Titan Quest.

When drawing the texture across the landscape are recalculated the corresponding transparency map. And since the sum of all degrees of transparency must be 100% transparency map of all the other layers are normalized. What it looks like in the editor, you can view a short video.


All data posted on the site represents accessible information that can be browsed and downloaded for free from the web.



User replies

No replies yet