cocos渲染流程

时间  2020-08-21
标签 cocos 渲染 流程 栏目 Cocos2d-x 繁體版
原文   原文链接

最近在研究Cocos引擎的渲染流程，在这里将其整个渲染流程进行一下梳理：node

梳理以前咱们要知道一些东西，就是咱们的Cocos引擎是经过使用OpenGL的一些API来进行渲染绘制的，因此若是咱们要完全理解Cocos引擎的渲染流程并想修改引擎底层渲染的相关内容，熟悉OpenGL是颇有必要的。ide

这里先简单说一下大概流程，Cocos3.x版本的渲染是将全部须要渲染的node先经过各类RenderCommand封装起来，你先不用管RenderCommand是什么，只须要记住它把咱们要渲染的node封装起来了就行，而后引擎把这些RenderCommand添加到了一个队列中存了起来，这个队列叫CommandQueue，添加的时候顺便对这些RenderCommand设置了一些参数，最后在每一帧结束时调用进行渲染，渲染前会根据ID对RenderCommand进行排序，而后再进行渲染。函数


 

 

好了接下来咱们来开始梳理引擎整个的渲染流程了：oop

首先，整个工程的渲染流程的入口在哪里呢？优化

咱们打开工程文件目录，在 platform\win32文件目录下找到CCApplication-win3类文件，这里要注意不一样平台的不同，好比mac平台下是platform\mac目录下的CCApplication-mac文件，根据咱们发布的工程平台的不一样，这个CCApplication类文件也不一样。整个渲染流程就在这个CCApplication类文件run()方法中开始，代码以下：ui


[cpp] view plain copy print?this

  1. int Application::run()  spa

  2. {     .net

  3.     ......         线程

  4.     director->mainLoop();//进入引擎的主循环  

  5.     ......      

  6.     return 0;  

  7. }  

int Application::run()
{   
    ......       
    director->mainLoop();//进入引擎的主循环
    ......    
    return 0;
}

这里咱们要了解一个概念，就是cocos2dx整个工程是运行在一个单线程里的，也就是咱们常常说的主线程，在主线程里完成渲染、相关的定时器等等处理。注意Application::run()中的这句：


[cpp] view plain copy print?

  1. director->mainLoop();  

director->mainLoop();


这句代码就是进入cocos2d-x的主循环了，这个主循环mainLoop()由导演负责维护，主线程mainloop()会不停地执行，理想状态下每秒会调用60次。

那咱们看看CCDirector类里的mainLoop()方法具体作了些什么：


[cpp] view plain copy print?

  1. void DisplayLinkDirector::mainLoop()  

  2. {  

  3.     if (_purgeDirectorInNextLoop)//进入下一个主循环，也就是结束此次的主循环，就净化，也就是一些后期处理   

  4.     {  

  5.         _purgeDirectorInNextLoop = false;  

  6.         purgeDirector();  

  7.     }  

  8.     else if (_restartDirectorInNextLoop)  

  9.     {  

  10.         _restartDirectorInNextLoop = false;  

  11.         restartDirector();  

  12.     }  

  13.     else if (! _invalid)  

  14.     {  

  15.         drawScene();//绘制屏幕  

  16.         PoolManager::getInstance()->getCurrentPool()->clear();//释放一些没有用的对象，主要保件内存的合理管理   

  17.     }  

  18. }  

void DisplayLinkDirector::mainLoop()
{
    if (_purgeDirectorInNextLoop)//进入下一个主循环，也就是结束此次的主循环，就净化，也就是一些后期处理 
    {
        _purgeDirectorInNextLoop = false;
        purgeDirector();
    }
    else if (_restartDirectorInNextLoop)
    {
        _restartDirectorInNextLoop = false;
        restartDirector();
    }
    else if (! _invalid)
    {
        drawScene();//绘制屏幕
        PoolManager::getInstance()->getCurrentPool()->clear();//释放一些没有用的对象，主要保件内存的合理管理 
    }
}

最开始我还疑惑为何mainLoop()方法的类是DisplayLinkDirector而不是CCDirector，可是在CCDirector.cpp中咱们会找到以下代码：


[cpp] view plain copy print?

  1. static DisplayLinkDirector *s_SharedDirector = nullptr;  

  2. Director* Director::getInstance()  

  3. {  

  4.     if (!s_SharedDirector)  

  5.     {  

  6.         s_SharedDirector = new (std::nothrow) DisplayLinkDirector();  

  7.         CCASSERT(s_SharedDirector, "FATAL: Not enough memory");  

  8.         s_SharedDirector->init();  

  9.     }  

  10.    

  11.     return s_SharedDirector;  

  12. }  

static DisplayLinkDirector *s_SharedDirector = nullptr;
Director* Director::getInstance()
{
    if (!s_SharedDirector)
    {
        s_SharedDirector = new (std::nothrow) DisplayLinkDirector();
        CCASSERT(s_SharedDirector, "FATAL: Not enough memory");
        s_SharedDirector->init();
    }
 
    return s_SharedDirector;
}

咱们能够看到Director类返回的单例对象是一个DisplayLinkDirector类型的，因此这个导演实例要执行mainLoop()方法，这个方法天然是DisplayLinkDirector类里的方法啦！

可是这是否是说明Director类就是DisplayLinkDirector类或继承自DisplayLinkDirector类呢？千万不要这样想！这两个类没有半毛钱关系，咱们在CCDirector.h中看到以下代码：

[cpp] view plain copy print?

  1. class CC_DLL Director : public Ref  

class CC_DLL Director : public Ref


能够看出Director类是继承自Ref类的，只是经过getInstance()方法返回的导演类的实例对象是DisplayLinkDirector类型的，CCDisplayLinkDirector类是CCDisplay的子类，从命名就应该能够很清晰的知道它的用处。这里虽然有点绕，但不要混淆哈！


好了，回过头来，在DisplayLinkDirector::mainLoop()方法中我能够看到这句代码：


[cpp] view plain copy print?

  1. void DisplayLinkDirector::mainLoop()  

  2. {  

  3.     ......  

  4.     drawScene();  

  5.     ......  

  6. }  

void DisplayLinkDirector::mainLoop()
{
    ......
    drawScene();
    ......
}

mainloop()若是执行会调用drawScene()，经过drawScene()代码就能够实现场景的绘制了。

那咱们继续看看drawScene()具体作了些什么：

[cpp] view plain copy print?

  1. void Director::drawScene()  

  2. {  

  3.     ......  

  4.     if (_notificationNode)  

  5.    {  

  6.         _notificationNode->visit(_renderer, Mat4::IDENTITY, 0);  

  7.    }  

  8.     ......  

  9.     _renderer->render();  

  10. }  

void Director::drawScene()
{
    ......
    if (_notificationNode)
   {
        _notificationNode->visit(_renderer, Mat4::IDENTITY, 0);
   }
    ......
    _renderer->render();
}

Director::drawScene()作了好多事情，其余的先不看，咱们主要关注这两句：

[cpp] view plain copy print?

  1. 1._notificationNode->visit(_renderer, Mat4::IDENTITY, 0);  

1._notificationNode->visit(_renderer, Mat4::IDENTITY, 0);


[cpp] view plain copy print?

  1. 2._renderer->render();  

2._renderer->render();


先看第一句，这句_notificationNode->visit(_renderer, Mat4::IDENTITY, 0) ,这句实际上是进入了一个循环调用，具体要看CCNode.cpp：

[cpp] view plain copy print?

  1. void Node::visit(Renderer* renderer, const Mat4 &parentTransform, uint32_t parentFlags)  

  2. {  

  3.     ......   

  4.         for( ; i < _children.size(); i++ )  

  5.         {  

  6.             auto node = _children.at(i);  

  7.    

  8.             if (node && node->_localZOrder < 0)  

  9.                 node->visit(renderer, _modelViewTransform, flags);  

  10.             else  

  11.                 break;  

  12.         }  

  13.         ......  

  14.         this->draw(renderer, _modelViewTransform, flags);  

  15.         ......  

  16. }  

void Node::visit(Renderer* renderer, const Mat4 &parentTransform, uint32_t parentFlags)
{
   	...... 
        for( ; i < _children.size(); i++ )
        {
            auto node = _children.at(i);
 
            if (node && node->_localZOrder < 0)
                node->visit(renderer, _modelViewTransform, flags);
            else
                break;
        }
        ......
        this->draw(renderer, _modelViewTransform, flags);
        ......
}

这个函数有一个循环调用，咱们能够看到auto node = _children.at(i);和node->visit(renderer, _modelViewTransform, flags);，这段代码的意思是先获取子节点，而后递归调用节点的visit()函数，到了没有子节点的节点，执行了这句this->draw(renderer, _modelViewTransform, flags)，开始调用draw()函数，那么咱们接着看draw()函数代码：

[cpp] view plain copy print?

  1. void Node::draw(Renderer* renderer, const Mat4 &transform, uint32_t flags)  

  2. {  

  3. }  

void Node::draw(Renderer* renderer, const Mat4 &transform, uint32_t flags)
{
}

里面什么都没有啊，这是怎么回事？其实这个draw()函数是个虚函数，因此它执行时执行的是该子节点类的draw()函数。那么咱们分别看DrawNode::draw()、Sprite::draw()：

[cpp] view plain copy print?

  1. void DrawNode::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)  

  2. {  

  3.     if(_bufferCount)  

  4.     {  

  5.         ......  

  6.         renderer->addCommand(&_customCommand);  

  7.     }  

  8.     if(_bufferCountGLPoint)  

  9.     {  

  10.         ......  

  11.         renderer->addCommand(&_customCommandGLPoint);  

  12.     }  

  13.       

  14.     if(_bufferCountGLLine)  

  15.     {  

  16.         ......  

  17.         renderer->addCommand(&_customCommandGLLine);  

  18.     }  

  19. }  

void DrawNode::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{
    if(_bufferCount)
    {
        ......
        renderer->addCommand(&_customCommand);
    }
    if(_bufferCountGLPoint)
    {
        ......
        renderer->addCommand(&_customCommandGLPoint);
    }
    
    if(_bufferCountGLLine)
    {
        ......
        renderer->addCommand(&_customCommandGLLine);
    }
}

[cpp] view plain copy print?

  1. void Sprite::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)  

  2. {  

  3. ......  

  4.     if(_insideBounds)  

  5. {  

  6.     ......  

  7.         renderer->addCommand(&_trianglesCommand);  

  8.     }  

  9. }  

void Sprite::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{
......
    if(_insideBounds)
{
    ......
        renderer->addCommand(&_trianglesCommand);
    }
}

咱们能够看到在在这些子类的draw()函数都执行了renderer->addCommand()代码，这是向RenderQueue中添加RenderCommand，在添加时顺便对RenderCommand进行了一些参数设置，固然有的类的draw()不是向RenderQueue中添加RenderCommand，而是直接使用OpenGL的API直接进行渲染，或者作一些其余的事情。


当Director::drawScene()循环调用完全部子节点的visit()方法而且执行完draw()方法，即向RenderQueue中添加完RenderCommand后，咱们就看看接下来进行渲染的Renderer::render() 函数都作了些什么：

[cpp] view plain copy print?

  1. void Renderer::render()  

  2. {  

  3.     _isRendering = true;  

  4.       

  5.     if (_glViewAssigned)  

  6.     {  

  7.         for (auto &renderqueue : _renderGroups)  

  8.         {  

  9.             renderqueue.sort();  

  10.         }  

  11.         visitRenderQueue(_renderGroups[0]);  

  12.     }  

  13.     clean();  

  14.     _isRendering = false;  

  15. }  

void Renderer::render()
{
    _isRendering = true;
    
    if (_glViewAssigned)
    {
        for (auto &renderqueue : _renderGroups)
        {
            renderqueue.sort();
        }
        visitRenderQueue(_renderGroups[0]);
    }
    clean();
    _isRendering = false;
}

看到“renderqueue.sort()"，这是根据ID先对全部RenderCommand进行排序，而后才进行渲染，“visitRenderQueue( _renderGroups[0])”就是来进行渲染的。

那么咱们接着看看void Renderer::visitRenderQueue(const RenderQueue& queue)的代码：

[cpp] view plain copy print?

  1. void Renderer::visitRenderQueue(RenderQueue& queue)  

  2. {  

  3.     queue.saveRenderState();  

  4.     const auto& zNegQueue = queue.getSubQueue(RenderQueue::QUEUE_GROUP::GLOBALZ_NEG);  

  5.     if (zNegQueue.size() > 0)  

  6.     {  

  7.         if(_isDepthTestFor2D)  

  8.         {  

  9.             glEnable(GL_DEPTH_TEST);  

  10.             glDepthMask(true);  

  11.             glEnable(GL_BLEND);  

  12.             RenderState::StateBlock::_defaultState->setDepthTest(true);  

  13.             RenderState::StateBlock::_defaultState->setDepthWrite(true);  

  14.             RenderState::StateBlock::_defaultState->setBlend(true);  

  15.         }  

  16.         else  

  17.         {  

  18.             glDisable(GL_DEPTH_TEST);  

  19.             glDepthMask(false);  

  20.             glEnable(GL_BLEND);  

  21.             RenderState::StateBlock::_defaultState->setDepthTest(false);  

  22.             RenderState::StateBlock::_defaultState->setDepthWrite(false);  

  23.             RenderState::StateBlock::_defaultState->setBlend(true);  

  24.         }  

  25.         for (auto it = zNegQueue.cbegin(); it != zNegQueue.cend(); ++it)  

  26.         {  

  27.             proce***enderCommand(*it);  

  28.         }  

  29.         flush();  

  30. }  

void Renderer::visitRenderQueue(RenderQueue& queue)
{
    queue.saveRenderState();
    const auto& zNegQueue = queue.getSubQueue(RenderQueue::QUEUE_GROUP::GLOBALZ_NEG);
    if (zNegQueue.size() > 0)
    {
        if(_isDepthTestFor2D)
        {
            glEnable(GL_DEPTH_TEST);
            glDepthMask(true);
            glEnable(GL_BLEND);
            RenderState::StateBlock::_defaultState->setDepthTest(true);
            RenderState::StateBlock::_defaultState->setDepthWrite(true);
            RenderState::StateBlock::_defaultState->setBlend(true);
        }
        else
        {
            glDisable(GL_DEPTH_TEST);
            glDepthMask(false);
            glEnable(GL_BLEND);
            RenderState::StateBlock::_defaultState->setDepthTest(false);
            RenderState::StateBlock::_defaultState->setDepthWrite(false);
            RenderState::StateBlock::_defaultState->setBlend(true);
        }
        for (auto it = zNegQueue.cbegin(); it != zNegQueue.cend(); ++it)
        {
            proce***enderCommand(*it);
        }
        flush();
}

在visitRenderQueue()方法中我咱们看到这一行代码：

[cpp] view plain copy print?

  1. proce***enderCommand(*it);  

proce***enderCommand(*it);


这是干什么的呢？这句代码就是进一步进入渲染流程的，咱们看一下proce***enderCommand()它作了什么：

[cpp] view plain copy print?

  1. void Renderer::proce***enderCommand(RenderCommand* command)  

  2. {  

  3.     auto commandType = command->getType();  

  4.     if( RenderCommand::Type::TRIANGLES_COMMAND == commandType)  

  5.     {  

  6.          ......  

  7.          drawBatchedTriangles();  

  8.          ......  

  9.     }  

  10.     else if ( RenderCommand::Type::QUAD_COMMAND == commandType )  

  11.     {  

  12.         ......  

  13.         drawBatchedQuads();  

  14.         ......  

  15.     }  

  16.     else if (RenderCommand::Type::MESH_COMMAND == commandType)  

  17.     {  

  18.         ......  

  19.         auto cmd = static_cast<MeshCommand*>(command);  

  20.         ......  

  21.         cmd->execute();  

  22.         ......  

  23.     }  

  24.     ......  

  25. }  

void Renderer::proce***enderCommand(RenderCommand* command)
{
    auto commandType = command->getType();
    if( RenderCommand::Type::TRIANGLES_COMMAND == commandType)
    {
         ......
    	 drawBatchedTriangles();
         ......
    }
    else if ( RenderCommand::Type::QUAD_COMMAND == commandType )
    {
        ......
        drawBatchedQuads();
        ......
    }
    else if (RenderCommand::Type::MESH_COMMAND == commandType)
    {
        ......
        auto cmd = static_cast<MeshCommand*>(command);
        ......
        cmd->execute();
        ......
    }
    ......
}

咱们能够看到，在这里，根据渲染类型的不一样，会调用不一样的函数，这些函数里有OpenGL的API，没错，这些函数来进行渲染的。好比TRIANGLES_COMMAND类型中调用了drawBatchedTriangles()，QUAD_COMMAND类型中调用了drawBatchedQuads()，MESH_COMMAND类型中调用了MeshCommand::execute()，等等。

举个例子，咱们来看下drawBatchedTriangles()方法：

[cpp] view plain copy print?

  1. void Renderer::drawBatchedTriangles()  

  2. {  

  3.     ......  

  4.     if (Configuration::getInstance()->supportsShareableVAO())  

  5.     {  

  6.         ......}  

  7.     else  

  8.     {  

  9.         ......  

  10.         // vertices  

  11.         glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 3, GL_FLOAT, GL_FALSE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, vertices));  

  12.    

  13.         // colors  

  14.         glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, colors));  

  15.    

  16.         // tex coords  

  17.         glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, texCoords));  

  18.    

  19.         glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _buffersVBO[1]);  

  20.         glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(_indices[0]) * _filledIndex, _indices, GL_STATIC_DRAW);  

  21.       }  

  22.        ......  

  23. }  

void Renderer::drawBatchedTriangles()
{
    ......
    if (Configuration::getInstance()->supportsShareableVAO())
    {
        ......}
    else
    {
        ......
        // vertices
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION, 3, GL_FLOAT, GL_FALSE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, vertices));
 
        // colors
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR, 4, GL_UNSIGNED_BYTE, GL_TRUE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, colors));
 
        // tex coords
        glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD, 2, GL_FLOAT, GL_FALSE, kQuadSize, (GLvoid*) offsetof(V3F_C4B_T2F, texCoords));
 
        glBindBuffer(GL_ELEMENT_ARRAY_BUFFER, _buffersVBO[1]);
        glBufferData(GL_ELEMENT_ARRAY_BUFFER, sizeof(_indices[0]) * _filledIndex, _indices, GL_STATIC_DRAW);
      }
       ......
}

能够看到该方法中调用了不少OpenGL的API，这些方法就是整个渲染流程最后进行渲染的环节。

 

好了，以上即是Cocos引擎的整个的渲染流程了。

最后用一个流程图对以上内容作一下总结，话说这张图我真的是很用心画的，改了好多遍最后优化到如今这个样子给你们看，但愿对你们有帮助：


 

 

 

 

 

 

 

 

以上。

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程