Unity テクスチャブレンド

サイトの文章中にある...

So to blend the terrain layers, each layer checks for tiles at it's edge, and, where it finds a tile that is dissimilar, it creates a new quad with vertex-level opacity. For example, if the current tile is water and the tile to the north is sand, then the water layer will create a new quad to the north (tile x,y+1) with four vertices, the "southern" two (x,y + x+1,y) with an opacity of 1 and the "northern" two (x,y+1 + x+1,y+1) with an opacity of 0. These quads are part of the same mesh as the rest of the tiles, and therefore benefit from the same UV mapping & tiling.

というのがキモかと思います。私の解釈したところですと、地形の境界部分にさらにタイルを追加して、そのタイルの四隅の頂点カラーのアルファを調節することで周囲との隣接のしかたに応じて透明度をなめらかに変化させる...ということを意味しているんでしょう。
おっしゃる通りサイトのコードは断片的で、全貌がどうなっているかは読み取れませんでした。ですのでPlump Helmet Studiosさんの作例をぴったり完全に再現しようとするよりも、上記の理屈をヒントに自前で実装するのがいいんじゃないかと思います。

ご質問者さんのご提示いただいたコードではGPUインスタンシング機能を利用しています。その条件で頂点カラーを受け渡すにはどうしようかと考えたところ、まずExampleClassは下記のようにしてみました。追加・変更した部分にコメントを入れています。

using System.Collections.Generic;
using System.Linq;
using UnityEngine;

public class ExampleClass : MonoBehaviour
{
    Mesh mesh;
    Matrix4x4[][] matrices;
    Matrix4x4[][] matrices2;
    Matrix4x4[][] matrices3;

    // 頂点カラー受け渡し用のフィールド
    Matrix4x4[][] vertexColors;
    Matrix4x4[][] vertexColors2;
    Matrix4x4[][] vertexColors3;

    // マテリアルへのデータ投入用のMaterialPropertyBlock
    private MaterialPropertyBlock materialProperties;

    // プロパティアクセス用の識別番号
    private static readonly int VertexColorsProperty = Shader.PropertyToID("_VertexColors");

    int count;
    public Material material;
    public Material material2;
    public Material material3;
    public int rows = 100;
    public int columns = 100;
    public int mapWidth;
    public int mapHeight;
    public float noiseScale;

    // デバッグ用に、各地形を描画するかどうかを切り替えるフラグを用意する
    public bool drawTerrain = true;
    public bool drawTerrain2 = true;
    public bool drawTerrain3 = true;

    public int octaves;
    [Range(0, 1)]
    public float persistance;
    public float lacunarity;

    public int seed;
    public Vector2 offset;

    private void Start()
    {
        this.mesh = new Mesh();

        // 当初のコードではメッシュのサイズが2x2になっており、それをそのまま描画すると
        // タイル同士が重なってしまうようだったので1x1になるように変更
        // また、メッシュの構造を「4頂点・三角形2枚」から「5頂点・三角形4枚」に変更した
        // Plump Helmet Studiosさんの実装がどうなっているかは不明だが、スクリーンショットでは
        // 左下から右上にかけてグラデーションが発生するケースしか示されていない
        // 頂点単位で透明度を設定する方式だと、三角形2枚方式では左下⇔右上と左上⇔右下の
        // 構造が異なるためにグラデーションのかかり方が変化してしまうはずだが...
        this.mesh.vertices = new Vector3[] {
            Vector3.zero,
            new Vector3 (-0.5f, -0.5f, 0),
            new Vector3 (-0.5f,  0.5f, 0),
            new Vector3 ( 0.5f, -0.5f, 0),
            new Vector3 ( 0.5f,  0.5f, 0),
        };
        this.mesh.uv = new Vector2[]
        {
            new Vector2(0.5f, 0.5f),
            new Vector2(0, 0),
            new Vector2(0, 1),
            new Vector2(1, 0),
            new Vector2(1, 1),
        };
        this.mesh.triangles = new int[] {
            0, 4, 3, // 北
            0, 2, 4, // 東
            0, 1, 2, // 南
            0, 3, 1, // 西
        };

        this.mesh.RecalculateNormals();
        this.mesh.RecalculateBounds();

        this.count = this.rows * this.columns;
        var flatMatrices = new Matrix4x4[this.count];
        var flatMatrices2 = new Matrix4x4[this.count];
        var flatMatrices3 = new Matrix4x4[this.count];
        float[,] noiseMap = global::Noise.GenerateNoiseMap(this.mapWidth, this.mapHeight, this.seed, this.noiseScale, this.octaves, this.persistance, this.lacunarity, this.offset);

        for (var i = 0; i < this.rows; i++)
        {
            for (var j = 0; j < this.columns; j++)
            {
                var index = (i * this.columns) + j;

                // iとjが逆のようだったので変更
                float height = noiseMap[j, i];
                var position = new Vector3(j, i, 0);

                var rotation = Quaternion.identity;

                var scale = Vector3.one;

                if (height < 0.35f)
                {
                    flatMatrices[index] = Matrix4x4.TRS(position, rotation, scale);
                }
                else if (height < 0.45f)
                {
                    flatMatrices2[index] = Matrix4x4.TRS(position, rotation, scale);
                }
                else
                {
                    flatMatrices3[index] = Matrix4x4.TRS(position, rotation, scale);
                }
            }
        }

        // 当初の通りタイルを配置したあと、ここで各地形レイヤーに
        // さらに追加の外周タイルを配置する
        var flatVertexColors = this.AppendOutlineTiles(flatMatrices);
        var flatVertexColors2 = this.AppendOutlineTiles(flatMatrices2);
        var flatVertexColors3 = this.AppendOutlineTiles(flatMatrices3);

        // タイルの座標変換行列と同様に、頂点カラー配列も1023個ずつに分割しておく
        // 結局同じような記述を6回も繰り返すことになってしまったので、この1023個分割操作を
        // メソッド化してしまうことにした
        this.matrices = this.GroupBy1023(flatMatrices);
        this.matrices2 = this.GroupBy1023(flatMatrices2);
        this.matrices3 = this.GroupBy1023(flatMatrices3);
        this.vertexColors = this.GroupBy1023(flatVertexColors);
        this.vertexColors2 = this.GroupBy1023(flatVertexColors2);
        this.vertexColors3 = this.GroupBy1023(flatVertexColors3);
    }

    // 配列要素を1023個ずつに分割して返すメソッド
    T[][] GroupBy1023<T>(IEnumerable<T> source)
    {
        return source.Select((m, i) => (m, i / 1023))
            .GroupBy(t => t.Item2)
            .Select(g => g.Select(t => t.Item1).ToArray()).ToArray();
    }

    // 地形レイヤーに対して外周タイルを配置するメソッド
    // 併せて頂点カラーを生成して返す
    // なお、透明度を操作するだけならシェーダーへ送るデータの型はVector4で間に合うはずだが
    // 気まぐれでMatrix4x4とした
    // このため、アルファのみならずRGBも伝達することが可能であり、さらに改造を加えれば
    // 頂点単位で色を乗せることで地形に色ムラをつけることも可能なはず
    Matrix4x4[] AppendOutlineTiles(Matrix4x4[] flatMatrices)
    {
        var allWhite = (new Matrix4x4(Color.white, Color.white, Color.white, Color.white)).transpose;
        var allClear = allWhite;
        allClear.SetColumn(3, Vector4.zero);
        var colors = Enumerable.Repeat(allWhite, this.rows * this.columns).ToArray();
        var needsPlaceTile = new bool[this.rows * this.columns];
        for (var i = 0; i < this.rows; i++)
        {
            for (var j = 0; j < this.columns; j++)
            {
                var index = (i * this.columns) + j;
                var matrix = flatMatrices[index];
                if (matrix[0] > 0.0f)
                {
                    // この位置にすでに配置済みならスキップ
                    continue;
                }

                var isLeftEdge = j == 0;
                var isRightEdge = j == (this.columns - 1);
                var isBottomEdge = i == 0;
                var isTopEdge = i == (this.rows - 1);
                var hasN = !isTopEdge && (flatMatrices[index + this.columns][0] > 0.0f);
                var hasNE = !isTopEdge && !isRightEdge && (flatMatrices[index + 1 + this.columns][0] > 0.0f);
                var hasE = !isRightEdge && (flatMatrices[index + 1][0] > 0.0f);
                var hasSE = !isBottomEdge && !isRightEdge && (flatMatrices[index + 1 - this.columns][0] > 0.0f);
                var hasS = !isBottomEdge && (flatMatrices[index - this.columns][0] > 0.0f);
                var hasSW = !isBottomEdge && !isLeftEdge && (flatMatrices[index - 1 - this.columns][0] > 0.0f);
                var hasW = !isLeftEdge && (flatMatrices[index - 1][0] > 0.0f);
                var hasNW = !isTopEdge && !isLeftEdge && (flatMatrices[index - 1 + this.columns][0] > 0.0f);

                void MakeOpaque(int vertexIndex)
                {
                    var color = colors[index].GetRow(vertexIndex);
                    color.w = 1.0f;
                    colors[index].SetRow(vertexIndex, color);
                    needsPlaceTile[index] = true;
                }

                // まず四隅をすべて透明にしておき...
                colors[index] = allClear;
                if (hasN || hasNE || hasE)
                {
                    // 北～東にかけてタイルが配置されているなら右上を不透明に
                    MakeOpaque(1 + (1 << 1));
                }
                if (hasE || hasSE || hasS)
                {
                    // 東～南にかけてタイルが配置されているなら右下を不透明に
                    MakeOpaque(1 + (0 << 1));
                }
                if (hasS || hasSW || hasW)
                {
                    // 南～西にかけてタイルが配置されているなら左下を不透明に
                    MakeOpaque(0 + (0 << 1));
                }
                if (hasW || hasNW || hasN)
                {
                    // 西～北にかけてタイルが配置されているなら左上を不透明に
                    MakeOpaque(0 + (1 << 1));
                }
            }
        }

        for (var i = 0; i < this.rows; i++)
        {
            for (var j = 0; j < this.columns; j++)
            {
                var index = (i * this.columns) + j;
                if (needsPlaceTile[index])
                {
                    // 不透明化処理を行った位置に追加のタイルを設置する
                    var position = new Vector3(j, i, 0);
                    var rotation = Quaternion.identity;
                    var scale = Vector3.one;
                    flatMatrices[index] = Matrix4x4.TRS(position, rotation, scale);
                }
            }
        }

        return colors;
    }

    void Update()
    {
        if (this.materialProperties == null)
        {
            this.materialProperties = new MaterialPropertyBlock();
        }

        void DrawTerrain(Material mat, Matrix4x4[][] mtx, Matrix4x4[][] vCol)
        {
            for (var i = 0; i < mtx.Length; i++)
            {
                // プロパティブロックに頂点カラーデータを投入し、DrawMeshInstancedの引数として渡す
                var m = mtx[i];
                this.materialProperties.SetMatrixArray(VertexColorsProperty, vCol[i]);
                Graphics.DrawMeshInstanced(this.mesh, 0, mat, m, m.Length, this.materialProperties);
            }
        }

        // デバッグ用に、各地形レイヤーを描画するかどうかをフラグを見て切り替えさせるようにして
        // 特定の地形レイヤーを単独で描画したりできるようにした
        // なお、描画順はDrawMeshInstancedを実行した順番とは異なる可能性があるので要注意
        // デフォルトではmaterial、material2、material3とも3000だと思うが
        // たとえばmaterial2は3001、たとえばmaterial3は3002にでもしておけば
        // 意図通りの順序で描画されるはず
        if (this.drawTerrain)
        {
            DrawTerrain(this.material, this.matrices, this.vertexColors);
        }

        if (this.drawTerrain2)
        {
            DrawTerrain(this.material2, this.matrices2, this.vertexColors2);
        }

        if (this.drawTerrain3)
        {
            DrawTerrain(this.material3, this.matrices3, this.vertexColors3);
        }
    }
}

（パート2へ続く...）