[转帖]cocos2D-X源码分析之从cocos2D-X学习OpenGL（2）----QUAD_COMMAND

原文：cocos2D-X源码分析之从cocos2D-X学习OpenGL（2）----QUAD_COMMAND

上一篇文章介绍了cocos2d-x的基本渲染结构，这篇顺着之前的渲染结构介绍渲染命令QUAD_COMMAND命令的部分，通过这部分的函数，学习opengl处理图片渲染的方法，首先介绍这节需要涉及到的基本概念VAO和VBO。

VAO和VBO：

    顶点数组对象（Vertex Array Object  即VAO）是一个包含一个或数个顶点缓冲区对象（Vertex Buffer Object， 即 VBO）的对象，一般存储一个可渲染物体的所有信息。顶点缓冲区对象（VertexBuffer Object VBO）是你显卡内存中的一块高速内存缓冲区，用来存储顶点的所有信息。

这些概念显得很晦涩，简而言之，一般我们绘制一些图形需要将所有顶点的信息存储在一个数组里，但是经常会出现一些点是被重复使用的，这样就会出现一个点的信息的存储空间被重复使用的问题，这样第一会造成存储控件的浪费，第二就是如果我们要修改这个点的信息，需要改多次。所以我们采用索引的方式来描述图形，这样可以用一个数组存储点的信息，另外一个数组存储点的索引，这样所有的点都是不同的，另外把顶点信息存储在显卡的内存中，减少了cpu向gpu传输数据的时间，提高了程序的渲染效率，这就是VBO，在OpenGL3.0中，出现了更进一步的VAO，VBO通过绘制上下文获得绘制状态，VAO可以拥有多个VBO，它记录所有绘制状态，它的代码更简洁，效率更高，在cocos2d-x的绘制中，我们会判断底层是否支持VAO，如果支持VAO，那么优先采用VAO绘制。二者的区别可以从初始化就可以看出来：

void Renderer::setupBuffer()
{
    if(Configuration::getInstance()->supportsShareableVAO())
    {
        //初始化VBO和VAO
        setupVBOAndVAO();
    }
    else
    {
        //不支持VAO，只初始化VBO
        setupVBO();
    }
}
void Renderer::setupVBOAndVAO()
{
    //一个VAO
    glGenVertexArrays(1, &_quadVAO);
    //绑定VAO
    GL::bindVAO(_quadVAO);
    //创建生成两个VBO
    glGenBuffers(2, &_buffersVBO[0]);
    //顶点Buffer
    glBindBuffer(GL_ARRAY_BUFFER, _buffersVBO[0]);
    glBufferData(GL_ARRAY_BUFFER, sizeof(_quads[0]) * VBO_SIZE, _quads, GL_DYNAMIC_DRAW);
    //这里就是VAO和VBO的区别，VAO把这些放到初始化中，无论后面绘制多少次，只要他不被改变，这段代码只会被调用一次，而VBO中，这个功能的代码会在每次被绘制时调用，这样就节约了效率
    //位置
    glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_POSITION);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 3, GL_FLOAT, GL_FALSE, sizeof(V3F_C4B_T2F), (GLvoid*) offsetof( V3F_C4B_T2F, vertices));
    //颜色
    glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_COLOR);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, GL_TRUE, sizeof(V3F_C4B_T2F), (GLvoid*) offsetof( V3F_C4B_T2F, colors));
    //纹理坐标数据
    glEnableVertexAttribArray(GLProgram::VERTEX_ATTRIB_TEX_COORDS);
    glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORDS, 2, GL_FLOAT, GL_FALSE, sizeof(V3F_C4B_T2F), (GLvoid*) offsetof( V3F_C4B_T2F, texCoords));
    //索引Buffer
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _buffersVBO[1]);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(_indices[0]) * VBO_SIZE * 6, _indices, GL_STATIC_DRAW);
    //取消VAO
    GL::bindVAO(0);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);
    glBindBuffer(GL_ARRAY_BUFFER, 0);

    CHECK_GL_ERROR_DEBUG();
}
void Renderer::setupVBO()
{
    //创建生成两个VBO
    glGenBuffers(2, &_buffersVBO[0]);
    //调用函数绑定buffer
    mapBuffers();
}
void Renderer::mapBuffers()
{
    //GL_ARRAY_BUFFER 表示顶点数据
    //GL_ELEMENT_ARRAY_BUFFER 表示索引数据
    //避免改变buffer元素
    GL::bindVAO(0);
    //绑定id 顶点数据
    glBindBuffer(GL_ARRAY_BUFFER, _buffersVBO[0]);
    //为改id制定一段内存区域
    glBufferData(GL_ARRAY_BUFFER, sizeof(_quads[0]) * VBO_SIZE, _quads, GL_DYNAMIC_DRAW);
    glBindBuffer(GL_ARRAY_BUFFER, 0);
    //第二个VBO 索引数据
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _buffersVBO[1]);
    glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(_indices[0]) * VBO_SIZE * 6, _indices, GL_STATIC_DRAW);
    glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, 0);

    CHECK_GL_ERROR_DEBUG();
}

需要介绍的两个关键的函数

glBindBuffer：它绑定缓冲区对象表示选择未来的操作将影响哪个缓冲区对象。如果应用程序有多个缓冲区对象，就需要多次调用glBindBuffer()函数：一次用于初始化缓冲区对象以及它的数据，以后的调用要么选择用于渲染的缓冲区对象，要么对缓冲区对象的数据进行更新。

当传入的第二个参数第一次使用一个非零无符号整数时，创建一个新的缓冲区对象；当第二个参数是之前使用过的，这个缓冲区对象成为活动缓冲区对象；如果第二个参数值为0时，停止使用缓冲区对象

glBufferData：保留空间存储数据，他分配一定大小的（第二个参数）的openGL服务端内存，用于存储顶点数据或索引。这个被绑定的对象之前相关联的数据都会被清除。

glBufferData参数介绍

参数1，目标GL_ARRAY_BUFFER或者GL_ELEMENT_ARRAY_BUFFER

参数2，内存容量

参数3，用于初始化缓冲区对象，可以使一个指针，也可以是空

参数4，如何读写，可以选择如下几种

    GL_DYNAMIC_DRAW:多次指定，多次作为绘图和图像指定函数的源数据，缓冲区对象的数据不仅常常需要进行更新，而且使用频率也非常高

    GL_STATIC_DRAW:数据只指定一次，多次作为绘图和图像指定函数的源数据，缓冲区对象的数据只指定1次，但是这些数据被使用的频率很高

    GL_STREAM_DRAW:数据只指定一次，最多只有几次作为绘图和图像指定函数的源数据，缓冲区对象中的数据常常需要更新，但是在绘图或其他操作中使用这些数据的次数较少

从初始化的代码上，为什么VAO反倒复杂了呢？因为他只是把绘制时需要做的一些事情提前放到初始化函数中，来看一下绘制流程。

    //当前的openGL是否支持VAO
    if (Configuration::getInstance()->supportsShareableVAO())
    {
        //绑定顶点数组
        glBindBuffer(GL_ARRAY_BUFFER, _buffersVBO[0]);
        //向缓冲区申请空间并指定数据传输方式
        glBufferData(GL_ARRAY_BUFFER, sizeof(_quads[0]) * (_numQuads), nullptr, GL_DYNAMIC_DRAW);
        //提供缓冲区对象包含整个数据集合的更新
        void *buf = glMapBuffer(GL_ARRAY_BUFFER, GL_WRITE_ONLY);
        memcpy(buf, _quads, sizeof(_quads[0])* (_numQuads));
        //缓冲区对象的更新完成
        glUnmapBuffer(GL_ARRAY_BUFFER);
        //为了禁用缓冲区对象，可以用0作为缓冲区对象的标识符来调用glBindBuffer()函数。这将把OpenGL切换为默认的不使用缓冲区对象的模式。
        glBindBuffer(GL_ARRAY_BUFFER, 0);
        //Bind VAO
        GL::bindVAO(_quadVAO);
    }
    else
    {
#define kQuadSize sizeof(_quads[0].bl)
        glBindBuffer(GL_ARRAY_BUFFER, _buffersVBO[0]);
        glBufferData(GL_ARRAY_BUFFER, sizeof(_quads[0]) * _numQuads , _quads, GL_DYNAMIC_DRAW);
        //激活顶点颜色纹理坐标的属性
        GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POS_COLOR_TEX);
        //顶点
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 3, GL_FLOAT, GL_FALSE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, vertices));
        //颜色
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, colors));
        //纹理坐标
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORDS, 2, GL_FLOAT, GL_FALSE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, texCoords));

        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _buffersVBO[1]);
    }

可以看到，这些设置属性的函数放在了绘制函数里，虽然看似是一样的，但是绘制函数会被调用的更频繁，所以把这些函数放到初始化函数中可以大幅提高程序的效率。

这里介绍VAO的两个函数：

glMapBuffer函数返回一个指针，指向与第一个参数相关联的当前绑定缓冲区对象的数据存储。第一个参数与glBufferData的第一个参数一致。第二个参数是GL_READ_ONLY、GL_WRITE_ONLY或GL_READ_WRITE之一，表示可以对数据进行的操作。

glUnmapBuffer表示对当前绑定缓冲区对象的更新已经完成，并且这个缓冲区可以释放。

enableVertexAttribs激活相关属性，激活的属性可以调用glVertexAttribPointer指定数据源，可选的有VERTEX_ATTRIB_FLAG_POSITION，VERTEX_ATTRIB_FLAG_COLOR和VERTEX_ATTRIB_FLAG_TEX_COORDS，这里这个参数是激活这三个。

glVertexAttribPointer指定了渲染时第一个参数代表的索引值的顶点属性数组的数据格式和位置。

第一个参数指定要修改的顶点属性的索引值，包括VERTEX_ATTRIB_POSITION（位置），VERTEX_ATTRIB_COLOR（颜色），VERTEX_ATTRIB_TEX_COORDS（纹理坐标）。

第二个参数指定每个属性值的组件数量且必须为1、2、3、4之一。

第三个参数指定数组中每个组件的数据类型。可用的符号常量有GL_BYTE, GL_UNSIGNED_BYTE, GL_SHORT,GL_UNSIGNED_SHORT,GL_FIXED, 和 GL_FLOAT，初始值为GL_FLOAT。

第四个参数指定当被访问时，固定点数据值是否应该被归一化（GL_TRUE，意味着整数型的值会被映射至区间[-1,1](有符号整数)，或者区间[0,1]（无符号整数））或者直接转换为固定点值（GL_FALSE）。

第五个参数指定了一个属性到下一个属性之间的步长（这就允许属性值被存储在单一数组或者不同的数组中）。也就是连续顶点属性之间的偏移量。如果为0，那么它们是紧密排列在一起的。初始值为0。

第六个参数指定一个指针，指向数组中第一个顶点属性的第一个组件。初始值为0。

最后需要调用绘制元素函数，绘制这些信息

glDrawElements(GL_TRIANGLES, (GLsizei) quadsToDraw*6, GL_UNSIGNED_SHORT, (GLvoid*) (startQuad*6*sizeof(_indices[0])) );

它根据索引绘图(注意：顶点数据和索引各自使用不同的缓冲区)

    需要注意的是在Renderer的析构函数中要调用glDeleteBuffers来释放它的资源，并使它的标识可以其他缓冲区对象使用。

上一篇中介绍的几种渲染命令中的QUAD_COMMAND（这里把它称作四边形绘制）命令回调用drawBatchedQuads调用绘制函数，处理这个逻辑的命令是这样的:

if(commandType == RenderCommand::Type::QUAD_COMMAND)
{
    auto cmd = static_cast<QuadCommand*>(command);
    CCASSERT(nullptr!= cmd, "Illegal command for RenderCommand Taged as QUAD_COMMAND");
                    
    //如果Quad数据量超过VBO的大小，那么调用绘制，将缓存的命令全部绘制
    if(_numQuads + cmd->getQuadCount() > VBO_SIZE)
    {
        CCASSERT(cmd->getQuadCount()>= 0 && cmd->getQuadCount() < VBO_SIZE, "VBO is not big enough for quad data, please break the quad data down or use customized render command");
        drawBatchedQuads();
    }
    //将命令缓存起来，先不调用绘制
    _batchedQuadCommands.push_back(cmd);
    memcpy(_quads + _numQuads, cmd->getQuads(), sizeof(V3F_C4B_T2F_Quad) * cmd->getQuadCount());
    //转换成世界坐标
    convertToWorldCoordinates(_quads + _numQuads, cmd->getQuadCount(), cmd->getModelView());
    //记录下四边形数量
    _numQuads += cmd->getQuadCount();
}

void Renderer::flush()
{
    //绘制
    drawBatchedQuads();
    //清空
    _lastMaterialID = 0;
}

这个处理主要是把命令存入_batchedQuadCommands中，如果如果Quad数据量超过VBO的大小，那么调用绘制，将缓存的命令全部绘制

如果一直没有超过VBO的大小，drawBatchedQuads绘制函数将在flush被调用时调用

如有错误，欢迎指出

下一篇介绍图形渲染和批处理