Unity UGUI 程序化网格 05：四个顶点颜色如何形成渐变

本文输入合同
v0 左下 = RGBA(23,52,89,255)
v1 左上 = RGBA(36,123,160,255)
v2 右上 = RGBA(144,224,239,255)
v3 右下 = RGBA(255,183,3,255)
indices = 0,1,2, 2,3,0

Inspector 固定值
Bottom Left  = #173459FF
Top Left     = #247BA0FF
Top Right    = #90E0EFFF
Bottom Right = #FFB703FF
RectTransform = 420 x 240
Pivot          = (0.5, 0.5)

triangle A = (v0, v1, v2)
triangle B = (v2, v3, v0)

shared edge = v0 <-> v2
shared endpoints:
v0 color is one stored value
v2 color is one stored value

因此两个三角形在共享边上使用相同端点颜色。
若复制出另一组 v0/v2 并写入不同颜色，共享边可能出现接缝。

// Assets/OnPopulateMeshBook/Chapters/Chapter05_VertexColor/
// Runtime/GradientQuadGraphic.cs · GradientQuadGraphic
using UnityEngine;
using UnityEngine.UI;

namespace OnPopulateMeshBook.Chapter05
{
    public sealed class GradientQuadGraphic : Graphic
    {
        [SerializeField] private Color32 bottomLeft =
            new Color32(23, 52, 89, 255);
        [SerializeField] private Color32 topLeft =
            new Color32(36, 123, 160, 255);
        [SerializeField] private Color32 topRight =
            new Color32(144, 224, 239, 255);
        [SerializeField] private Color32 bottomRight =
            new Color32(255, 183, 3, 255);

        protected override void OnPopulateMesh(VertexHelper vh)
        {
            vh.Clear();
            var rect = GetPixelAdjustedRect();
            if (rect.width <= 0f || rect.height <= 0f) return;
            AddVertex(vh,
                new Vector2(rect.xMin, rect.yMin), bottomLeft);
            AddVertex(vh,
                new Vector2(rect.xMin, rect.yMax), topLeft);
            AddVertex(vh,
                new Vector2(rect.xMax, rect.yMax), topRight);
            AddVertex(vh,
                new Vector2(rect.xMax, rect.yMin), bottomRight);
            vh.AddTriangle(0, 1, 2);
            vh.AddTriangle(2, 3, 0);
        }

        private static void AddVertex(
            VertexHelper vh, Vector2 position, Color32 color)
        {
            var vertex = UIVertex.simpleVert;
            vertex.position = position;
            vertex.color = color;
            vh.AddVert(vertex);
        }
    }
}

// Assets/OnPopulateMeshBook/Chapters/Chapter05_VertexColor/
// Tests/Editor/GradientQuadGraphicTests.cs
using NUnit.Framework;
using OnPopulateMeshBook.Chapter05;
using OnPopulateMeshBook.TestSupport;
using UnityEngine;

public sealed class GradientQuadGraphicTests
{
    [Test]
    public void Populate_AssignsFourDistinctVertexColors()
    {
        var graphic =
            MeshTestSupport.CreateGraphic<GradientQuadGraphic>(
                new Vector2(120f, 80f));
        var mesh = MeshTestSupport.Build(graphic);
        Assert.That(mesh.colors32, Has.Length.EqualTo(4));
        Assert.That(mesh.colors32[0],
            Is.Not.EqualTo(mesh.colors32[2]));
        Assert.That(mesh.colors32[1],
            Is.Not.EqualTo(mesh.colors32[3]));
        MeshTestSupport.Destroy(graphic, mesh);
    }

    [Test]
    public void Populate_ZeroHeightProducesEmptyMesh()
    {
        var graphic =
            MeshTestSupport.CreateGraphic<GradientQuadGraphic>(
                new Vector2(120f, 0f));
        var mesh = MeshTestSupport.Build(graphic);
        Assert.That(mesh.vertexCount, Is.Zero);
        MeshTestSupport.Destroy(graphic, mesh);
    }
}

{
  "fixedInput": "four vertex colors",
  "component": "GradientQuadGraphic",
  "vertices": [
    [-210.0, -120.0, 0.0],
    [-210.0, 120.0, 0.0],
    [210.0, 120.0, 0.0],
    [210.0, -120.0, 0.0]
  ],
  "colors": [
    [23, 52, 89, 255],
    [36, 123, 160, 255],
    [144, 224, 239, 255],
    [255, 183, 3, 255]
  ],
  "indices": [0, 1, 2, 2, 3, 0]
}

"$UNITY_EDITOR" \
  -batchmode -nographics -quit \
  -projectPath "$PROJECT_ROOT/.tmp/unity-onpopulate-mesh-lab" \
  -runTests -testPlatform EditMode \
  -testResults "$ARTIFACTS/editmode-results.xml" \
  -logFile "$ARTIFACTS/editmode.log"

test-run result=Passed
total=19 passed=19 failed=0 skipped=0
duration=0.0400379s

GradientQuadGraphicTests.Populate_AssignsFourDistinctVertexColors
result=Passed
duration=0.002048s
GradientQuadGraphicTests.Populate_ZeroHeightProducesEmptyMesh
result=Passed
duration=0.000140s
process_exit_code=0

// 失败边界：参数 color 被错误地忽略
private void AddVertex(
    VertexHelper vh, Vector2 position, Color32 color)
{
    var vertex = UIVertex.simpleVert;
    vertex.position = position;
    vertex.color = bottomLeft;
    vh.AddVert(vertex);
}

failure input:
four configured corner colors

wrong colors:
v0=(23,52,89,255)
v1=(23,52,89,255)
v2=(23,52,89,255)
v3=(23,52,89,255)

failed condition:
colors32[0] != colors32[2]
colors32[1] != colors32[3]

recovery:
write the method parameter into UIVertex.color