cocos2d-x 渲染流程简要说明

简介

Cocos2d 3.x之后，渲染从UI树进行了分离，想比较2.x而言，新的设计更优雅，灵活，易于拓展。

特点：

将绘制逻辑分离，也就是从draw中分离出去，添加了绘制命令Command相关
采用应用程序级别的视口裁剪，如果UI元素的坐标在视窗区域外，则不会添加到绘制命令栈中。这样的好处：
- 减少绘制命令的数量
- 减少绘制命令的排序时间
- 减少对GPU的浪费，在OpenGL ES图元组装阶段会将视口之外的图元丢弃或裁剪。
采用了自动批绘制BatchCommand, 主要针对的是使用相同纹理的UI元素

#mermaid-svg-baJyxy9XYw5ALyx6 {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-baJyxy9XYw5ALyx6 .error-icon{fill:#552222;}#mermaid-svg-baJyxy9XYw5ALyx6 .error-text{fill:#552222;stroke:#552222;}#mermaid-svg-baJyxy9XYw5ALyx6 .edge-thickness-normal{stroke-width:2px;}#mermaid-svg-baJyxy9XYw5ALyx6 .edge-thickness-thick{stroke-width:3.5px;}#mermaid-svg-baJyxy9XYw5ALyx6 .edge-pattern-solid{stroke-dasharray:0;}#mermaid-svg-baJyxy9XYw5ALyx6 .edge-pattern-dashed{stroke-dasharray:3;}#mermaid-svg-baJyxy9XYw5ALyx6 .edge-pattern-dotted{stroke-dasharray:2;}#mermaid-svg-baJyxy9XYw5ALyx6 .marker{fill:#333333;stroke:#333333;}#mermaid-svg-baJyxy9XYw5ALyx6 .marker.cross{stroke:#333333;}#mermaid-svg-baJyxy9XYw5ALyx6 svg{font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;}#mermaid-svg-baJyxy9XYw5ALyx6 .label{font-family:"trebuchet ms",verdana,arial,sans-serif;color:#333;}#mermaid-svg-baJyxy9XYw5ALyx6 .cluster-label text{fill:#333;}#mermaid-svg-baJyxy9XYw5ALyx6 .cluster-label span{color:#333;}#mermaid-svg-baJyxy9XYw5ALyx6 .label text,#mermaid-svg-baJyxy9XYw5ALyx6 span{fill:#333;color:#333;}#mermaid-svg-baJyxy9XYw5ALyx6 .node rect,#mermaid-svg-baJyxy9XYw5ALyx6 .node circle,#mermaid-svg-baJyxy9XYw5ALyx6 .node ellipse,#mermaid-svg-baJyxy9XYw5ALyx6 .node polygon,#mermaid-svg-baJyxy9XYw5ALyx6 .node path{fill:#ECECFF;stroke:#9370DB;stroke-width:1px;}#mermaid-svg-baJyxy9XYw5ALyx6 .node .label{text-align:center;}#mermaid-svg-baJyxy9XYw5ALyx6 .node.clickable{cursor:pointer;}#mermaid-svg-baJyxy9XYw5ALyx6 .arrowheadPath{fill:#333333;}#mermaid-svg-baJyxy9XYw5ALyx6 .edgePath .path{stroke:#333333;stroke-width:2.0px;}#mermaid-svg-baJyxy9XYw5ALyx6 .flowchart-link{stroke:#333333;fill:none;}#mermaid-svg-baJyxy9XYw5ALyx6 .edgeLabel{background-color:#e8e8e8;text-align:center;}#mermaid-svg-baJyxy9XYw5ALyx6 .edgeLabel rect{opacity:0.5;background-color:#e8e8e8;fill:#e8e8e8;}#mermaid-svg-baJyxy9XYw5ALyx6 .cluster rect{fill:#ffffde;stroke:#aaaa33;stroke-width:1px;}#mermaid-svg-baJyxy9XYw5ALyx6 .cluster text{fill:#333;}#mermaid-svg-baJyxy9XYw5ALyx6 .cluster span{color:#333;}#mermaid-svg-baJyxy9XYw5ALyx6 div.mermaidTooltip{position:absolute;text-align:center;max-width:200px;padding:2px;font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:12px;background:hsl(80, 100%, 96.2745098039%);border:1px solid #aaaa33;border-radius:2px;pointer-events:none;z-index:100;}#mermaid-svg-baJyxy9XYw5ALyx6 :root{--mermaid-font-family:"trebuchet ms",verdana,arial,sans-serif;}

1.UI遍历

2.渲染

Director::mainLoop

Scene::render

Node::visit

Renderer::render

Application::run

Director::drawScene

Label::draw

Sprite::draw

...

Renderer::addCommand

RenderQueue

Renderer::visitRenderQueue

Renderer::processRenderCommand

CustomCommand

BatchCommand

TrianglesCommand

drawBatchedTriangles

GroupCommand

cmd::execute

简单的理解其流程就是：

通过mainLoop每秒60帧刷新
通过drawScene绘制屏幕
通过visit对UI节点树遍历
每个UI元算通过draw生成绘制命令
对RenderQueue队列中，绘制命令排序
执行绘制命令，调用OpenGL绘制屏幕

mainLoop

Cocos2d-x 默认的是每秒60帧(fps)对屏幕进行刷新。

在Application::run的while循环中，按照FPS的设定，每帧调用的方法就是mainLoop

void Director::mainLoop() {if (! _invalid) {// 绘制场景drawScene();// 内存管理相关PoolManager::getInstance()->getCurrentPool()->clear();}
}

它主要做的两件事就是：

渲染
内存释放

关于内存管理相关，可参考：cocos2d-x 内存管理机制

绘制(渲染)

通过drawScene最后会进入到Scene::render中,绘制的流程简要分为两步：

UI遍历，主要通过Node::visit执行
添加到绘制命令栈中, 主要通过不同UI元素的draw执行

void Scene::render(Renderer* renderer, const Mat4* eyeTransforms, const Mat4* eyeProjections, unsigned int multiViewCount) {auto director = Director::getInstance();Camera* defaultCamera = nullptr;// 转换坐标系，将ui元素相对坐标转换为世界坐标const auto& transform = getNodeToParentTransform();for (const auto& camera : getCameras()) {if (!camera->isVisible())continue;Camera::_visitingCamera = camera;if (Camera::_visitingCamera->getCameraFlag() == CameraFlag::DEFAULT) {defaultCamera = Camera::_visitingCamera;}// 遍历场景中UI树,会进入到Node::visit中，进行UI树遍历visit(renderer, transform, 0);// 绘制，会进入到Renderer::render中，执行绘制renderer->render();camera->restore();for (unsigned int i = 0; i < multiViewCount; ++i)director->popProjectionMatrix(i);}Camera::_visitingCamera = nullptr;
}

从渲染的角度来说，如上代码做的两件主要事情：

调用visit 执行节点的UI树遍历
调用render 调用绘制命令相关开始渲染流程

UI树遍历

UI树节点的遍历，其规则采用的是中序(in-order)深度优先算法，也就是：

遍历左边的子节点(localZOrder < 0)
遍历根节点(localZOrder = 0)
遍历右边的字节点(localZOrder > 0)

void Node::visit(Renderer* renderer, const Mat4 &parentTransform, uint32_t parentFlags) {// 如果不可见，则不再绘制if (!_visible)return;uint32_t flags = processParentFlags(parentTransform, parentFlags);_director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);_director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW, _modelViewTransform);// bool visibleByCamera = isVisitableByVisitingCamera();int i = 0;if(!_children.empty()) {// 该接口会根据节点的localZOrder进行排序sortAllChildren();// 遍历localZOrder < 0for(auto size = _children.size(); i < size; ++i) {auto node = _children.at(i);if (node && node->_localZOrder < 0)node->visit(renderer, _modelViewTransform, flags);elsebreak;}// 绘制自身if (visibleByCamera)this->draw(renderer, _modelViewTransform, flags);// 遍历localZOrder > 0for(auto it=_children.cbegin()+i, itCend = _children.cend(); it != itCend; ++it)(*it)->visit(renderer, _modelViewTransform, flags);} else if (visibleByCamera) {// 添加到绘制命令中this->draw(renderer, _modelViewTransform, flags);}_director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
}

而针对于于UI树的遍历，主要接口为：

void Node::sortAllChildren() {if (_reorderChildDirty) {sortNodes(_children);_reorderChildDirty = false;_eventDispatcher->setDirtyForNode(this);}
}// 以localZOrder进行遍历
static void sortNodes(cocos2d::Vector<_T*>& nodes) {std::sort(std::begin(nodes), std::end(nodes), [](_T* n1, _T* n2) {return (n1->_localZOrder < n2->_localZOrder);});
}

UI树的遍历，有助于对项目功能的性能优化，比如：

如果某些UI不需要显示，可以设置为隐藏
减少下节点的嵌套复杂度，有助于提升节点的遍历速度

生成绘制命令

draw在3.x之后不再执行绘制，而是生成绘制命令，以Sprite::draw为例：

void Sprite::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags) {// 检测纹理是否合法if (_texture == nullptr) {return;}#if CC_USE_CULLING// Don't calculate the culling if the transform was not updatedauto visitingCamera = Camera::getVisitingCamera();auto defaultCamera = Camera::getDefaultCamera();if (visitingCamera == nullptr) {_insideBounds = true;}else if (visitingCamera == defaultCamera) {_insideBounds = ((flags & FLAGS_TRANSFORM_DIRTY) || visitingCamera->isViewProjectionUpdated()) ? renderer->checkVisibility(transform, _contentSize) : _insideBounds;}else {// XXX: this always return true since_insideBounds = renderer->checkVisibility(transform, _contentSize);}// 检测渲染的纹理是否在视窗区域内if(_insideBounds)
#endif{// 添加绘制命令_trianglesCommand.init(_globalZOrder,_texture,getGLProgramState(),_blendFunc,_polyInfo.triangles,transform,flags);renderer->addCommand(&_trianglesCommand);}
}

通过addCommand添加的绘制命令队列RenderQueue中。

void Renderer::addCommand(RenderCommand* command) {int renderQueueID =_commandGroupStack.top();addCommand(command, renderQueueID);
}void Renderer::addCommand(RenderCommand* command, int renderQueueID) {// std::vector<RenderQueue> _renderGroups;    绘制命令栈_renderGroups[renderQueueID].push_back(command);
}

绘制命令排序

等UI元素遍历结束后，会开始执行绘制命令相关

void Renderer::render() {_isRendering = true;if (_glViewAssigned) {for (auto &renderqueue : _renderGroups) {// 绘制命令遍历，主要针对的是globalZOrderrenderqueue.sort();}visitRenderQueue(_renderGroups[0]);}clean();_isRendering = false;
}

绘制前，会对绘制栈中的命令进行遍历

void RenderQueue::sort()
{// 遍历globalZOrder小于0的std::stable_sort(std::begin(_commands[QUEUE_GROUP::GLOBALZ_NEG]), std::end(_commands[QUEUE_GROUP::GLOBALZ_NEG]), compareRenderCommand);// 遍历globalZOrder大于0的std::stable_sort(std::begin(_commands[QUEUE_GROUP::GLOBALZ_POS]), std::end(_commands[QUEUE_GROUP::GLOBALZ_POS]), compareRenderCommand);
}static bool compareRenderCommand(RenderCommand* a, RenderCommand* b)
{return a->getGlobalOrder() < b->getGlobalOrder();
}

针对于globalZOrder的遍历没有等于0的原因在于：

前面的visit遍历中，已经对localZOrder执行了排序，而在没有设定globalZorder的情况下，它默认就是0.

因此RenderQueue仅需要关注globalZOrder不为0的排序即可。

另外，关于RenderQueue的排序，让我们可以认识到globalZOrder的优劣：

可以更灵活的改变层级的显示
会影响绘制命令的排序，简单的说，UI元素的绘制不是根据localZOrder进行排序的

执行绘制命令

在遍历完成后，会通过visitRenderQueue进入到processRenderCommand中

void Renderer::processRenderCommand(RenderCommand* command) {auto commandType = command->getType();if( RenderCommand::Type::TRIANGLES_COMMAND == commandType) {flush3D();auto cmd = static_cast<TrianglesCommand*>(command);if(_filledVertex + cmd->getVertexCount() > VBO_SIZE || _filledIndex + cmd->getIndexCount() > INDEX_VBO_SIZE) {drawBatchedTriangles();}}else if(RenderCommand::Type::GROUP_COMMAND == commandType) {flush();int renderQueueID = ((GroupCommand*) command)->getRenderQueueID();CCGL_DEBUG_PUSH_GROUP_MARKER("RENDERER_GROUP_COMMAND");visitRenderQueue(_renderGroups[renderQueueID]);CCGL_DEBUG_POP_GROUP_MARKER();}else if(RenderCommand::Type::CUSTOM_COMMAND == commandType) {flush();auto cmd = static_cast<CustomCommand*>(command);CCGL_DEBUG_INSERT_EVENT_MARKER("RENDERER_CUSTOM_COMMAND");cmd->execute();}else if(RenderCommand::Type::BATCH_COMMAND == commandType) {flush();auto cmd = static_cast<BatchCommand*>(command);CCGL_DEBUG_INSERT_EVENT_MARKER("RENDERER_BATCH_COMMAND");cmd->execute();}
}

不同的UI元素会选择对应的命令执行执行OpenGL ES的渲染，最后将效果绘制到屏幕中。

结语

cocos2d-x 的渲染流程步骤说明下：

在游戏每帧刷新的情况下调用Director::mainLoop
通过Director::drawScene绘制当前场景
对场景下的所有节点采用的方式是： 先遍历后渲染
遍历通过Node::visit 按照LocalZOrder进行排序遍历，并生成不同类型的绘制命令
在遍历结束后，对绘制命令按照GlobalZorder进行排序遍历
然后对绘制命令会进行合批处理等，然后调用OpenGL开始渲染。

这个就是它大概的流程。从项目优化的角度来说，需要我们以后可以明白：

如果UI不需要显示，可以直接进行隐藏
减少节点的嵌套复杂度，有助于提升节点的遍历速度
减少全局层级的设置，有助于提升绘制命令的遍历
尤其针对于ClipingNode的使用，它使用的是自定义绘制命令，它会影响渲染合批

关于绘制命令相关，可以参考博客： cocos2d-x 绘制命令

最后，祝大家学习生活愉快!