OpenGL系列之十:VAO、VBO、EBO的应用

目录

相关文章

OpenGL系列之一:OpenGL第一个程序
OpenGL系列之二:绘制三角形
OpenGL系列之三:三角形顶点增加颜色
OpenGL系列之四:绘制四边形
OpenGL系列之五:绘制点和线
OpenGL系列之六:绘制立方体
OpenGL系列之七:纹理贴图
OpenGL系列之八:立方体纹理贴图
OpenGL系列之九:glsl着色器语言

实现效果

实现步骤

首先大家可以先了解下VAO、VBO、EBO是什么,我感觉下面这篇文章挺不错的大家可以参考下:
https://blog.csdn.net/weixin_44179561/article/details/124275761

1.封装VAO

基本都是固定的,封装起来以后可以复用

CCOpenGLVAO.h

#ifndef CCOPENGLES_CCOPENGLVAO_H
#define CCOPENGLES_CCOPENGLVAO_H
#include "CCGLPrimitivesDef.h"

class CCOpenGLVAO {

public:
    CCOpenGLVAO();
    ~CCOpenGLVAO();

    void Bind();
    void Release();
    void Create();

private:

    GLuint  m_vaoId;

};
#endif //CCOPENGLES_CCOPENGLVAO_H

CCOpenGLVAO.cpp

#include "CCOpenGLVAO.h"
CCOpenGLVAO::CCOpenGLVAO()
{
}
CCOpenGLVAO::~CCOpenGLVAO()
{
    glDeleteVertexArrays(1,&m_vaoId);
}

void CCOpenGLVAO::Create()
{
    glGenVertexArrays(1, &m_vaoId);
}

void CCOpenGLVAO::Bind()
{
    glBindVertexArray(m_vaoId);
}
void CCOpenGLVAO::Release()
{
    glBindVertexArray(0);
}
2.封装VBO、EBO

这两个封装在一个里了,就是类型不一样

CCOpenGLBuffer.h

#ifndef CCOPENGLES_CCOPENGLBUFFER_H
#define CCOPENGLES_CCOPENGLBUFFER_H

#include "CCGLPrimitivesDef.h"

class CCOpenGLBuffer {

public:

    enum Type{
        VertexBuffer        = 0x8892, // GL_ARRAY_BUFFER
        IndexBuffer         = 0x8893, // GL_ELEMENT_ARRAY_BUFFER
        PixelPackBuffer     = 0x88EB, // GL_PIXEL_PACK_BUFFER
        PixelUnpackBuffer   = 0x88EC  // GL_PIXEL_UNPACK_BUFFER
    };

    enum UsagePattern
    {
        StreamDraw          = 0x88E0, // GL_STREAM_DRAW
        StreamRead          = 0x88E1, // GL_STREAM_READ
        StreamCopy          = 0x88E2, // GL_STREAM_COPY
        StaticDraw          = 0x88E4, // GL_STATIC_DRAW
        StaticRead          = 0x88E5, // GL_STATIC_READ
        StaticCopy          = 0x88E6, // GL_STATIC_COPY
        DynamicDraw         = 0x88E8, // GL_DYNAMIC_DRAW
        DynamicRead         = 0x88E9, // GL_DYNAMIC_READ
        DynamicCopy         = 0x88EA  // GL_DYNAMIC_COPY
    };


    CCOpenGLBuffer(CCOpenGLBuffer::Type type,CCOpenGLBuffer::UsagePattern usage);
    ~CCOpenGLBuffer();

    void Bind();
    void Release();

    void Create();
    void SetBufferData(const GLvoid *data, GLsizeiptr size);

private:
    CCOpenGLBuffer::Type   m_bufferType;
    GLuint              m_buffID;
    GLsizeiptr          m_buffSize;
    CCOpenGLBuffer::UsagePattern              m_usage;
};
#endif //CCOPENGLES_CCOPENGLBUFFER_H

CCOpenGLBuffer.cpp

#include "CCOpenGLBuffer.h"

CCOpenGLBuffer::CCOpenGLBuffer(CCOpenGLBuffer::Type type,CCOpenGLBuffer::UsagePattern usage)
{
    m_buffSize = 0;
    m_usage = usage;
    m_bufferType = type;
}

CCOpenGLBuffer::~CCOpenGLBuffer()
{
    glDeleteBuffers(1, &m_buffID);
}

void CCOpenGLBuffer::Create()
{
    glGenBuffers(1, &m_buffID);
}

void CCOpenGLBuffer::Bind()
{
    glBindBuffer(m_bufferType, m_buffID);

}

void CCOpenGLBuffer::Release()
{
    glBindBuffer(m_bufferType, 0);
}

void CCOpenGLBuffer::SetBufferData(const GLvoid *data, GLsizeiptr size)
{
    if (size > m_buffSize) {
        m_buffSize = size;
        glBufferData(m_bufferType, size, data, m_usage);
    } else {
        glBufferSubData(m_bufferType, 0, size, data);
    }
}
3.编写glsl

vertex.vert

#version 300 es

layout(location = 0) in vec3 a_position;
layout(location = 1) in vec2 a_uv;

uniform mat4   u_mat;
out vec2 o_uv;

void main(void)
{
    o_uv = a_uv;
    gl_Position = u_mat * vec4(a_position,1.0);

}

fragment.frag

#version 300 es
precision mediump float;

uniform sampler2D utexture;
in vec2 o_uv;
out vec4  fragColor;

void main(void)
{
    fragColor = texture(utexture,o_uv);
}
4.使用VAO、VBO、EBO缓存数据

这里封装在一个函数里,函数里的顶点数据和索引数据都是立方体的

/**
 * 先加载VAO VBO EBO等缓存数据
 */
void CCRender::setupRenderingObject()
{
    //顶点数据
    const CCFloat5 cubeVertexs[]  = {
            {  -1.0,-1.0, 1.0 ,  0.0, 0.0 },
            {  -1.0, 1.0, 1.0 ,  0.0, 1.0 },
            {  1.0, -1.0,  1.0 , 1.0, 0.0 },
            {   1.0, 1.0, 1.0 ,  1.0, 1.0 },

            {   1.0,-1.0, -1.0,   0,  0  },
            {   1.0, 1.0, -1.0,   0,  1  },
            {   -1.0,-1.0, -1.0,   1,  0 },
            {   -1.0, 1.0, -1.0,   1,  1 },


            {   -1.0, -1.0, -1.0,  0,  0 },
            {   -1.0, 1.0, -1.0,   0,  1 },
            {   -1.0, -1.0,  1.0,  1,  0 },
            {   -1.0, 1.0, 1.0,    1,  1 },

            {   1.0,-1.0,  1.0,    0,  0 },
            {   1.0, 1.0,  1.0,    0,  1 },
            {   1.0, -1.0,  -1.0,  1,  0 },
            {   1.0, 1.0, -1.0,    1,  1 },

            {   -1.0, 1.0,  1.0,   0,  0 },
            {   -1.0, 1.0,  -1.0,  0,  1 },
            {   1.0, 1.0, 1.0,     1,  0 },
            {   1.0, 1.0, -1.0,    1,  1 },

            {   -1.0, -1.0, -1.0,  0,  0 },
            {   -1.0, -1.0, 1.0,   0,  1 },
            {   1.0, -1.0, -1.0,   1,  0 },
            {   1.0, -1.0, 1.0,    1,  1 }
    };

    //索引数据
    const short cubeIndexs[]= {
            0, 1, 2,  2, 1, 3,
            4, 5, 6,  6, 5, 7,
            8, 9, 10, 10, 9,11,
            12,13,14, 14,13,15,
            16,17,18, 18,17,19,
            20,21,22, 22,21,23,
    };

    ccVAO.Create();
    ccVAO.Bind();

    ccVBO->Create();
    ccVBO->Bind();
    ccVBO->SetBufferData(cubeVertexs,sizeof(cubeVertexs));


    ccEBO->Create();
    ccEBO->Bind();
    ccEBO->SetBufferData(cubeIndexs,sizeof(cubeIndexs));

    //数据的位置
    int offset = 0;

    ccOpenGlShader.SetAttributeBuffer(0,GL_FLOAT, (void *)offset, 3, sizeof(CCFloat5));
    ccOpenGlShader.EnableAttributeArray(0);

    //由于数据类型为float,而uv数据的在第四第五的位置,因此需要偏移3个
    offset += 3 * sizeof(float);

    ccOpenGlShader.SetAttributeBuffer(1,GL_FLOAT, (void *)offset, 2, sizeof(CCFloat5));
    ccOpenGlShader.EnableAttributeArray(1);

    ccVAO.Release();
    ccVBO->Release();
    ccEBO->Release();
}
5.绘制立方体

最后我们进行绘制即可

/**
 * 画立方体
 */
void CCRender::drawCube() {
    m_angle += 0.05f;

    glm::mat4x4  objectMat;
    glm::mat4x4  objectTransMat = glm::translate(glm::mat4(1.0f), glm::vec3(0.0f, 0.0f, -3));
    glm::mat4x4  objectRotMat = glm::rotate(glm::mat4(1.0f),m_angle,glm::vec3(1.0f, 1.0f, 1.0) );
    glm::mat4x4  objectScaleMat = glm::scale(glm::mat4(1.0f),glm::vec3(0.3f, 0.2f, 0.3) );

    glm::mat4 projMat = glm::perspective(glm::radians(60.0f), (float)9/(float)18, 0.1f, 1000.0f);
    objectMat = projMat* objectTransMat * objectScaleMat* objectRotMat ;

    ccOpenGlShader.Bind();

    ccOpenGlShader.SetUniformValue("u_mat",objectMat);


    ccVAO.Bind();

    for(int i=0; i<6; i++){
        glActiveTexture(GL_TEXTURE0);
        glBindTexture(GL_TEXTURE_2D,ccTexture.m_texID[i]);
        int offset = i * 6 * sizeof(unsigned  short);
        glDrawElements(GL_TRIANGLES,6,GL_UNSIGNED_SHORT,(void *)offset);
        glBindTexture(GL_TEXTURE_2D,0);
    }

    ccOpenGlShader.Release();
    ccVAO.Release();
}
6.补充说明

设置顶点数据的时候,之前是根据glsl里的变量名来设置的,现在变成了location:

ccOpenGlShader.SetAttributeBuffer(0,GL_FLOAT, (void *)offset, 3, sizeof(CCFloat5));
ccOpenGlShader.EnableAttributeArray(0);

ccOpenGlShader.SetAttributeBuffer(1,GL_FLOAT, (void *)offset, 2, sizeof(CCFloat5));
ccOpenGlShader.EnableAttributeArray(1);

这里的location为0和1是与glsl中的location对应的:



这里的话我尝试使用像之前那样用名字来设置,但是不显示,不知道是不是设置了缓存数据的原因,具体的话我也不大清楚,如果有明白的同学可以留言告诉下,然后是fragment.frag中的uniform sampler2D utexture;
这个变量没有传也可以使用,这里应该是默认就使用了绑定Texture时指定的Texture了


案例源码

https://gitee.com/itfitness/opengl-vao-vbo-ebo

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,839评论 6 482
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,543评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 153,116评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,371评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,384评论 5 374
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,111评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,416评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,053评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,558评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,007评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,117评论 1 334
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,756评论 4 324
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,324评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,315评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,539评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,578评论 2 355
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,877评论 2 345

推荐阅读更多精彩内容