LearnOpenGL小练习（QOpenGLWidget版本）

你好，三角形

1.绘制两个彼此相连的三角形

画两个独立的三角形，给出两个三角形顶点，使用GL_TRIANGLES绘图即可。

关键代码

void MyOpenglWgt::initializeGL()
{initializeOpenGLFunctions();  // 1. 创建ShaderProgram着色器：加载顶点着色器代码和片元着色器代码shaderProgram.addShaderFromSourceCode(QOpenGLShader::Vertex,  "#version 330 core\n""layout(location = 0) in vec2 aPos;\n""void main() { gl_Position = vec4(aPos, 0.0, 1.0); }");shaderProgram.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(1.0, 0.5, 0.2, 1.0); }");shaderProgram.link();   vao.create();vao.bind();vbo.create();vbo.bind();vbo.setUsagePattern(QOpenGLBuffer::DynamicDraw);// 顶点数据float vertices[] = {// 第一个三角形-1.0f, -0.5f,   // 左下角0.0f, -0.5f,   // 右下角-0.5f, 0.5f,   // 顶点// 第二个三角形0.0f, -0.5f,  // 左下角1.0f, -0.5f,  // 右下角0.5f,  0.5f,  // 顶点};vbo.allocate(vertices, sizeof(vertices));  // 配置顶点属性glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo.release();vao.release();
}void MyOpenglWgt::paintGL()
{glClear(GL_COLOR_BUFFER_BIT);shaderProgram.bind();  vao.bind();            glDrawArrays(GL_TRIANGLES, 0, 6); // GL_TRIANGLES:以每三个顶点绘制一个独立的三角形vao.release();shaderProgram.release();
}

效果图

2.创建相同的两个三角形，但对它们的数据使用不同的VAO和VBO

在初始化时候，直接用两个vao和vbo分别存储两个三角形。
在绘制时，先绑定第一个VAO，绘制第一个三角形，然后绑定第二个VAO，绘制第二个。

关键代码

void MyOpenglWgt::initializeGL()
{initializeOpenGLFunctions();shaderProgram.addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout(location = 0) in vec2 aPos;\n""void main() { gl_Position = vec4(aPos, 0.0, 1.0); }");shaderProgram.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(1.0, 0.5, 0.2, 1.0); }");shaderProgram.link();vao.create();vao.bind();vbo.create();vbo.bind();vbo.setUsagePattern(QOpenGLBuffer::DynamicDraw);// 顶点数据float vertices[] = {// 第一个三角形-1.0f, -0.5f,   // 左下角0.0f, -0.5f,   // 右下角-0.5f, 0.5f,   // 顶点};vbo.allocate(vertices, sizeof(vertices));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo.release();vao.release();vao_2.create();vao_2.bind();vbo_2.create();vbo_2.bind();vbo_2.setUsagePattern(QOpenGLBuffer::DynamicDraw);// 顶点数据float vertices2[] = {// 第二个三角形0.0f, -0.5f,  // 左下角1.0f, -0.5f,  // 右下角0.5f,  0.5f,  // 顶点};vbo_2.allocate(vertices2, sizeof(vertices2));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo_2.release();vao_2.release();
}void MyOpenglWgt::paintGL()
{glClear(GL_COLOR_BUFFER_BIT);shaderProgram.bind();vao.bind();glDrawArrays(GL_TRIANGLES, 0, 3);//绘制第一个三角形vao.release();vao_2.bind();glDrawArrays(GL_TRIANGLES, 0, 3);//绘制第二个三角形vao_2.release();shaderProgram.release();
}

效果图

3.创建两个着色器程序，第二个程序使用一个不同的片段着色器

在初始化时，再添加一个着色器，修改着色器代码中的FragColor值。
在绘制时，使用不同的着色器绘制三角形即可。

关键代码

void MyOpenglWgt::initializeGL()
{initializeOpenGLFunctions();// 第一个着色器shaderProgram.addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout(location = 0) in vec2 aPos;\n""void main() { gl_Position = vec4(aPos, 0.0, 1.0); }");shaderProgram.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(1.0, 0.5, 0.2, 1.0); }");shaderProgram.link();vao.create();vao.bind();vbo.create();vbo.bind();vbo.setUsagePattern(QOpenGLBuffer::DynamicDraw);// 上传第一个三角形的顶点数据并配置顶点属性float vertices[] = {// 第一个三角形-1.0f, -0.5f,   // 左下角0.0f, -0.5f,   // 右下角-0.5f, 0.5f,   // 顶点};vbo.allocate(vertices, sizeof(vertices));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo.release();vao.release();// 第二个着色器shaderProgram_2.addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout(location = 0) in vec2 aPos;\n""void main() { gl_Position = vec4(aPos, 0.0, 1.0); }");shaderProgram_2.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(0.9, 0.6, 0.8, 1.0); }");shaderProgram_2.link();vao_2.create();vao_2.bind();vbo_2.create();vbo_2.bind();vbo_2.setUsagePattern(QOpenGLBuffer::DynamicDraw);// 上传第二个三角形的顶点数据并配置顶点属性float vertices2[] = {// 第二个三角形0.0f, -0.5f,  // 左下角1.0f, -0.5f,  // 右下角0.5f,  0.5f,  // 顶点};vbo_2.allocate(vertices2, sizeof(vertices2));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo_2.release();vao_2.release();
}void MyOpenglWgt::paintGL()
{glClear(GL_COLOR_BUFFER_BIT);// 绘制第一个三角形shaderProgram.bind();vao.bind();glDrawArrays(GL_TRIANGLES, 0, 3);vao.release();shaderProgram.release();// 绘制第二个三角形shaderProgram_2.bind();vao_2.bind();glDrawArrays(GL_TRIANGLES, 0, 3);vao_2.release();shaderProgram_2.release();
}

效果图

着色器

1.修改顶点着色器让三角形上下颠倒

使用两个相同的三角形顶点数据，在顶点着色器中将y轴的值改为负值即可。

关键代码

void MyOpenglWgt::initializeGL()
{initializeOpenGLFunctions();// 顶点数据float vertices[] = {-1.0f, -0.5f,   // 左下角0.0f, -0.5f,   // 右下角-0.5f, 0.0f,   // 顶点};// 第一个着色器shaderProgram.addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout(location = 0) in vec2 aPos;\n""void main() { gl_Position = vec4(aPos, 0.0, 1.0); }");shaderProgram.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(1.0, 0.5, 0.2, 1.0); }");shaderProgram.link();vao.create();vao.bind();vbo.create();vbo.bind();vbo.setUsagePattern(QOpenGLBuffer::DynamicDraw);vbo.allocate(vertices, sizeof(vertices));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo.release();vao.release();// 第二个着色器shaderProgram_2.addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout(location = 0) in vec2 aPos;\n""void main() { gl_Position = vec4(aPos.x, -aPos.y, 0.0, 1.0); }");shaderProgram_2.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(0.9, 0.6, 0.8, 1.0); }");shaderProgram_2.link();vao_2.create();vao_2.bind();vbo_2.create();vbo_2.bind();vbo_2.setUsagePattern(QOpenGLBuffer::DynamicDraw);vbo_2.allocate(vertices, sizeof(vertices));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo_2.release();vao_2.release();
}

效果图

2.使用uniform定义一个水平偏移量，在顶点着色器中使用这个偏移量把三角形移动到屏幕右侧

在顶点着色器中，定义变量offset，并将该值加到x轴上。

uniform float offset;
void main() { gl_Position = vec4(aPos.x + offset, aPos.y, 0.0, 1.0);

Uniform的设置时机很重要: 在设置uniform之前，必须确保着色器程序已经绑定，否则setUniformValue可能不起作用。

shaderProgram_2.bind();
shaderProgram_2.setUniformValue("offset", 0.8f);
shaderProgram_2.release();

关键代码

void MyOpenglWgt::initializeGL()
{initializeOpenGLFunctions();// 顶点数据float vertices[] = {-1.0f, -0.5f,   // 左下角0.0f, -0.5f,   // 右下角-0.5f, 0.0f,   // 顶点};shaderProgram.addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout(location = 0) in vec2 aPos;\n""void main() { gl_Position = vec4(aPos, 0.0, 1.0); }");shaderProgram.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(1.0, 0.5, 0.2, 1.0); }");shaderProgram.link();vao.create();vao.bind();vbo.create();vbo.bind();vbo.setUsagePattern(QOpenGLBuffer::DynamicDraw);vbo.allocate(vertices, sizeof(vertices));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo.release();vao.release();// 第二个着色器shaderProgram_2.addShaderFromSourceCode(QOpenGLShader::Vertex,"#version 330 core\n""layout(location = 0) in vec2 aPos;\n""uniform float offset;\n""void main() { gl_Position = vec4(aPos.x + offset, aPos.y, 0.0, 1.0); }");shaderProgram_2.addShaderFromSourceCode(QOpenGLShader::Fragment,"#version 330 core\n""out vec4 FragColor;\n""void main() { FragColor = vec4(0.9, 0.6, 0.8, 1.0); }");shaderProgram_2.link();vao_2.create();vao_2.bind();vbo_2.create();vbo_2.bind();vbo_2.setUsagePattern(QOpenGLBuffer::DynamicDraw);vbo_2.allocate(vertices, sizeof(vertices));glVertexAttribPointer(0, 2, GL_FLOAT, GL_FALSE, 2 * sizeof(float), nullptr);glEnableVertexAttribArray(0);vbo_2.release();vao_2.release();
}void MyOpenglWgt::paintGL()
{glClear(GL_COLOR_BUFFER_BIT);// 绘制第一个三角形shaderProgram.bind();vao.bind();glDrawArrays(GL_TRIANGLES, 0, 3);vao.release();shaderProgram.release();// 绘制第二个三角形shaderProgram_2.bind();vao_2.bind();shaderProgram_2.setUniformValue("offset", 0.8f);// 在设置uniform之前，必须确保着色器程序已经绑定glDrawArrays(GL_TRIANGLES, 0, 3);vao_2.release();shaderProgram_2.release();
}

效果图