OpenGL ES GL_TRIANGLES渐变问题

Question

我想绘制一个带有渐变的区域图。这就是我现在所拥有的。

如果你看红绿曲线图，你会发现梯度不看它应该的方式。

编辑：梯度应均匀这样的：

我使用的OpenGL ES 2.0和GLKit绘制一堆图表。该图表使用GL_TRIANGLES绘制。我知道问题在于渐变是为每个三角形单独绘制的。

我能想到的唯一方法是使用模板缓冲区。我将在大矩形中绘制渐变，并使用模板将其固定到此形状。有一个更好的方法吗？如果不是，你能帮我画一个指定点的模板吗？我是OpenGL的新手，对使用模板缓冲区没有很好的解释。

Answer 1

您不需要模板缓冲区。我不认为更多的三角形可能会有所帮助 - 更可能是这会让您更加困惑，因为您将为每个顶点颜色分配中间顶点并且必须自己对其进行插值。

由于您为顶点插值指定顶点颜色的方式和位置，因此您的渐变将以此方式出现。请注意在输出和你在寻找什么样板间颜色的差异：在每个顶点

你有100％的红沿着您的图表的顶部边缘的每个顶点，和100％的绿色沿着底部边缘。 OpenGL在每个三角形的面上线性插值颜色，这就是为什么在图的较短部分中有更多红色。

在您正在寻找的输出中，图表的顶部在较短的部分中开始减少红色，以便在较短的距离内缩短到较短的白色。

有几种不同的方法可以做到这一点，但可能是最简单的方法（对于使用GLKBaseEffect而不是编写自己的着色器的计划）可能是为您的渐变使用一维纹理，并为每个纹理分配一个纹理坐标顶点这是正比于它的Y坐标图上的，就像这样：

（这个例子在我的图坐标假设你图的顶点覆盖0.0〜1.0的范围内，但问题代表不管：垂直纹理每个点的坐标应该是图形总高度的一部分，在0.0到1.0之间。）

或者，你可以看看图中两遍：首先，画你的图形的形状，再画一个四（两个三角形）覆盖与梯度整个屏幕，使用适当的glBlendFunc所以只汲取在你用图形填充的区域。

Answer 2

OpenGL ES可以做你想做的事，但你需要增加你的模型的曲面细分。换句话说，不是只使用几个大的三角形，而是需要更多和更小的三角形，顶点颜色变化均匀地分布在它们上面。这将使您更好地控制渐变。三角形在加速OpenGL ES上很便宜，所以即使增加了100倍，它也不会对性能产生太大影响。

您可能还会考虑一种不同的方法，其中整个图由一个包含渐变的纹理覆盖。这将更容易实施。