c++ - QOpenGLWidget绘制三角形

Question

如何更改以下代码，使其真正绘制出三角形？

首先是着色器，然后是派生自 QOpenglWidget 的 glwiedget 类的实现。

// shaders here  
    static const char* vertexShaderSource =
        "#version 330 core\n"
        "in vec3 posAttr;\n"
        //"attribute lowp vec3 colAttr;\n"
        //"varying lowp vec4 col;\n"
        //"uniform highp mat4 matrix;\n"
        "void main() {\n"
        //"   col = colAttr;\n"
        "   gl_Position = vec4(posAttr, 1) ;\n"
        "}\n";
// fragment shader
    static const char* fragmentShaderSource =
        "#version 330 core\n"
        //"varying lowp vec4 col;\n"
        "void main() {\n"
        "gl_FragColor = vec4(1.0, 0.0, 1.0, 0.0);\n"
        "}\n";


Glwidget::Glwidget(QWidget* parent):QOpenGLWidget(parent)
{

//
}

Glwidget::~Glwidget()
{
    cleanup();
}

void Glwidget::initializeGL()
{
    connect(context(), &QOpenGLContext::aboutToBeDestroyed, this, &Glwidget::cleanup);

    initializeOpenGLFunctions();
    glClearColor(.0f, .0f, .0f, 1.0f);
    shader = new QOpenGLShaderProgram(this);

    shader->addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource);
    shader->addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource);
//    posAttribute = shader->attributeLocation("posAttr");
    //colAttribute = shader->attributeLocation("colAttr");
    //matrixAttribute = shader->uniformLocation("matrix");


    Q_ASSERT(shader->link());
    Q_ASSERT(shader->bind());
    //shader->release();
    glEnable(GL_DEPTH_TEST);
    glEnable(GL_CULL_FACE);
}
void Glwidget::paintGL()
{
    glClear(GL_COLOR_BUFFER_BIT);
    makeCurrent();
    matrix.perspective(60.0, 4.0f/3.0f, 0.1f, 10.0f);
    matrix.translate(0, 0, -2);
    matrix.rotate(100.0f, 0, 1, 0);
    //shader->setUniformValue(matrixAttribute, matrix);

//    shader->bind();
    GLfloat vertices[] = {
        0.0f, 0.707f, 1.0f,
        -0.5f, -0.5f, 1.0f,
        0.5f, -0.5f, 1.0f
    };
    shader->setAttributeArray(posAttribute,vertices, 3);

    GLfloat colors[] = {
        1.0f, 0.0f, 0.0f,
        0.0f, 1.0f, 0.0f,
        0.0f, 0.0f, 1.0f
    };

     glVertexAttribPointer(posAttribute, 3, GL_FLOAT, GL_FALSE, 0, vertices);
     //glVertexAttribPointer(colAttribute, 3, GL_FLOAT, GL_FALSE, 0, colors);

     glEnableVertexAttribArray(posAttribute);
     //glEnableVertexAttribArray(colAttribute);

     glDrawArrays(GL_TRIANGLES, 0, 1);

     glDisableVertexAttribArray(posAttribute);
     //glDisableVertexAttribArray(colAttribute);
     //shader->release();
}

void Glwidget::resizeGL(int w, int h)
{
    matrix.setToIdentity();
    matrix.perspective(45.0f, w / float(h), 0.01f, 1000.0f);
    //glViewport(0, 0, w, h);
}

void Glwidget::mousePressEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
}

void Glwidget::mouseMoveEvent(QMouseEvent *event)
{
    Q_UNUSED(event);
}

void Glwidget::cleanup()
{
    if (shader == nullptr)
        return;
    makeCurrent();

    delete shader;
    shader = 0;
    doneCurrent();
}

Answer 1

你必须在程序链接后确定posAttr的属性索引:

Q_ASSERT(shader->link());
posAttribute = shader->attributeLocation("posAttr");

由于启用了深度测试，您必须清除深度缓冲区。参见 glClear :

glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

您不使用任何模型、 View 或投影矩阵，因此必须在标准化设备空间中设置坐标。这意味着所有坐标都必须在 [-1.0, 1.0] 范围内，尤其是必须考虑 -1.0 和 1.0 的近平面和远平面。默认情况下，深度测试函数是 GL_LESS ，所以你的 tringle 被远平面裁剪了，因为 1.0 的 z 坐标不小于 1.0 的远平面。对顶点使用 0.0 的 z 坐标(当然 0.99 之类的东西也可以):

GLfloat vertices[] = { 0.0f, 0.707f, 0.0f, -0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f };
shader->setAttributeArray(posAttribute,vertices, 3);    

glDrawArrays 的 3d 参数必须是顶点数而不是基元数:

 glDrawArrays(GL_TRIANGLES, 0, 3);

相关代码部分可能如下所示:

void Glwidget::initializeGL()
{
    connect(context(), &QOpenGLContext::aboutToBeDestroyed, this, &Glwidget::cleanup);

    initializeOpenGLFunctions();
    glClearColor(.0f, .0f, .0f, 1.0f);
    shader = new QOpenGLShaderProgram(this);

    shader->addShaderFromSourceCode(QOpenGLShader::Vertex, vertexShaderSource);
    shader->addShaderFromSourceCode(QOpenGLShader::Fragment, fragmentShaderSource);

    Q_ASSERT(shader->link());
    posAttribute = shader->attributeLocation("posAttr");

    Q_ASSERT(shader->bind());

    glEnable(GL_DEPTH_TEST);
    glEnable(GL_CULL_FACE);
}

void Glwidget::paintGL()
{
     glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

     GLfloat vertices[] = { 0.0f, 0.707f, 0.0f, -0.5f, -0.5f, 0.0f, 0.5f, -0.5f, 0.0f };
     shader->setAttributeArray(posAttribute,vertices, 3);

     glEnableVertexAttribArray(posAttribute);
     glDrawArrays(GL_TRIANGLES, 0, 3);
     glDisableVertexAttribArray(posAttribute);
}

请注意，自 Face Culling已启用，您必须遵守基元的缠绕顺序(在您的代码中就是这种情况)。

---

此外，正如@derhass 在评论中提到的，您必须更改片段着色器。你必须定义一个 Output Variable .
(旁注，使用 Raw string literals ):

static const char* fragmentShaderSource = R"(
    #version 330 core

    out vec4 fragColor;

    void main() {
        fragColor = vec4(1.0, 0.0, 1.0, 0.0);
    }
)";

---

查看预览:

---

如果你想画线而不是多边形，那么你可以通过 GL_LINE_LOOP 来完成。参见 Line primitives .

glDrawArrays(GL_LINE_LOOP, 0, 3);