• 实验2.1——彩色三角形的显示

    序 

    查这段代码的时候：

    无意中看到了一个这个链接：

    (31条消息) 现代OpenGL学习笔记三：深入理解着色器_不想不努力的菜菜的博客-CSDN博客

    里面讲了如何绘制一个彩色的三角形，还演示了index=0，1两种情况下，VBO与shader怎么呼应的，绘制有颜色的图形，很常用，值得学习。

    链接的学习

    这部分内容，来自上面那个链接。

    1. float vertices[] = {
    2.     // 位置              // 颜色
    3.      0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   // 右下
    4.     -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   // 左下
    5.      0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 顶部
    6. };
    1. #version 330 core
    2. layout (location = 0) in vec3 aPos;   // 位置变量的属性位置值为 0 
    3. layout (location = 1) in vec3 aColor; // 颜色变量的属性位置值为 1
    4.  
    5. out vec3 ourColor; // 向片段着色器输出一个颜色
    6.  
    7. void main()
    8. {
    9.     gl_Position = vec4(aPos, 1.0);
    10.     ourColor = aColor; // 将ourColor设置为我们从顶点数据那里得到的输入颜色
    11. }

    1. #version 330 core
    2. out vec4 FragColor;  
    3. in vec3 ourColor;
    4.  
    5. void main()
    6. {
    7.     FragColor = vec4(ourColor, 1.0);
    8. }

     图画的挺漂亮的：

    1. // 位置属性
    2. glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);
    3. glEnableVertexAttribArray(0);
    4. // 颜色属性
    5. glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3* sizeof(float)));
    6. glEnableVertexAttribArray(1);

    明白了，去尝试自己写吧。 

    尝试

    作为一个小白，报错是常态，所以，不要有心理负担。

    之前做到了这样：

    第一次运行，是这样：

     

     改，在这一行里，少了个vec3，少了个；

     

    坏消息是依旧报错，好消息是错少了

     这个const float，和这个有关系吗？

     实测，没关系……

    经过重写对比，发现少了个“，”

    这可能不是调试代码，这是比谁的眼更敏感……对我这种小白来说，太难搞了。。

    正常了，这个就已经开始有点实用价值了

    能正常运行出结果的完整代码

    1. /***
    2.  * 例程  绘制三角形 (MAKE后运行时可删除ALL_BUILD，也可以将Task-triangle设为默认启动工程)
    3.  * 步骤:
    4.  * 1-初始化:   GLFW窗口，GLAD。
    5.  * 2-数据处理: 给定顶点数据，生成并绑定VAO&VBO(准备在GPU中进行处理)，设置顶点属性指针(本质上就是告诉OpenGL如何处理数据)。
    6.  * 3-着色器:   给出顶点和片段着色器，然后链接为着色器程序，渲染时使用着色器程序。
    7.  * 4-渲染:     清空缓冲，绑定纹理，使用着色器程序，绘制三角形，交换缓冲区检查触发事件后释放资源
    8.  */
    9.  
    10. #include <iostream>
    11. #include "glad/glad.h"
    12. #include "GLFW/glfw3.h"
    13.  
    14.  // 三角形的顶点数据
    15. //const float triangle[] = {
    16. //    //     ---- 位置 ----    
    17. //         -0.5f, -0.5f, 0.0f,   // 左下
    18. //          0.5f, -0.5f, 0.0f,   // 右下
    19. //          0.0f,  0.5f, 0.0f    // 正上
    20. //};
    21. //
    22. //const float triangle2[] = {
    23. //    //     ---- 位置 ----    
    24. //         0.6f, -0.5f, 0.0f,   // 左下
    25. //          0.8f, -0.5f, 0.0f,   // 右下
    26. //          0.7f,  0.5f, 0.0f    // 正上
    27. //};
    28.  
    29. const float triangle[] = {
    30.     // 位置              // 颜色
    31.      0.5f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   // 右下
    32.     -0.5f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   // 左下
    33.      0.0f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 顶部
    34. };
    35.  
    36. const float triangle2[] = {
    37.     // 位置              // 颜色
    38.      0.6f, -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,   // 右下
    39.     0.8f, -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,   // 左下
    40.      0.7f,  0.5f, 0.0f,  0.0f, 0.0f, 1.0f    // 顶部
    41. };
    42.  
    43. // 屏幕宽，高
    44. int screen_width = 1280;
    45. int screen_height = 720;
    46.  
    47. int main() {
    48.     // 第一部分，初始化GLFW和GLAD，分为4个步骤进行/
    49.  
    50.     // 初始化GLFW
    51.     glfwInit();                                                     // 初始化GLFW
    52.     glfwWindowHint(GLFW_CONTEXT_VERSION_MAJOR, 3);                  // OpenGL版本为3.3，主次版本号均设为3
    53.     glfwWindowHint(GLFW_CONTEXT_VERSION_MINOR, 3);
    54.     glfwWindowHint(GLFW_OPENGL_PROFILE, GLFW_OPENGL_CORE_PROFILE);  // 使用核心模式(无需向后兼容性)
    55.     //glfwWindowHint(GLFW_OPENGL_FORWARD_COMPAT, GL_TRUE);            // 如果使用的是Mac OS X系统，需加上这行
    56.     glfwWindowHint(GLFW_RESIZABLE, false);						    // 不可改变窗口大小
    57.  
    58.     // 创建窗口(宽、高、窗口名称)
    59.     auto window = glfwCreateWindow(screen_width, screen_height, "Triangle", nullptr, nullptr);
    60.     if (window == nullptr) {                                        // 如果窗口创建失败，输出Failed to Create OpenGL Context
    61.         std::cout << "Failed to Create OpenGL Context" << std::endl;
    62.         glfwTerminate();
    63.         return -1;
    64.     }
    65.     glfwMakeContextCurrent(window);                                 // 将窗口的上下文设置为当前线程的主上下文
    66.  
    67.     // 初始化GLAD，加载OpenGL函数指针地址的函数
    68.     // 在调用任何OpenGL函数之前
    69.     if (!gladLoadGLLoader((GLADloadproc)glfwGetProcAddress))
    70.     {
    71.         std::cout << "Failed to initialize GLAD" << std::endl;
    72.         return -1;
    73.     }
    74.  
    75.     // 指定当前视口尺寸(前两个参数为左下角位置，后两个参数是渲染窗口宽、高)
    76.     glViewport(0, 0, screen_width, screen_height);
    77.  
    78.  
    79.  
    80.     // 第二部分，数据处理，通过VAO,VBO，把顶点数据发送到显卡GPU上，并设置属性指针，告诉GPU如何解释这些数据/
    81.  
    82.     // 生成并绑定VAO和VBO
    83.     GLuint vertex_array_object; // == VAO   核心模式要求必须使用VAO
    84.     glGenVertexArrays(1, &vertex_array_object);//先生成
    85.     glBindVertexArray(vertex_array_object);//再绑定
    86.  
    87.     GLuint vertex_buffer_object[2]; // == VBO
    88.     glGenBuffers(2, &vertex_buffer_object[0]);//先生成，相当于C里声明的指针
    89.  
    90.     glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer_object[0]);//绑定， 相当于声明指针指向的变量类型，同时设置一下状态机的状态（火车轨道变轨，变完了后面的车都得按变了的轨道走）
    91.     glBufferData(GL_ARRAY_BUFFER, sizeof(triangle), triangle, GL_STATIC_DRAW);    // 将顶点数据绑定至当前默认的缓冲中
    92.     //glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);    // 设置顶点属性指针——告知OpenGL，如何解释这些数据
    93.     //glEnableVertexAttribArray(0);
    94.  
    95.     glBindBuffer(GL_ARRAY_BUFFER, 0);//解绑
    96.  
    97.     glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer_object[1]);//再绑定
    98.     glBufferData(GL_ARRAY_BUFFER, sizeof(triangle2), triangle2, GL_STATIC_DRAW);    // 将顶点数据绑定至当前默认的缓冲中，可能是传数据到GPU吧
    99.     //glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 3 * sizeof(float), (void*)0);    // 设置顶点属性指针——告知OpenGL，如何解释这些数据
    100.     //glEnableVertexAttribArray(0);
    101.  
    102.     glBindBuffer(GL_ARRAY_BUFFER, 0);//再绑定
    103.  
    104.     // 解绑VAO和VBO    为了代码更规范
    105.     glBindVertexArray(0);
    106.  
    107.  
    108.     // 第三部分，着色器，用来处理GPU里的数据//
    109.  
    110.     // 顶点着色器和片段着色器源码【GLSL】
    111.     const char* vertex_shader_source =
    112.         "#version 330 core\n"
    113.         "layout (location = 0) in vec3 aPos;\n"           // 位置变量的属性位置值为0
    114.         "layout (location = 1) in vec3 aColor; \n "          颜色变量的属性位置值为 1
    115.         "out vec3 ourColor; \n"// 向片段着色器输出一个颜色
    116.         "void main()\n"
    117.         "{\n"
    118.         "gl_Position = vec4(aPos, 1.0);\n" //内建变量
    119.         "ourColor=aColor;\n"
    120.         "}\n\0";
    121.     const char* fragment_shader_source =
    122.         "#version 330 core\n"
    123.         "in vec3 ourColor;\n"
    124.         "out vec4 FragColor;\n"                           // 输出的颜色向量
    125.         "void main()\n"
    126.         "{\n"
    127.         "FragColor = vec4(ourColor, 1.0f);\n"
    128.         "}\n\0";
    129.  
    130.     // 生成并编译着色器
    131.         // 顶点着色器
    132.     int vertex_shader = glCreateShader(GL_VERTEX_SHADER);
    133.     glShaderSource(vertex_shader, 1, &vertex_shader_source, NULL);
    134.     glCompileShader(vertex_shader);
    135.     int success;
    136.     char info_log[512];
    137.     // 检查着色器是否成功编译，如果编译失败，打印错误信息
    138.     glGetShaderiv(vertex_shader, GL_COMPILE_STATUS, &success);
    139.     if (!success)
    140.     {
    141.         glGetShaderInfoLog(vertex_shader, 512, NULL, info_log);
    142.         std::cout << "ERROR::SHADER::VERTEX::COMPILATION_FAILED\n" << info_log << std::endl;
    143.     }
    144.     // 片段着色器
    145.     int fragment_shader = glCreateShader(GL_FRAGMENT_SHADER);
    146.     glShaderSource(fragment_shader, 1, &fragment_shader_source, NULL);
    147.     glCompileShader(fragment_shader);
    148.     // 检查着色器是否成功编译，如果编译失败，打印错误信息
    149.     glGetShaderiv(fragment_shader, GL_COMPILE_STATUS, &success);
    150.     if (!success)
    151.     {
    152.         glGetShaderInfoLog(fragment_shader, 512, NULL, info_log);
    153.         std::cout << "ERROR::SHADER::FRAGMENT::COMPILATION_FAILED\n" << info_log << std::endl;
    154.     }
    155.  
    156.     // 链接顶点和片段着色器至一个着色器程序
    157.     int shader_program = glCreateProgram();
    158.     glAttachShader(shader_program, vertex_shader);
    159.     glAttachShader(shader_program, fragment_shader);
    160.     glLinkProgram(shader_program);
    161.     // 检查着色器是否成功链接，如果链接失败，打印错误信息
    162.     glGetProgramiv(shader_program, GL_LINK_STATUS, &success);
    163.     if (!success) {
    164.         glGetProgramInfoLog(shader_program, 512, NULL, info_log);
    165.         std::cout << "ERROR::SHADER::PROGRAM::LINKING_FAILED\n" << info_log << std::endl;
    166.     }
    167.  
    168.     // 删除着色器    需要的着色器程序已经拿到了，这个没用了，就删除了
    169.     glDeleteShader(vertex_shader);
    170.     glDeleteShader(fragment_shader);
    171.  
    172.     // 线框模式
    173.     //glPolygonMode(GL_FRONT_AND_BACK, GL_LINE);
    174.  
    175.     // 第4部分，渲染//
    176.  
    177.     // 渲染循环
    178.     while (!glfwWindowShouldClose(window)) {
    179.  
    180.         // 清空颜色缓冲
    181.         glClearColor(0.0f, 0.34f, 0.57f, 1.0f);
    182.         glClear(GL_COLOR_BUFFER_BIT);
    183.         // 使用着色器程序  【之前链接好的那个】
    184.         glUseProgram(shader_program);
    185.  
    186.         // 绘制三角形
    187.         glBindVertexArray(vertex_array_object);                                    // 绑定VAO
    188.  
    189.         glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer_object[0]);
    190.         glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);    // 设置指针位置，以便后续从此处读取数据进行渲染
    191.         glEnableVertexAttribArray(0);
    192.         glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3*sizeof(float)));    // 设置指针位置，以便后续从此处读取数据进行渲染
    193.         glEnableVertexAttribArray(1);
    194.         glDrawArrays(GL_TRIANGLES, 0, 3);                                          // 绘制三角形
    195.  
    196.         glBindBuffer(GL_ARRAY_BUFFER, vertex_buffer_object[1]);
    197.         glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)0);    // 【渲染时告诉OpenGL如何解释这些数据】
    198.         glEnableVertexAttribArray(0);
    199.         glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 6 * sizeof(float), (void*)(3 * sizeof(float)));    // 【渲染时告诉OpenGL如何解释这些数据】
    200.         glEnableVertexAttribArray(1);
    201.         glDrawArrays(GL_TRIANGLES, 0, 3);                                          // 绘制三角形
    202.  
    203.  
    204.         glBindVertexArray(0);                                                      // 解除绑定
    205.  
    206.         // 交换缓冲并且检查是否有触发事件(比如键盘输入、鼠标移动等）
    207.         glfwSwapBuffers(window);//双缓冲
    208.         glfwPollEvents();
    209.     }
    210.  
    211.     // 第五部分，善后工作
    212.  
    213.     // 删除VAO和VBO
    214.     glDeleteVertexArrays(1, &vertex_array_object);
    215.     glDeleteBuffers(1, &vertex_buffer_object[0]);
    216.  
    217.     // 清理所有的资源并正确退出程序
    218.     glfwTerminate();
    219.     return 0;
    220. }

    后记

    那末，如果这个顶点数据，是可变的，应该咋写？

    和STATIC_DRAW有关吗？

    有关，但是没有想象里的关联那么大

     引用：

    (31条消息) STATIC_DRAW, DYNAMIC_DRAW, STREAM_DRAW的区别_me_badman的博客-CSDN博客

     

    以后再说吧，暂时用不到。

    小白而已，不能一次要求的太多…… 

  • 相关阅读:
    WebGL正射投影
    lwIP 细节之四：ARP 相关知识
    Cesium 问题：鼠标移出地球，但移动中生成的内容还在球上
    后端程序员实现一个IP归属地的小程序
    k8s学习-持久化存储（Volumes、hostPath、emptyDir、PV、PVC）详解与实战
    ICCV 2023｜小红书 4 篇入选论文亮点解读，「开集视频目标分割」获得 Oral
    Observability：使用 Elastic Agent 来收集定制的 TCP 日志
    基于闪电搜索优化的BP神经网络（分类应用） - 附代码
    python加载图片无法显示原因探究/python内存回收机制作祟
    SegNeXt Rethinking Convolutional Attention Design for Semantic Segmentation
  • 原文地址：https://blog.csdn.net/averagePerson/article/details/125628600