OpenGL：如何渲染完美的矩形渐变？

Question

我可以只用一个三角形渲染三角形渐变，并为每个角使用 glColor。

但是如何渲染完美的矩形渐变呢？我试过一个四边形，但中间会出现难看的接缝。我也尝试使用 2x2 大小的纹理，就像应该这样做：从每个角落适当混合，但是当拉伸太多时纹理采样精度变得不精确（我开始看到大于 1x1 大小的像素）。

也许有一些方法可以在着色器中计算这个？

--

编辑：图片链接已损坏（已删除）。

Answer 1

确实，您想要的渐变类型依赖于每个像素的 4 种颜色，而 OpenGL 通常只在三角形上插入输入（因此 3 个输入）。仅使用标准插值无法获得完美的渐变。

现在，正如您所提到的，2x2 纹理可以做到这一点。如果您确实看到了精度问题，我建议您将纹理格式切换为通常需要更高精度的格式（例如浮动纹理）。

最后，正如您在问题中提到的那样，您可以使用着色器解决此问题。假设您将对应于 (u,v) = (0,0) (0,1) (1,0) (1,0) 的每个顶点的额外属性一直传递到像素着色器（使用顶点着色器只是做一个传递）。

您可以在像素着色器中执行以下操作（注意，这里的想法是合理的，但我没有测试代码）：

顶点着色器sn-p：

varying vec2 uv;
attribute vec2 uvIn;

uv = uvIn;

片段着色器：

uniform vec3 color0;
uniform vec3 color1;
varying vec2 uv;

// from wikipedia on bilinear interpolation on unit square:
// f(x,y) = f(0,0)(1-x)(1-y) + f(1,0)x(1-y) + f(0,1)(1-x)y + f(1,1) xy. 
// applied here:
// gl_FragColor = color0 * ((1-x)*(1-y) + x*y) + color1*(x*(1-y) + (1-x)*y)
// gl_FragColor = color0 * (1 - x - y + 2 * x * y) + color1 * (x + y - 2 * x * y)
// after simplification:
// float temp = (x + y - 2 * x * y);
// gl_FragColor = color0 * (1-temp) + color1 * temp;
gl_FragColor = mix(color0, color1, uv.u + uv.v - 2 * uv.u * uv.v);

Answer 2

问题是因为您使用了四边形。四边形是使用两个三角形绘制的，但三角形的方向不是您需要的。

如果我将四边形顶点定义为：

• A：左下顶点
• B：右下顶点
• C：右上角的顶点
• D：左上顶点

我会说四边形由以下三角形组成：

• A B D
• DB C

分配给每个顶点的颜色是：

• A：黄色
• B：红色
• C：黄色
• D：红色

记住几何形状（两个三角形），D 和 B 之间的像素是红色和红色之间插值的结果：确实，红色！

解决方案是具有两个三角形的几何图形，但方向不同：

• A B C
• A C D

但可能你不会得到准确的渐变，因为在四边形的中间你会得到一个完整的黄色，而不是黄色和红色的混合。所以，我想你可以使用 4 个三角形（或三角形扇形）来获得确切的结果，其中居中的顶点是黄色和红色之间的插值。

---

哇！有效地结果不是我所期望的。我认为渐变是由颜色之间的线性插值产生的，但肯定不是（我真的需要设置 LCD 色彩空间！）。事实上，最具可扩展性的解决方案是使用片段着色器进行渲染。

保留Bahbar 提出的解决方案。我建议开始实现直通顶点/片段着色器（仅指定顶点和颜色，您应该得到以前的结果）；然后，开始使用 mix 函数并将纹理坐标传递给顶点着色器。

你真的需要了解可编程着色器的渲染管道：顶点着色器每个顶点调用一次，片段着色器每个片段调用一次（没有多重采样，片段是一个像素；使用多重采样，一个像素由许多片段组成，这些片段被插值以获得像素颜色）。

顶点着色器采用输入参数（制服和输入；制服对于在 glBegin/glEnd 之间发出的所有顶点都是恒定的；输入是每个顶点着色器实例的特征（4 个顶点，4 个顶点着色器实例）。

片段着色器将产生片段的顶点着色器输出作为输入（由于三角形、线和点的光栅化）。在 Bahbar 答案中，唯一的输出是 uv 变量（两个着色器源通用）。

在您的情况下，顶点着色器输出顶点纹理坐标 UV（“按原样”传递）。这些 UV 坐标可用于每个片段，它们是通过根据片段位置对顶点着色器输出的值进行插值来计算的。

一旦你有了这些坐标，你只需要两种颜色：红色和黄色（在 Bahbar 中，答案对应于 color0 和 color1 制服）。然后，根据特定片段的 UV 坐标混合这些颜色。 (*)

(*) 这是着色器的强大之处：您可以通过简单地修改着色器源来指定不同的插值方法。线性、双线性或样条插值是通过为片段着色器指定额外的统一来实现的。

好习惯！

Answer 3

您的所有顶点是否都具有相同的深度 (Z) 值，并且您的所有三角形都完全在屏幕上吗？如果是这样，那么在由两个三角形组成的四边形上使用 glColor 获得“完美”的颜色渐变应该没有问题。如果不是，那么您的 OpenGL 实现可能对颜色处理不佳。

这让我怀疑您可能有一个非常古老或奇怪的 OpenGL 实现。我建议您告诉我们您使用的是什么平台，以及您拥有的 OpenGL 版本...？

如果没有更多信息，我建议您尝试编写着色器，并避免告诉 OpenGL 您需要“颜色”。如果可能的话，告诉它你想要一个“texcoord”，但无论如何都要把它当作一种颜色。这个技巧在某些颜色准确度太低的情况下很有效。