How to blend a 2D terrain

Question

Rimworld (shown above) has many different terrain types.

In order to achieve Rimworld styled terrain, I need to achieve two goals

A) How to render differently textured terrains

B) How to blend these terrains (which is what this question is about)

Demonstrated below as an example ( think each square as different terrain type)

I can easily solve A by rendering a mesh that, say, represent, stone terrain and render another mesh representing grass terrain.

However this is not enough because the sections in which two different terrain types meet must be blended

There are many ways I can think of to achieve this however all methods that I can think of are not fitting to render a giant 2d map (look at the first picture)

Answer 1

Let's start with some basics: in this case linear interpolation (and its limitations), using pure colours. Once you're on the right track, you can figure things out from there.

First, try to recreate the below image using Mathf.Lerp(), to create a controlled 1D interpolation between two adjacent colours:

(expanded vertically so you can see it more clearly)

Next, try to Lerp() in 2D, also known as bilerp() to create an interpolation on a quadrilateral with 4 colours, one at each of the corners of the quad:

(You can see that bilinear interpolation specifically operates on quads.)

You can see here how the final result comes out between (grid-aligned) world tiles / chunks, with the 2D / bilerped example above, being the middle tile between 4 pure colour tiles:

The easiest way to create the above in Unity is to set up a textured quad facing the camera, then use Texture2D.setPixel() to build a texture according to the numbers you get out of your linear interpolation functions given above.

Once implemented on the CPU using Unity's Lerp() & custom Bilerp(), you can then shift this logic over to lerp() textures correctly on the GPU if desired.

EDIT per comments How your input map must look to be blended this way (grid-aligned cells):

Answer 2

I thought about a solution

If there was a terrain such as above example, dirt should be below grass.

I could render dirt terrain to overlap grass terrains a little (below)

Then render Grass mesh on top of dirt terrain, then have its edges be rendered with transparency

However I still need to solve needing to apply different transparent value at the edges.

I wonder if I were to select this method, should each vertices contain "transparency value"? so that vertex at the edge contains zero-or-low transparency value