Qt+OpenGL学习笔记-绘制三角形

zaomengze

已于 2024-07-22 10:41:05 修改

阅读量950

点赞数 15

文章标签： qt 学习笔记

于 2024-07-16 16:14:53 首次发布

本文链接：https://blog.csdn.net/zaomengze/article/details/140466331

版权

OpenGL中任何事物都在3D空间中（即X，Y，Z轴），但是屏幕和窗口都是2D像素数组，导致OpenGL大部分工作是将3D坐标转变为适应你屏幕的2D像素，3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线（Graphics Pipeline，大多译为管线，实际上指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程）管理的。图形渲染管线可以被划分为两个主要部分：第一部分把你的3D坐标转换为2D坐标，第二部分是把2D坐标转变为实际的有颜色的像素。2D坐标和像素也是不同的，2D坐标精确表示一个点在2D空间中的位置，而2D像素是这个点的近似值，2D像素受到你的屏幕/窗口分辨率的限制。

显卡上有成千上万的小处理核心，它们在GPU上为每一个（渲染管线）阶段运行各自的小程序，从而在图形渲染管线中快速处理你的数据。这些小程序叫做着色器(Shader)。

图形渲染管线的可编程部分：顶点着色器(必选)、几何着色器(可选)、片段着色器(必选)。

在片段着色器运行之前会执行裁切(Clipping)。裁切会丢弃超出你的视图以外的所有像素，用来提升执行效率。

1）顶点输入

OpenGL是3D图形库，所以OpenGL中我们指定的坐标都是3D坐标(X,Y,Z)，OpenGL仅当3D坐标在3个轴（x、y和z）上-1.0到1.0的范围内时才处理它。所有在这个范围内的坐标叫做标准化设备坐标(Normalized Device Coordinates)，此范围内的坐标最终显示在屏幕上（在这个范围以外的坐标则不会显示）

顶点缓冲对象(Vertex Buffer Objects, VBO)

OpenGL对象，其会在*GPU内存*(称为显存)中存储大量顶点(和其他的OpenGL对象一样，有一个独一无二的ID)。所以我们可以使用glGenBuffers函数生成一个带有缓冲ID的VBO对象：

unsigned int VBO;
glGenBuffers(1, &VBO);

OpenGL有很多缓冲对象类型，顶点缓冲对象的缓冲类型是GL_ARRAY_BUFFER。OpenGL允许我们同时绑定多个缓冲，只要它们是不同的缓冲类型。我们可以使用glBindBuffer函数把新创建的缓冲绑定到GL_ARRAY_BUFFER目标上：

glBindBuffer(GL_ARRAY_BUFFER, VBO);

使用的任何（在GL_ARRAY_BUFFER目标上的）缓冲调用都会用来配置当前绑定的缓冲(VBO)。然后可以调用glBufferData函数，它会把之前定义的顶点数据复制到缓冲的内存中：

glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);

glBufferData是一个专门用来把用户定义的数据复制到当前绑定缓冲的函数。它的第一个参数是目标缓冲的类型：顶点缓冲对象当前绑定到GL_ARRAY_BUFFER目标上。第二个参数指定传输数据的大小(以字节为单位)；用一个简单的sizeof计算出顶点数据大小就行。第三个参数是希望发送的实际数据。

第四个参数指定了希望显卡如何管理给定的数据。它有三种形式：

GL_STATIC_DRAW ：数据不会或几乎不会改变。
GL_DYNAMIC_DRAW：数据会被改变很多。
GL_STREAM_DRAW ：数据每次绘制时都会改变。

三角形的位置数据不会改变，每次渲染调用时都保持原样，所以它的使用类型最好是GL_STATIC_DRAW。如果，比如说一个缓冲中的数据将频繁被改变，那么使用的类型就是GL_DYNAMIC_DRAW或GL_STREAM_DRAW，这样就能确保显卡把数据放在能够高速写入的内存部分。

现在已经把顶点数据储存在显卡的内存中，用VBO这个顶点缓冲对象管理。

2）顶点着色器

使用着色器语言GLSL(OpenGL Shading Language)编写顶点着色器。下面你会看到一个非常基础的GLSL顶点着色器的源代码：

#version 330 core //OpenGL 3.3版本
layout (location = 0) in vec3 aPos;//指定输入变量的位置（location）为0，声明一个输入变量 aPos，类型为 vec3（三维向量）

void main()
{
    gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);
}

gl_Position: 一个内置的 GLSL 变量，表示顶点的最终位置。必须在顶点着色器中赋值。前三个分量分别是顶点的 x、y、z 坐标，第四个分量是齐次坐标 w，设置为 1.0。这是因为在 OpenGL 中，顶点位置是用四维向量表示的，齐次坐标用于透视除法和其他几何变换。

3）编译着色器

暂时将顶点着色器的源代码硬编码在代码文件顶部的C风格字符串中：

const char *vertexShaderSource = "#version 330 core\n"
    "layout (location = 0) in vec3 aPos;\n"
    "void main()\n"
    "{\n"
    "   gl_Position = vec4(aPos.x, aPos.y, aPos.z, 1.0);\n"
    "}\0";

为了能够让OpenGL使用它，必须在运行时动态编译它的源代码。

首先要做的是创建一个着色器对象，注意还是用ID来引用的。所以储存这个顶点着色器为unsigned int，然后用glCreateShader创建这个着色器：

unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);// 创建顶点着色器对象

需要创建的着色器类型以参数形式提供给glCreateShader。由于正在创建一个顶点着色器，传递的参数是GL_VERTEX_SHADER。

glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);// 关联着色器源代码
glCompileShader(vertexShader);//编译顶点着色器

glShaderSource函数把要编译的着色器对象作为第一个参数。第二参数指定了传递的源码字符串数量，这里只有一个。第三个参数是顶点着色器真正的源码，第四个参数先设置为NULL。

4）片段着色器

片段着色器(Fragment Shader)是第二个也是最后一个打算创建的用于渲染三角形的着色器。片段着色器所做的是计算像素最后的颜色输出。

计算机图形中颜色被表示为有4个元素的数组：红色、绿色、蓝色和alpha(透明度)分量，通常缩写为RGBA。当在OpenGL或GLSL中定义一个颜色的时候，把颜色每个分量的强度设置在0.0到1.0之间。比如说设置红为1.0f，绿为1.0f，会得到两个颜色的混合色，即黄色。这三种颜色分量的不同调配可以生成超过1600万种不同的颜色

#version 330 core
out vec4 FragColor;//输出变量FragColor

void main()
{
    FragColor = vec4(1.0f, 0.5f, 0.2f, 1.0f);
}

编译片段着色器的过程与顶点着色器类似，只不过使用GL_FRAGMENT_SHADER常量作为着色器类型：

unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
glCompileShader(fragmentShader);

两个着色器现在都编译了，剩下的事情是把两个着色器对象链接到一个用来渲染的着色器程序(Shader Program)中。

5）着色器程序

着色器程序对象(Shader Program Object)是多个着色器合并之后并最终链接完成的版本。如果要使用刚才编译的着色器必须把它们链接(Link)为一个着色器程序对象，然后在渲染对象的时候激活这个着色器程序。已激活着色器程序的着色器将在发送渲染调用的时候被使用。

当链接着色器至一个程序的时候，它会把每个着色器的输出链接到下个着色器的输入。当输出和输入不匹配的时候，会得到一个连接错误。

unsigned int shaderProgram = glCreateProgram();

glCreateProgram函数创建一个程序，并返回新创建程序对象的ID引用。现在我们需要把之前编译的着色器附加到程序对象上，然后用glLinkProgram链接它们：

glAttachShader(shaderProgram, vertexShader);
glAttachShader(shaderProgram, fragmentShader);
glLinkProgram(shaderProgram);

得到的结果就是一个程序对象，可以调用glUseProgram函数，用刚创建的程序对象作为它的参数，以激活这个程序对象：

glUseProgram(shaderProgram);

在把着色器对象链接到程序对象以后，记得删除着色器对象

glDeleteShader(vertexShader);
glDeleteShader(fragmentShader);// 删除顶点着色器和片段着色器(不能将着色器程序也给delete掉)

现在，已经把输入顶点数据发送给了GPU，并指示了GPU如何在顶点和片段着色器中处理它。但还没结束，OpenGL还不知道它该如何解释内存中的顶点数据，以及它该如何将顶点数据链接到顶点着色器的属性上。我们需要告诉OpenGL怎么做。

6）链接顶点属性

在渲染前指定OpenGL该如何解释顶点数据，因为传到顶点着色器的是一坨并没有实际意义的数据。

顶点缓冲数据会被解析为下图：

位置数据被储存为32位（4字节）浮点值。
每个位置包含3个这样的值。
在这3个值之间没有空隙（或其他值）。这几个值在数组中紧密排列(Tightly Packed)。
数据中第一个值在缓冲开始的位置。

使用glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据（应用到逐个顶点属性上）：

glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
// 第一个参数：这里的0和顶点着色器的location = 0对应
// 第二个参数：指定顶点属性的大小，这里说明每个顶点是个vec3的数据
// 第三个参数：说明vec3中每个数的类型是GL_FLOAT类型
// 第四个参数：表明是否需要将数据进行标准化，若设置为true,则数据会被归一化到[0,1]之间
// 第五个参数：步长，表示连续的顶点属性组之间的间隔，表示下一个顶点应该跨越的距离为多少才能取到值
// 第六个参数：偏移量，表示在当前这个步长内取值是否需要进行偏移，这里直接不用偏移，直接从第0个位置开始取值
glEnableVertexAttribArray(0);

7）顶点数组对象

顶点数组对象(Vertex Array Object, VAO)可以像顶点缓冲对象那样被绑定，任何随后的顶点属性调用都会存储在这个VAO中。

好处：当配置顶点属性指针时，你只需要将那些调用执行一次，之后再绘制物体的时候只需要绑定相应的VAO就行了。这使得不同顶点数据和属性配置之间切换变得非常简单，只需要绑定不同的VAO就行了。

OpenGL的核心模式要求我们使用VAO，所以它知道该如何处理我们的顶点输入。如果我们绑定VAO失败，OpenGL会拒绝绘制任何东西。

// 创建一个VAO对象
unsigned int VAO1;
glGenVertexArrays(1, &VAO1);


// ..:: 初始化代码（只运行一次 (除非你的物体频繁改变)） :: ..
// 1. 绑定VAO
glBindVertexArray(VAO1);
// 2. VBO的数据
glBindBuffer(GL_ARRAY_BUFFER, VBO);
glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
// 3. 开始进行数据解析
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);
glEnableVertexAttribArray(0);


// ..:: 绘制代码（渲染循环中） :: ..
// 绘制物体
glUseProgram(shaderProgram);
// 在使用时重新绑定一下VAO1，也就是使用了刚才的一系列的配置
glBindVertexArray(VAO1);
// 一些绘制工作相关(绘制完进行VAO的解绑)
// ......paint

元素缓冲对象

元素缓冲对象(Element Buffer Object，EBO)，也叫索引缓冲对象(Index Buffer Object，IBO)。要解释元素缓冲对象的工作方式最好还是举个例子：假设不再绘制一个三角形而是绘制一个矩形。可以绘制两个三角形来组成一个矩形（OpenGL主要处理三角形）。这会生成下面的顶点的集合：

float vertices[] = {
    // 第一个三角形
    0.5f, 0.5f, 0.0f,   // 右上角
    0.5f, -0.5f, 0.0f,  // 右下角
    -0.5f, 0.5f, 0.0f,  // 左上角
    // 第二个三角形
    0.5f, -0.5f, 0.0f,  // 右下角
    -0.5f, -0.5f, 0.0f, // 左下角
    -0.5f, 0.5f, 0.0f   // 左上角
};

可以看到，有几个顶点叠加了。指定了右下角和左上角两次！一个矩形只有4个而不是6个顶点，这样就产生50%的额外开销。当有包括上千个三角形的模型之后这个问题会更糟糕，这会产生一大堆浪费。更好的解决方案是只储存不同的顶点，并设定绘制这些顶点的顺序。这样子只要储存4个顶点就能绘制矩形了，之后只要指定绘制的顺序就行了。如果OpenGL提供这个功能就好了，对吧？

值得庆幸的是，元素缓冲区对象的工作方式正是如此。 EBO是一个缓冲区，就像一个顶点缓冲区对象一样，它存储 OpenGL 用来决定要绘制哪些顶点的索引。这种所谓的索引绘制(Indexed Drawing)正是问题的解决方案。首先，先要定义（不重复的）顶点，和绘制出矩形所需的索引：.

float vertices[] = {
    0.5f, 0.5f, 0.0f,   // 右上角
    0.5f, -0.5f, 0.0f,  // 右下角
    -0.5f, -0.5f, 0.0f, // 左下角
    -0.5f, 0.5f, 0.0f   // 左上角
};

unsigned int indices[] = {
    // 注意索引从0开始! 
    // 此例的索引(0,1,2,3)就是顶点数组vertices的下标，
    // 这样可以由下标代表顶点组合成矩形

    0, 1, 3, // 第一个三角形
    1, 2, 3  // 第二个三角形
};

当使用索引的时候，只定义了4个顶点，而不是6个。下一步需要创建元素缓冲对象：

unsigned int EBO;
glGenBuffers(1, &EBO);

与VBO类似，先绑定EBO然后用glBufferData把索引复制到缓冲里。同样，和VBO类似，会把这些函数调用放在绑定和解绑函数调用之间，只不过这次把缓冲的类型定义为GL_ELEMENT_ARRAY_BUFFER。

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);

注意：传递了GL_ELEMENT_ARRAY_BUFFER当作缓冲目标。最后一件要做的事是用glDrawElements来替换glDrawArrays函数，表示要从索引缓冲区渲染三角形。使用glDrawElements时，会使用当前绑定的索引缓冲对象中的索引进行绘制：

glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
// glDrawElements使用当前绑定的索引缓冲对象中的索引进行绘制
// 第一个参数：绘制模式
// 第二个参数：打算绘制的顶点个数
// 第三个参数：索引的类型
// 第四个参数：指定EBO中的偏移量

为了使这个四边形看起来更直观，引入线框模式和填充模式（默认是填充模式）。

将下面的代码添加到初始化的地方即可：

// 函数配置OpenGL如何绘制图元。
// 第一个参数：将其应用到所有的三角形的正面和背面；
// 第二个参数：用线来绘制。
// 之后的绘制调用会一直以线框模式绘制三角形，直到我们用glPolygonMode(GL_FRONT_AND_BACK, GL_FILL)将其设置回默认模式。
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);

运行结果截图：

zaomengze

关注

15
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
Qt+OpenGL学习笔记-绘制三角形

OpenGL中任何事物都在3D空间中（即X，Y，Z轴），但是屏幕和窗口都是2D像素数组，导致OpenGL大部分工作是将3D坐标转变为适应你屏幕的2D像素，3D坐标转为2D坐标的处理过程是由OpenGL的图形渲染管线（Graphics Pipeline，大多译为管线，实际上指的是一堆原始图形数据途经一个输送管道，期间经过各种变化处理最终出现在屏幕的过程）管理的。图形渲染管线可以被划分为两个主要部分：第一部分把你的，第二部分是把。
复制链接

扫一扫