opengl - 将颜色应用于opengl中四边形中的单个顶点

Question

我正在尝试为通过 glDrawElements 绘制的四边形的单个顶点着色，我正在与 一起工作cocos2d libray，所以我已经能够清除源代码以准确了解发生了什么，代码如下:

glBindVertexArray( VAOname_ );
glDrawElements(GL_TRIANGLES, (GLsizei) n*6, GL_UNSIGNED_SHORT, (GLvoid*) (start*6*sizeof(indices_[0])) );
glBindVertexArray(0);

所以使用了顶点数组对象。我正在尝试修改传递的对象的单个顶点颜色，它似乎可以工作，但存在下图描述的故障:



这里我尝试改变左下角和右下角顶点的颜色。结果是不同的，我猜这是因为四边形被渲染为几个三角形，它们共享斜边，斜边位于从左下顶点到右上顶点的对角线上。所以这可能会导致不同的结果。

现在我想也有第一种情况的第二个结果。有办法获得吗？

Answer 1

你的猜测是对的。 OpenGL 驱动程序将您的四边形分割为两个三角形，其中顶点颜色被重心插值，从而产生您所看到的内容。

解决此问题的常用方法是在片段着色器中“手动”执行插值，考虑目标拓扑，在您的情况下为四边形。或者简而言之，您必须不基于三角形而是基于四边形执行重心插值。您可能还想应用透视校正。

我现在还没有准备好阅读手头的资源，但我会尽快更新这个答案(实际上可能意味着，我必须自己写)。

更新

首先我们必须理解这个问题:大多数 OpenGL 实现将更高的基元分解为三角形并将它们局部化，即没有进一步了解基元的其余部分，例如一个四边形。所以我们必须自己做这件事。

这就是我要做的。

#version 330 // vertex shader

当然我们也需要平时的制服

uniform mat4x4 MV;
uniform mat4x4 P;

首先我们需要这个着色器执行实例处理的顶点的位置

layout (location=0) in vec3 pos;

接下来我们需要一些顶点属性来描述四边形本身。这意味着它的角落位置

layout (location=1) in vec3 qp0;
layout (location=2) in vec3 qp1;
layout (location=3) in vec3 qp2;
layout (location=4) in vec3 qp3;

和颜色

layout (location=5) in vec3 qc0;
layout (location=6) in vec3 qc1;
layout (location=7) in vec3 qc2;
layout (location=8) in vec3 qc3;

我们将这些放入变量中供片段着色器处理。

out vec3 position;
out vec3 qpos[4];
out vec3 qcolor[4];

void main()
{
    qpos[0] = qp0;
    qpos[1] = qp1;
    qpos[2] = qp2;
    qpos[3] = qp3;

    qcolor[0] = qc0;
    qcolor[1] = qc1;
    qcolor[2] = qc2;
    qcolor[3] = qc3;

    gl_Position = P * MV * position;
}

在片段着色器中，我们使用它来实现颜色分量的距离权重:

#version 330 // fragment shader

in vec3 position;
in vec3 qpos[4];
in vec3 qcolor[4];

void main()
{
    vec3 color = vec3(0);

以下可以简化组合，但为了清楚起见，我将其写出来:
对于顶点的每个角点，将所有角点的颜色与它们之间边缘位置的投影作为混合因子进行混合。

    for(int i=0; i < 4; i++) {
        vec3 p = position - qpos[i];
        for(int j=0; j < 4; j++) {
            vec3 edge = qpos[i] - qpos[j];
            float edge_length = length(edge);
            edge = normalize(edge);
            float tau = dot(edge_length, p) / edge_length;

            color += mix(qcolor[i], qcolor[j], tau);
        }
    }

由于我们查看了每个角点 4 次，因此按比例缩小 1/4

    color *= 0.25;

    gl_FragColor = color; // and maybe other things.
}

我们快完成了。在客户端，我们需要传递附加信息。当然，我们不想重复数据。为此，我们使用 glVertexBindingDivisor以便顶点属性仅在 qp… 上每 4 个顶点(即四边形)前进和 qc…位置，即位置 1 到 8

typedef float vec3[3];
extern vec3 *quad_position;
extern vec3 *quad_color;

glVertexAttribute(0, 3, GL_FLOAT, GL_FALSE, 0, &quad_position[0]);

glVertexBindingDivisor(1, 4);
glVertexAttribute     (1, 3, GL_FLOAT, GL_FALSE, 0, &quad_position[0]);

glVertexBindingDivisor(2, 4);
glVertexAttribute     (2, 3, GL_FLOAT, GL_FALSE, 0, &quad_position[1]);

glVertexBindingDivisor(3, 4);
glVertexAttribute     (3, 3, GL_FLOAT, GL_FALSE, 0, &quad_position[2]);

glVertexBindingDivisor(4, 4);
glVertexAttribute     (4, 3, GL_FLOAT, GL_FALSE, 0, &quad_position[3]);

glVertexBindingDivisor(5, 4);
glVertexAttribute     (5, 3, GL_FLOAT, GL_FALSE, 0, &quad_color[0]);

glVertexBindingDivisor(6, 4);
glVertexAttribute     (6, 3, GL_FLOAT, GL_FALSE, 0, &quad_color[1]);

glVertexBindingDivisor(7, 4);
glVertexAttribute     (7, 3, GL_FLOAT, GL_FALSE, 0, &quad_color[2]);

glVertexBindingDivisor(8, 4);
glVertexAttribute     (8, 3, GL_FLOAT, GL_FALSE, 0, &quad_color[3]);

将上述内容放入顶点数组对象中是有意义的。使用 VBO 也很有意义，但是您必须手动计算偏移量大小；由于 typedef float vec3编译器为我们 ATM 做数学运算。

完成所有这些设置后，您最终可以独立地进行镶嵌绘制您的四边形。