AI 助理
备案控制台
开发者社区 云计算 文章 正文

OpenGL学习笔记(十三)：将纹理贴图应用到四边形上，对VAO/VBO/EBO/纹理/着色器的使用方式进行总结

2022-05-30 240
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： OpenGL学习笔记(十三)：将纹理贴图应用到四边形上，对VAO/VBO/EBO/纹理/着色器的使用方式进行总结

原博主博客地址：http://blog.csdn.net/qq21497936

本文章博客地址：http://blog.csdn.net/qq21497936/article/details/79196615


《OpenGL学习笔记》系列博客目录地址：http://blog.csdn.net/qq21497936/article/category/7315532


OpenGL学习笔记(十三)：将纹理贴图应用到四边形上，对VAO/VBO/EBO/纹理/着色器的使用方式进行总结


前话


       上一章节，我们使用了纹理进行贴图，但是是三角形了，如何把四边形的贴上去，就是本章节的要点，通过本章节，您可能对使用EBO有更深刻的认识，同时在最后，读者对VAO、VBO和EBO的使用方法进行再一次的梳理和总结，加强学习效果。

《OpenGL学习笔记》系列博客目录地址：http://blog.csdn.net/qq21497936/article/category/7315532


基础程序

     

       本章节基础程序使用《OpenGL学习笔记(十二)：纹理的使用》完成的demo。（CSDN目前无法设置免积分下载）：

       文章地址：http://blog.csdn.net/qq21497936/article/details/79184344

       demo下载：http://download.csdn.net/download/qq21497936/10227600


本章完成的Demo

       下载地址：http://download.csdn.net/download/qq21497936/10229560


       图片.png

额外修改了修改了片段着色器：

#version 330 core
out vec4 FragColor;
in vec3 ourColor;
in vec2 texCoord;
uniform sampler2D ourTexture;
void main()
{
//    FragColor = texture(ourTexture, texCoord);
    FragColor = texture(ourTexture, texCoord) * vec4(ourColor, 1.0);
}



       图片.png


纹理贴到四边形上

       之前的Demo中，我们将窗户纸贴到了三角形上，之所以把四边形（举一反三：多边形）单独一章节，是因为四边形与大家潜意识里面的四边形贴图不一样，下面是上章节使用的图片

        图片.png

我们上章节（笔记十二）解析纹理如下：

    图片.png

       下面笔者猜想大家在读到之前章节的笔记上，应该是认为可以直接画一个正方向，毕竟之前的代码是直接画线和三角形，那么应该像程序一样有可以直接画四边形，并对四边形贴图。所以大家所认为的四边形的顶点数据应该这样如下：

      图片.png

但是实际对绘制只能是三角形，纹理对于绘制，所以实际情况是下图：

    图片.png

（注意：随边画哪个三角形，只要能覆盖全部即可），笔者选择的是上图的2个。

原来的顶点数据是：

float vertices[] = {
//            三角形坐标            颜色                纹理坐标
        -0.5f,   -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,        0.0f,0.0f,
         0.5f,   -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,        1.0f,0.0f,
         0.0f,   1.0f, 0.0f,  0.0f, 0.0f, 1.0f,        0.5f,1.0f
};

修改为：

    // 四边形,共四个点，因为只能画三角形，所以要6个点（可使用EBO来实现，即可只要四个点）
    float vertices[] = {
        -0.5f,   -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,        0.0f,0.0f,  // 左下角     *
        0.5f,   -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,        1.0f,0.0f,   // 右下角    **
        0.5f,    1.0f, 0.0f,  0.0f, 0.0f, 1.0f,        1.0f,1.0f,   // 右上角   ***
        -0.5f,   -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,        0.0f,0.0f,  // 左下角         ***
        0.5f,    1.0f, 0.0f,  0.0f, 0.0f, 1.0f,        1.0f,1.0f,   // 右下角         **
        -0.5f,    1.0f, 0.0f,  1.0f, 0.0f, 1.0f,        0.0f,1.0f   // 左上角         *
    };

之前的demo画了一个三角形：

glDrawArrays(GL_TRIANGLES, 0, 3);

修改为：

glDrawArrays(GL_TRIANGLES, 0, 6);

       画2个三角形，共6个点（注意：要是用画2个点则不会画，或4个点则只画一个，具体opengl是否绘制多余的点，笔者未研究，理论上认为画2个点纹理是1D的，肯能是画了表现不出来，可能是没画，以后有机会再研究）。

效果截图如下：

       图片.png

上图的效果修改了着色器的：

#version 330 core
out vec4 FragColor;
in vec3 ourColor;
in vec2 texCoord;
uniform sampler2D ourTexture;
void main()
{
//    FragColor = vec4(ourColor, 1.0f);
    FragColor = texture(ourTexture, texCoord) * vec4(ourColor, 1.0);
}


使用EBO


       不使用EBO时，使用的顶点数据如下：

    // 四边形,共四个点，因为只能画三角形，所以要6个点（可使用EBO来实现，即可只要四个点）
    float vertices[] = {
        -0.5f,   -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,        0.0f,0.0f,  // 左下角     *
        0.5f,   -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,        1.0f,0.0f,   // 右下角    **
        0.5f,    1.0f, 0.0f,  0.0f, 0.0f, 1.0f,        1.0f,1.0f,   // 右上角   ***
        -0.5f,   -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,        0.0f,0.0f,  // 左下角         ***
        0.5f,    1.0f, 0.0f,  0.0f, 0.0f, 1.0f,        1.0f,1.0f,   // 右下角         **
        -0.5f,    1.0f, 0.0f,  1.0f, 0.0f, 1.0f,        0.0f,1.0f   // 左上角         *
    };

       发现其实总共就四个顶点，但是每次重复时候，都要写出来，不但增加工作量还容易导致不好计算，不符合人类的认知（我们认为四边形就四个顶点），此时，我们可以使用EBO，EBO是使用索引数，我们定义如下：

    // 使用EBO
    float vertices[] = {
        -0.5f,   -0.5f, 0.0f,  1.0f, 0.0f, 0.0f,        0.0f,0.0f,  // 左下角
        0.5f,   -0.5f, 0.0f,  0.0f, 1.0f, 0.0f,        1.0f,0.0f,   // 右下角
        0.5f,    1.0f, 0.0f,  0.0f, 0.0f, 1.0f,        1.0f,1.0f,   // 右上角
        -0.5f,    1.0f, 0.0f,  1.0f, 0.0f, 1.0f,        0.0f,1.0f   // 左上角
    };
    // 索引
    unsigned int indices[] = {
        0,1,2, // 第一个三角形
        0,2,3  // 第二个三角形
    };

使用EBO步骤：

  1. 创建(标识ID)。
  2. 绑定(顶点数据绑定缓存)。
  3. 解绑。
  4. 绘制(再次绑定使用的EBO，并使用Elements绘制)。
  5. 删除（末尾删除）。
    …
    unsigned int VBO, VAO, EBO;
    glGenVertexArrays(1, &VAO);
    glGenBuffers(1, &VBO);
    // 第一步：获取EBO唯一标识
    glGenBuffers(1, &EBO);
    glBindVertexArray(VAO);
    glBindBuffer(GL_ARRAY_BUFFER, VBO);
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
    // 第二步：绑定EBO缓存
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, EBO);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(indices), indices, GL_STATIC_DRAW);
    glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(0 * sizeof(float)));
    glEnableVertexAttribArray(0);
    glVertexAttribPointer(1, 3, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(3 * sizeof(float)));
    glEnableVertexAttribArray(1);
    // 添加进缓存，启用纹理
    glVertexAttribPointer(2, 2, GL_FLOAT, GL_FALSE, 8 * sizeof(float), (void*)(6 * sizeof(float)));
    glEnableVertexAttribArray(2);
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    glBindVertexArray(0);
    while (!glfwWindowShouldClose(window))
    {
        processInput(window);
        glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
        glClear(GL_COLOR_BUFFER_BIT);
        shader.use();
        glBindVertexArray(VAO);
        // 第三步：使用索引，绘制三角形，6个顶点
        glDrawElements(GL_TRIANGLES, 6, GL_UNSIGNED_INT, 0);
        // 使用点
//        glDrawArrays(GL_TRIANGLES, 0, 6);
        glfwSwapBuffers(window);
        glfwPollEvents();
    }
    glDeleteVertexArrays(1, &VAO);
    glDeleteBuffers(1, &VBO);
    // 第四步：删除EBO
    glDeleteBuffers(1, &EBO);
    glfwTerminate();
    …

       可以从以上代码中返现，EBO与VBO其实使用步骤是一样的。

效果如图：

       图片.png


总结VAO、VBO、EBO、纹理

现阶段总结使用过程大致如下（如有错误请留言批评指正，谢谢各位大神）：

方式

VAO

VBO

EBO

纹理

获取

getGenVertexArrays

getGenBuffers

getGenBuffers

glGenTextures

绑定

glBindBuffer

glBindBuffer

glBindBuffer

glBindTexture

属性定义

glVertexAttribPointer

glVertexAttribPointer

不需要

glTexImage2D

glGenerateMipmap

解绑

glBindVertexArray

glBindBuffer

glBindBuffer

不解绑

使用

glBindVertexArray

glDrawArrays

默认作用于绑定时的顶点

glBindBuffer

glDrawElements

默认使用

删除

glDeleteVertexArrays

glDeleteBuffers

glDeleteBuffers

 


总结Shader着色器使用

顶点着色器：创建（标识），绑定（代码），编译（着色器），获取编译结果

片段着色器：创建（标识），绑定（代码），编译（着色器），获取编译结果

着色器程序：创建(表示）  ，绑定（各着色器id），连接（全局连接到着色器程序标识上），删除（释放使用的着色器内存）

着色器使用：使用该着色器id

具体细节查看《OpenGL学习笔记(十一)：封装自己的着色器类》

文章地址：http://blog.csdn.net/qq21497936/article/details/79181818


原博主博客地址：http://blog.csdn.net/qq21497936

本文章博客地址：http://blog.csdn.net/qq21497936/article/details/79196615


文章标签：
索引
缓存
关键词：
opengl四边形
opengl着色器
opengl纹理
opengl ebo
opengl vao
长沙红胖子Qt
目录
相关文章
热烈的马
|
8月前
|
XML 小程序 Java
【Android App】三维投影OpenGL ES的讲解及着色器实现（附源码和演示 超详细）
【Android App】三维投影OpenGL ES的讲解及着色器实现（附源码和演示 超详细）
热烈的马
147 0
turbolove
|
数据可视化
QT+OpenGL几何着色器
输入布局限定符可以从顶点着色器接收下列任何一个图元值： ● points：绘制GL_POINTS图元时 ● lines：绘制GL_LINES或GL_LINE_STRIP时 ● lines_adjacency：GL_ADJACENCY或GL_LINESTRIP_ADJACENCY ● triangles：GL_TRIANGLES、GL_TRIANGLE_STRIP或GL_TRIANGLE_FAN ● triangles_adjacency：GL_TRIANGLES_ADJACENCY或GL_TRIANGLE_STRIP_ADJACENCY
turbolove
129 0
求索君
|
数据安全/隐私保护 索引
Opengl ES之纹理数组
Opengl ES连载系列
求索君
269 0
求索君
|
存储 异构计算 索引
Opengl ES之EBO
Opengl ES连载系列
求索君
132 0
求索君
|
存储 异构计算
Opengl ES之VBO和VAO
Opengl ES连载系列
求索君
113 0
求索君
|
存储 BI
Opengl ES之纹理贴图
Opengl ES连载系列
求索君
115 0
1752166642947377
|
缓存 API Android开发
Android OpenGL添加纹理
Android OpenGL添加纹理
1752166642947377
197 0
Android OpenGL添加纹理
ws5ztcvob2aao
|
Android开发 异构计算
Android OpenGL ES(八)----纹理编程框架（二）
Android OpenGL ES(八)----纹理编程框架（二）
ws5ztcvob2aao
198 0
Android OpenGL ES(八)----纹理编程框架（二）
ws5ztcvob2aao
|
存储 Java API
Android OpenGL ES(八)----纹理编程框架（一）
Android OpenGL ES(八)----纹理编程框架（一）
ws5ztcvob2aao
328 0
Android OpenGL ES(八)----纹理编程框架（一）
Lucky小黄人^_^
opengl 几何着色器
opengl 几何着色器
Lucky小黄人^_^
97 0

热门文章

最新文章

  • 1
    拍立淘---试妆魔镜 OpenGL ES 2.0 框架及性能优化
  • 2
    OpenGL ES 正反面设置指令
  • 3
    Android官方开发文档Training系列课程中文版：OpenGL绘图之添加动态效果
  • 4
    opengl 教程(5) shader(2) uniform变量
  • 5
    《基于MFC的OpenGL编程》Part 15 Selection
  • 6
    关于 OpenGL GLU 的相关介绍和资源链接
  • 7
    NeHe的OpenGL教程5（Bang翻译Delphi版）-如何绘制立方体
  • 8
    OpenGL ES 背面消隐特性在 iOS 设备与模拟器上的运行效果细微差异
  • 9
    《基于MFC的OpenGL编程》Part 16 Reflection
  • 10
    JAVA智能设备基于OpenGL的3D开发技术 之AABB碰撞检测算法论述
  • 1
    C++与OpenGL结合实现的屏幕监控软件：高性能屏幕录制解决方案
    311
  • 2
    Android开发之使用OpenGL实现翻书动画
    177
  • 3
    Android开发之OpenGL的画笔工具GL10
    95
  • 4
    Android开发之OpenGL绘制三维图形的流程
    230
  • 5
    【Qt 渲染引擎】一文带你了解qt的三种 渲染引擎，包括栅格引擎（Raster）、OpenGL 和本地绘图系统
    243
  • 6
    Qt, OpenCV与OpenGL协同作战：图像处理与三维图形界面的完美结合
    1109
  • 7
    Qt+OpenGL 打砖块游戏
    100
  • 8
    从OpenGL渲染的角度排查 creator native 局部换肤的问题
    103
  • 9
    QT4.7版本的OPENGL的3D旋转模型例子
    142
  • 10
    【Android App】三维投影OpenGL ES的讲解及着色器实现（附源码和演示 超详细）
    147

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月