OpenGL ES GL_TRIANGLES 渐变问题答案

【问题标题】：OpenGL ES GL_TRIANGLES gradient issueOpenGL ES GL_TRIANGLES 渐变问题
【发布时间】：2014-03-07 01:23:09
【问题描述】：

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

如果您查看红绿图，您会发现渐变看起来并不像预期的那样。

编辑：渐变应该像这样均匀：

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

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

【问题讨论】：

【解决方案1】：

您不需要模板缓冲区。我认为更多的三角形也无济于事 - 更有可能只会让您更加困惑，因为您会将每个顶点的颜色分配给中间顶点并且必须自己插入它们。

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

您在图表顶部边缘的每个顶点处都有 100% 的红色，而在底部边缘的每个顶点处都有 100% 的绿色。 OpenGL 会在每个三角形的面上线性插值颜色，这就是为什么图形较短的部分会出现更多的红色。

在您要查找的输出中，图表顶部在较短的部分开始时红色较少，因此在较短的距离内它会较短地过渡到白色。

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

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

或者，您可以分两遍进行绘制：首先，绘制图形的形状，然后使用适当的glBlendFunc 绘制一个用渐变覆盖整个屏幕的四边形（两个三角形），以便它只绘制在您用图表形状填充的区域上。

【讨论】：

您对图表中各个“峰值”的颜色强度的解释非常合理，感谢您的努力。我有一个想法，这可能是问题所在，但考虑到我在 Core Graphics 方面的经验，我认为解决方案将是微不足道的。我将尝试您建议的两种解决方案。
好的，可以使用第二种方法。对于任何尝试这个的人，我使用的混合函数是：glBlendFunc(GL_DST_ALPHA, GL_ZERO);

【解决方案2】：

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

您也可以考虑另一种方法，其中整个图形由包含渐变的单个纹理覆盖。这将更容易实现。

【讨论】：