三个相邻矩形的连续变色

Question

我可以用三种不同的颜色绘制三个相邻的矩形，如下所示：

在这里，我可以使用不同的颜色，如下所示：

1. 上方矩形的颜色从 BLUE 变为 GREEN
2. 中间矩形是 GREEN
的均匀颜色
3. 较低的矩形颜色从绿色变为 RED

但是，我需要不同的东西。我想在这三个矩形中使用从 BLUE 到 RED 的连续变化颜色。我可以使用一个矩形而不是三个矩形。但我必须使用三个矩形..我想要如下：



可以这样做吗？

[注意：可能有不同数量的矩形。它是三个矩形的样本。我也可以得到100个矩形。然后我会从 BLUE 到 RED 从上到下改变颜色。

实际上，我用大量的矩形绘制了一辆汽车。现在我需要用渐变色来为它着色。

Answer 1

通过在片段着色器中使用不同颜色看到的插值是颜色分量的线性插值，如下所示：

R = R1 + (R2-R1)*scale
G = G1 + (G2-G1)*scale
B = B1 + (B2-B1)*scale
A = A1 + (A2-A1)*scale

在您的情况下C1(0,0,1,1)和C2(1,0,0,1)进行插值。比例是从[0,1]范围内的第一个到最后一个顶点的相对值。

您需要做的是在设置顶点颜色时实现相同的算法，以实现平滑的渐变。要使用我发布的算法你已经有2种颜色，你需要的只是比例：顶部顶点比例总是0而底部总是1.所有中间必须相对计算：对于2个相等的矩形你需要得到中间位置的比例为.5;如果有3个相等的三角形，则需要2个中间尺度，例如.3333和.6666 ...所以模式是N个矩形，你需要N + 1个尺度：

scale[i] = 1.0/N * i

如果矩形的大小不同，你需要做的是找到矩形高度的总和，然后在那之间分配值。