OpenGL ES GL_TRIANGLES渐变问题

Question

我正在尝试使用渐变绘制区域图。这就是我现在所拥有的。

如果你看一下红绿图，你会注意到渐变看起来不像预期的那样。

编辑：渐变应该是这样的均匀：

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

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

Answer 1

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

您的渐变是以这种方式出现的，因为您为插值指定顶点颜色的方式和位置。请注意输出与您要查找的示例之间的颜色差异：

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

在您正在寻找的输出中，图形的顶部在较短的部分中开始减少红色，因此在较短的距离内缩短到白色的过渡。

有几种不同的方法可以做到这一点，但可能最简单的（使用GLKBaseEffect而不是编写自己的着色器的计划）可能是为渐变使用1D纹理，并指定纹理坐标到与图形上的Y坐标成比例的每个顶点，如下所示：

（我的图表中的示例坐标假设您的图形顶点覆盖范围0.0到1.0，但该点无论如何：每个点的垂直纹理坐标应该是图形总高度的一小部分，介于0.0和1.0之间。）

或者，您可以通过两个过程查看绘图：首先，绘制图形的形状，然后使用适当的glBlendFunc绘制覆盖整个屏幕的四边形（两个三角形），使其适合只绘制您用图形形状填充的区域。

Answer 2

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

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