[OpenGL]使用OpenGL配合EBO绘制多个三角形

刘好念的图形学修行手册

已于 2024-09-22 08:27:33 修改

阅读量455

点赞数 4

分类专栏：计算机图形学文章标签： OpenGL 计算机图形学 C++

于 2024-09-15 11:33:03 首次发布

本文链接：https://blog.csdn.net/Strengthennn/article/details/141292332

版权

计算机图形学专栏收录该内容

15 篇文章 0 订阅

订阅专栏

一、简介

本文介绍了如何使用OpenGL绘制多个三角形。在绘制多个三角形时，使用EBO管理顶点数据，使用5个顶点数据，绘制出两个三角形。其中第一个三角形使用顶点0，顶点1和顶点2。第二个三角形使用顶点0，顶点3和顶点4。

按照本文代码实现后，理论上可以得到以下结果：

绘制结果

二、使用OpenGL绘制多个三角形

0. 环境需要

Linux ，或者 windos下使用wsl2。
已经安装完成GLFW和GLAD。请参考[OpenGL] wsl2上安装使用cmake+OpenGL教程。

1. 项目目录

项目目录

2. CMakeLists.txt代码

cmake_minimum_required(VERSION 3.10)
set(CMAKE_CXX_STANDARD 14)

project(OpenGL_Hello_More_Triangles)

include_directories(include)

find_package(glfw3 REQUIRED)
file(GLOB project_file main.cpp glad.c)
add_executable(${PROJECT_NAME} ${project_file})
target_link_libraries(${PROJECT_NAME} glfw)

3. main.cpp代码

1). 代码整体流程

初始化glfw，glad，窗口
构建，编译 vertex shader 和 fragment shader
准备数据
设置VBO，VAO，和EBO
开始绘制
释放资源

2). main.cpp代码

#include <glad/glad.h>
#include <GLFW/glfw3.h>

#include <iostream>
// 用于处理窗口大小改变的回调函数
void framebuffer_size_callback(GLFWwindow *window, int width, int height);
// 用于处理用户输入的函数
void processInput(GLFWwindow *window);

// 指定窗口默认width和height像素大小
const unsigned int SCR_WIDTH = 800;
const unsigned int SCR_HEIGHT = 600;
/****** vertex shader 和 fragment shader 代码 ******/
// 若对glsl编写的shader程序不了解，可以忽略此处的代码
// vertex shader, 用于处理各顶点的位置信息，此处的vertex shader不会对顶点位置进行操作
// 只需要记住此处我们将顶点 position 数据的 location 设为 0
// layout (location = 0) in vec3 aPos; 这句代码用来设置用到的 顶点 position 数据的location值
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";
// fragment shader，用于处理各顶点的颜色信息，此处的fragment shader将各顶点的颜色(r,g,b,alpha)设置为
// (1.0,0.0,0.0,1.0f)
const char *fragmentShaderSource = "#version 330 core\n"
                                   "out vec4 FragColor;\n"
                                   "void main()\n"
                                   "{\n"
                                   "   FragColor = vec4(1.0,0.0,0.0,1.0f);\n"
                                   "}\n\0";
/************************************/

int main()
{
    /****** 1.初始化glfw, glad, 窗口 *******/
    // glfw 初始化 + 配置 glfw 参数
    glfwInit();
    glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);
    glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);

    // glfw 生成窗口
    GLFWwindow *window = glfwCreateWindow(SCR_WIDTH, SCR_HEIGHT, "LearnOpenGL", NULL, NULL);
    if (window == NULL)
    {
        // 检查是否成功生成窗口，如果没有成功打印出错信息并且退出
        std::cout << "Failed to create GLFW window" << std::endl;
        glfwTerminate();
        return -1;
    }
    // 设置窗口window的上下文
    glfwMakeContextCurrent(window);
    // 配置window变化时的回调函数
    glfwSetFramebufferSizeCallback(window, framebuffer_size_callback);

    // 使用 glad 加载 OpenGL 中的各种函数
    if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    {
        std::cout << "Failed to initialize GLAD" << std::endl;
        return -1;
    }
    /************************************/

    /****** 2.构建，编译 vertex shader 和 fragment shader ******/
    // vertex shader
    unsigned int vertexShader = glCreateShader(GL_VERTEX_SHADER);
    glShaderSource(vertexShader, 1, &vertexShaderSource, NULL);
    glCompileShader(vertexShader);
    // 检查是否成功编译 vertex shader
    int success;
    char infoLog[512];
    glGetShaderiv(vertexShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(vertexShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << infoLog << std::endl;
    }

    // fragment shader
    unsigned int fragmentShader = glCreateShader(GL_FRAGMENT_SHADER);
    glShaderSource(fragmentShader, 1, &fragmentShaderSource, NULL);
    glCompileShader(fragmentShader);
    // 检查是否成功编译 fragment shader
    glGetShaderiv(fragmentShader, GL_COMPILE_STATUS, &success);
    if (!success)
    {
        glGetShaderInfoLog(fragmentShader, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << infoLog << std::endl;
    }

    // 链接 shaders
    unsigned int shaderProgram = glCreateProgram();
    glAttachShader(shaderProgram, vertexShader);
    glAttachShader(shaderProgram, fragmentShader);
    glLinkProgram(shaderProgram);
    // 检查是否成功链接 vertex shader 和 fragment shader
    glGetProgramiv(shaderProgram, GL_LINK_STATUS, &success);
    if (!success)
    {
        glGetProgramInfoLog(shaderProgram, 512, NULL, infoLog);
        std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << infoLog << std::endl;
    }
    glDeleteShader(vertexShader);
    glDeleteShader(fragmentShader);

    /************************************/

    /****** 3.准备数据 *******/
    // 三角形顶点的 position 数据，总共5个顶点数据
    float vertices[] = {
        0.0f,   0.0f, 0.0,  // 位置(0.0,0.0,0.0)
        0.25f,  0.5f, 0.0f, // 位置(0.25,0.5,0.0)
        0.5f,   0.0f, 0.0f, // 位置(0.5,0.0,0.0,)
        -0.25f, 0.5f, 0.0,  // 位置(-0.25,0.5,0.0)
        -0.5f,  0.0f, 0.0f  // 位置(-0.5,0.0,0.0)
    };

    // 三角形三个顶点的 index 数据，指定
    // 我们需要绘制两个三角形，
    // 第一个三角形的三个点的position分别使用 vertices 数组中的第0,第1和第2个点的position数据
    // 第二个三角形的三个点的position分别使用 vertices 数组中的第0,第3和第4个点的position数据
    unsigned int indices[] = {
        0, 1, 2, // 第一个三角形
        0, 3, 4  // 第二个三角形
    };


    /****** 4.设置 VBO, VAO 和 EBO ******/
    // 1). VBO 用来打包三角形各顶点的所有数据（比如position, normal, color等。本文中只用到了position数据，即
    // vertices数组），并将打包好的数据一起传给GPU。
    // 2). EBO 用来打包（存储）待绘制的三角形的索引数据，即 indices 数组，用于指定顶点的顺序。
    // 3). VAO 用于记录顶点属性的格式，即如何从 VBO中提取数据。并存储了EBO数据，从而管理顶点数据的输入配置。

    // 生成 VBO, VAO 和 EBO
    unsigned int VBO, VAO, EBO;
    glGenVertexArrays(1, &VAO); // 生成一个VAO对象
    glGenBuffers(1, &VBO);      // 生成一个VBO对象(VBO对象本质上是一个buffer)
    glGenBuffers(1, &EBO);      // 生成一个EBO对象(EBO对象本质上也是一个buffer)

    // 使用 VBO, VAO 和 EBO 的顺序为:
    // 先绑定 VAO -> 绑定 VBO -> 设置如何读取VBO中数据 -> 解绑VBO -> 绑定 EBO -> 解绑 VAO
    glBindVertexArray(VAO); // 绑定VAO

    // 使用VBO
    // 绑定VBO -> 复制数据到VBO buffer -> 指定数据的使用格式 -> enable相应的数据变量 -> 解绑 VBO
    glBindBuffer(GL_ARRAY_BUFFER, VBO); // 绑定VBO
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices,
                 GL_STATIC_DRAW); // 将vertices中的数据复制到刚刚绑定的VBO buffer中去，VBO buffer是GPU内存上的一块区域

    // 使用glVertexAttribPointer函数告诉OpenGL该如何解析顶点数据
    // glVertexAttribPointer() 需要6个参数，每个参数的含义如下：
    // 1). 指定要配置的顶点属性， 即 shader 中指定 数据 location 值，此处填入 0
    // 2). 指定顶点属性的大小，shader中我们将VBO中的数据传给了一个 vec3 类型的变量 aPos，
    // vec3 是一个包含3个float变量的vector，因此此处填入 3
    // 3). 指定数据的类型，用于使用的是浮点型，因此此处填入 GL_FLOAT
    // 4). 指定是否自动对数据进行归一化，我们不需要自动诡异化，因此此处填入 GL_FALSE
    // 5). 指定VBO中顶点数据组之间的间隔，因为VBO中的数据紧密相连，
    // 每组数据间隔3*float大小，因此此处填入 3*sizeof(float)
    // 6). 指定读取VBO(vertices数组)的起始位置偏移，单位为字节，由于位置数据在数组的开头，所以这里填入 0*sizeof(float)
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void *)(0*sizeof(float))); // 设置如何读取VBO中数据

    glEnableVertexAttribArray(0); // 启用 location = 0 处的数据，因此该函数的参数为 0

    glBindBuffer(GL_ARRAY_BUFFER, 0); // 解绑VBO
    

    // 使用EBO
    // 绑定EBO -> 复制数据到EBO buffer
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO); // 绑定EBO
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices,
                 GL_STATIC_DRAW); // 将indices中的数据复制到刚刚绑定的EBO buffer中去，EBO buffer是GPU内存上的一块区域



                 
    // remember: do NOT unbind the EBO while a VAO is active as the bound element buffer object IS stored in the VAO;
    // keep the EBO bound.
    // glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
    // 注意！
    // 在解绑 VAO 之前不要解绑 EBO (但是可以解绑VBO)
    // 这是因为 VAO
    // 只是存储了如何读取VBO中数据的信息，当调用glVertexAttribPointer()函数之后VAO中就有了如何读取VBO数据的配置，而绑定EBO确是实实在在地将EBO数据存储到VAO中，因此在解绑VAO之前不能解绑EBO

    glBindVertexArray(0); // 解绑 VAO
    
    /************************************/

    // glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); // 使用线框模式，绘制时只绘制 三角形 的轮廓
    glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); // 使用填充模式，绘制时对 三角形 内部进行填充

    /****** 5.开始绘制 ******/
    while (!glfwWindowShouldClose(window))
    {
        // input
        // -----
        processInput(window);

        // render
        // ------
        glClearColor(0.2f, 0.3f, 0.3f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);

        // 使用我们之前编译连接好的 shader 程序
        glUseProgram(shaderProgram);
        glBindVertexArray(VAO); // 绑定VAO，指定当前绘制使用的VAO对象
        // glDrawArrays(GL_TRIANGLES, 0, 6);
        // 使用glDrawElements()函数指定使用基于EBO索引的绘制，函数参数如下：
        // 1). 指定绘制的模式，绘制模式选择绘制三角形，因此填入 GL_TRIANGLES
        // 2). 指定绘制的顶点个数，我们需要绘制两个三角形，每个三角形包含3个顶点，
        // 因此总共6个顶点（尽管实际上只有5个点的数据），因此填入 6
        // 3). 指定绘制的索引类型，即EBO中的数据类型，类型为unsigned int，因此填入 GL_UNSIGNED_INT
        // 4). 指定绘制的索引起始偏移，此处填入 0
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);

        glfwSwapBuffers(window); // 在gfw中启用双缓冲，确保绘制的平滑和无缝切换
        glfwPollEvents(); // 用于处理所有挂起的事件，例如键盘输入、鼠标移动、窗口大小变化等事件
    }
    /************************************/

    /****** 6.释放资源 ******/
    // 释放之前申请的 VBO, VAO, EBO资源和shader程序
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    glDeleteBuffers(1, &EBO);
    glDeleteProgram(shaderProgram);

    // glfw 释放 glfw使用的所有资源
    glfwTerminate();
    /************************************/
    return 0;
}

// 用于处理用户输入的函数
void processInput(GLFWwindow *window)
{
    // 当按下 Esc 按键时调用 glfwSetWindowShouldClose() 函数，关闭窗口
    if (glfwGetKey(window, GLFW_KEY_ESCAPE) == GLFW_PRESS)
        glfwSetWindowShouldClose(window, true);
}

// 在使用 OpenGL 和 GLFW 库时，处理窗口大小改变的回调函数
// 当窗口大小发生变化时，确保 OpenGL 渲染的内容能够适应新的窗口大小，避免图像被拉伸、压缩或出现其他比例失真的问题
void framebuffer_size_callback(GLFWwindow *window, int width, int height)
{
    glViewport(0, 0, width, height);
}

4. 编译运行及结果

编译运行：

cd ./build
cmake ..
make 
./OpenGL_Hello_More_Triangles

绘制结果：

绘制结果

三、参考引用

[1].LearnOpenGL-CN-入门-你好，三角形

刘好念的图形学修行手册

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录