QT+Opengl使用两个Shader绘制两个不同颜色的三角形

QT+OpenGL基础:

1. QT+OpenGL创建一个三角形并动态改变三角形颜色
2. OpenGL中的VAO、VBO、EBO
3. QT+OpenGL 使用VAO、VBO、EBO结合绘制一个正方形
4. QT+OpenGL使用一组顶点绘制两个三角形
5. QT+OpenGL通过两个VAO来管理两个三角形
6. QT+Opengl使用两个Shader绘制两个不同颜色的三角形
7. QT+OpenGL从顶点着色器传递颜色数据给片元着色器
8. QT+OpenGL简单纹理贴图
9. QT+OpenGL纹理与颜色混合
10. Qt+OpenGL混合两个纹理，并可以改变纹理透明度

一、概述

　　需求：使用两个不同的shader绘制两个不同颜色的三角形

　　此需求的重点在于绘制两个不同颜色的三角形。从这个需求上我们大概能想到使用两个shader分别渲染。

　　ps：这一篇是基于上一篇的，其他内容不变，只是新增了不同颜色的片元着色器的渲染（分别渲染）

　　效果：

　　

二、代码示例

　　1.定义顶点坐标

float firstTriangle[] = {
    -0.9f, -0.5f, 0.0f,  // left 
    -0.0f, -0.5f, 0.0f,  // right
    -0.45f, 0.5f, 0.0f,  // top 
};
float secondTriangle[] = {
    0.0f, -0.5f, 0.0f,  // left
    0.9f, -0.5f, 0.0f,  // right
    0.45f, 0.5f, 0.0f   // top 
};

　　2.定义顶点着色器、片元着色器代码

//顶点着色器代码
#version 330 core
layout (location = 0) in vec3 aPos;
void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

//片元着色器代码（红色）
#version 330 core
out vec4 FragColor;
void main(void)
{
    FragColor = vec4(1.0f, 0.0f, 0.0f, 1.0f);
}

//片元着色器（黄色）
#version 330 core
out vec4 FragColor;
void main(void)
{
    FragColor = vec4(1.0f, 1.0f, 0.0f, 1.0f);
}

　　3.定义两个program进行分别加载渲染

//编译顶点着色器和片元着色器
GLuint vertexShader = getShaderId(GL_VERTEX_SHADER, ":/QtForOpenCV4Tool/shader/two_triangle.vert");
GLuint fragmentShader = getShaderId(GL_FRAGMENT_SHADER, ":/QtForOpenCV4Tool/shader/two_triangle.frag");
GLuint fragmentShaderYello = getShaderId(GL_FRAGMENT_SHADER, ":/QtForOpenCV4Tool/shader/two_triangle_yello.frag");
programId1 = glCreateProgram();
programId2 = glCreateProgram();
glAttachShader(programId1, vertexShader);
glAttachShader(programId1, fragmentShader);
glLinkProgram(programId1);
getLinkProgramErrorInfo(programId1);

glAttachShader(programId2, vertexShader);
glAttachShader(programId2, fragmentShaderYello);
glLinkProgram(programId2);
getLinkProgramErrorInfo(programId2);

glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);
glDeleteShader(fragmentShaderYello);

　　4.分别定义VAO、VBO将数据一次性copy给GPU，并告知GPU如何解析这些顶点数据

//创建VAO、VBO
glGenVertexArrays(2, VAOs);
glGenBuffers(2, VBOs);
//第一对VAO和VBO关联
glBindVertexArray(VAOs[0]);
glBindBuffer(GL_ARRAY_BUFFER, VBOs[0]);
glBufferData(GL_ARRAY_BUFFER, sizeof(firstTriangle), firstTriangle, GL_STATIC_DRAW);//将数据传给VBO
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//告知显卡顶点数组该如何解析
glEnableVertexAttribArray(0);

//第二对VAO和VBO关联
glBindVertexArray(VAOs[1]);
glBindBuffer(GL_ARRAY_BUFFER, VBOs[1]);
glBufferData(GL_ARRAY_BUFFER, sizeof(secondTriangle), secondTriangle, GL_STATIC_DRAW);//将数据传给VBO
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);//告知显卡顶点数组该如何解析
glEnableVertexAttribArray(0);

　　5.分别绘制这两个三角形

glUseProgram(programId1);
glBindVertexArray(VAOs[0]);
glDrawArrays(GL_TRIANGLES, 0, 3);

glUseProgram(programId2);
glBindVertexArray(VAOs[1]);
glDrawArrays(GL_TRIANGLES, 0, 3);