Blending landscape textures

In this article I will talk about the texture mixing algorithm, which allows you to bring the appearance of the landscape closer to the natural. This algorithm can easily be used both in shaders of 3D games and in 2D games.

The article is designed for novice game developers.

One of the most common ways of texturing a landscape is to blend textures of several layers. These layers overlap, thereby forming the appearance of the landscape. In addition, each layer additionally has a transparency map, which determines the degree of presence of the texture on the landscape. It is measured in percent. Naturally, at each point of the landscape the sum of the degrees of transparency over all layers is one hundred percent, since the landscape cannot be transparent. Unlike tile textures, the transparency map is stretched entirely over the entire landscape and therefore has a rather low level of detail.
')
We now turn to the most interesting - texture mixing algorithms. For simplicity and clarity, our landscape will consist of sand rolling into large cobblestones.



The easiest way to blend is to multiply the color of the texture and the transparency, and the results are summed up.

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

This is exactly the technique used in Unity 3D in the standard terrain editor. A smooth but unnatural transition immediately catches the eye. Stones look uniformly stained with sand, but this is not the case in reality. The sand does not stick to the stones, on the contrary, it crumbles and fills the gaps between them, leaving the tops of the stones more clean.

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

First we consider a simplified model of the map of the depths of sand and stones.


The blue line is conventionally marked map of the heights of the sand, and the red line - cobblestones. You may notice that the tops of cobblestones protrude above the level of sand. Given this fact, let's try to display the pixels of the texture that is higher.

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

Fine! The tops of the stones remain clean, while the sand seems to be showered in the gaps between them. But we have not yet taken into account the degree of transparency of the layers. To do this, we simply add a height map with a transparency map.

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

By summing up, a less transparent texture will be higher than usual.




So we got a more natural transition from sand to stones. It can be seen as the grains of sand begin to fill the gaps between the cobblestones, gradually hiding them behind them. But since the drawing takes place pixel-by-pixel, artifacts began to appear on the border between the textures. To smooth them out somehow, we will take not one, but several pixels in 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 select a part of the visible at a certain depth of the relief.


And then we normalize it in order to get new degrees of transparency.




As a result, we got a mechanism for mixing textures, which gives a result close to the natural look of the landscape.

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

The shader was developed for indie games Steam Squad in the genre of isometric 2D strategy. As a development framework, we use Unity 3D. And since the Unity development environment is extremely flexible, we made our expansion level editor. By and large, the editor is a simplified copy of the standard landscape editor with elements taken from the editor of the game Titan Quest.

When drawing a texture on a landscape, the corresponding transparency map is recalculated. And since the sum of all degrees of transparency should be 100%, the transparency maps of all other layers are normalized. How it looks in the editor itself can be seen in a short video.