OpenGL ES 2.0 四边形渐变答案

【问题标题】：OpenGL ES 2.0 Quad GradientOpenGL ES 2.0 四边形渐变
【发布时间】：2015-02-28 00:19:27
【问题描述】：

如何使用 OpenGL ES 2.0 绘制四边形渐变？

不幸的是，OpenGL ES 2.0 本身不支持 Quads。我想为四个四边形顶点中的每一个附加不同的颜色，以便 OpenGL 在这四个点/颜色之间绘制一个漂亮的渐变。（就像 3 个顶点和一个三角形一样）

如何使用 GL_TRIANGLES 获得完全相同的外观？

【问题讨论】：

你想要的似乎是整个矩形的 双线性 插值。纹理基本上提供了该功能。但是，您不能只将颜色值作为顶点属性分配给每个顶点。您需要一种方法来访问顶点着色器中的所有 4 种颜色。
所以你的意思是我可以通过每个顶点的所有 4 种颜色？那么如何计算顶点着色器中的结果颜色呢？
OpenGL: How to render perfect rectangular gradient? 的可能重复项
它不是重复的，因为我不想每次都使用纹理并且它没有回答我问@derhass 的问题
如果你想在 4 个值之间进行插值，那么它们不能是顶点属性，因为一次不能超过 3 个。您要么需要使用纹理，要么使用具有四种颜色的统一值并使用纹理坐标在片段着色器中手动进行插值。使用 2x2 纹理基本上可以为您提供相同的插值，而无需在片段着色器中进行大量手动计算，并且可能更快。无论如何，您面临与另一个问题相同的问题，所以是的，它是重复的。

【解决方案1】：

如果您绘制与四边形具有相同顶点的三角形带，您应该在视觉上获得与使用四边形相同的输出。

唯一的诀窍是您需要重新排列顶点。考虑一下这个形状...

UL---UR
|     |
|     |
|     |
LL---LR

也许您已经订购了顶点LL, LR, UR, UL。这产生了面部的逆时针缠绕，从而产生了整个形状。但是，它不适用于三角形条带，因为条带要求前一个三角形的最后两个顶点构成下一个三角形的边之一。这意味着这里的第二个和第三个顶点需要是对角线，但在这里它们是一条边（LR, UR 是四边形的右边缘）。

如果您像 LR, UR, LL, UL 这样对顶点重新排序，那么当您将其视为三角形条带时，您会得到以下结果..

UL---UR
|    /|
|  /  |
|/    |
LL---LR

然后，OpenGL 会将其解释为两个三角形，其顶点为 LR, UR, LL 和 LL, UR, UL。

一个给定的四边形 strip 可以通过重新排序顶点类似地转换为三角形带。

【讨论】：

【解决方案2】：

Jherico 的回答解决了“从三角形制作四边形”部分，而 derhass 的评论暗示了梯度插值部分的解决方案。把它们放在一起......

将您的四边形发送为三条带（这比三角形要好 - 您无需指定两次顶点，而且将 VBO 发送到 GPU 需要花费时间）。为每个顶点添加纹理坐标：

UL: (0.0, 1.0)
UR: (1.0, 1.0)
LL: (0.0, 0.0)
LR: (1.0, 0,0)

然后，在您的片段着色器中，不要使用纹理坐标（通过顶点着色器作为变量传递的顶点属性）在纹理中查找，而是根据 texcoord 设置输出颜色：

varying vec2 texcoord;

main() {
    // simple black-white vertical gradient
    gl_FragColor = vec4(texcoord.y);
}

【讨论】：

现在这听起来很有希望，谢谢！只剩下一个问题：那我如何在四种颜色之间进行插值呢？我会将所有四种颜色都传递给片段着色器并根据 texCoord 在它们之间进行插值吗？或者是否有可能直接在顶点着色器中计算它并将其作为变量传递给片段着色器？
还有一个：这仍然可以绘制扭曲的矩形吗？例如。当两个顶点重叠并且四边形形成一个三角形时（梯度应该看起来像一个角度梯度的切片）。