随笔 - 632  文章 - 17  评论 - 54  阅读 - 93万

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);

 

posted on   飘杨......  阅读(75)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 物流快递公司核心技术能力-地址解析分单基础技术分享
· .NET 10首个预览版发布:重大改进与新特性概览!
· 单线程的Redis速度为什么快?
· 展开说说关于C#中ORM框架的用法!
· Pantheons:用 TypeScript 打造主流大模型对话的一站式集成库
历史上的今天:
2023-08-22 ARouter源码再分析
2013-08-22 Android调用系统的发邮件功能
2013-08-22 Android向手机通讯录中的所有的联系人(包括SIM卡),向手机通讯录中插入联系人
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示