cocos2d-x的渲染流程及原理
环境： cocos3.10 Xcode
UI元素的渲染流程图示：
1. 从main进入到Application:run中，该方法下有个while循环，用于处理设定的每帧(FPS)刷新相关
{// ... glview->retain(); while (!glview->windowShouldClose()) { director->mainLoop(); } return 0; }
2. mainLoop做的事情如下：
void Director::mainLoop() { if (! _invalid) { // 绘制场景 drawScene(); // 自动内存释放相关，每帧结束后，检测释放掉内存池中引用计数为1的节点 PoolManager::getInstance()->getCurrentPool()->clear(); } }
3.绘制场景drawScene的主要代码：
void Director::drawScene() { // 渲染当前运行场景 if (_runningScene) { //clear draw stats _renderer->clearDrawStats(); //render the scene _openGLView->renderScene(_runningScene, _renderer); _eventDispatcher->dispatchEvent(_eventAfterVisit); } }
4. 通过renderScene会进入到Scene::render()中，它是处理渲染相关的主要接口：
void Scene::render(Renderer* renderer, const Mat4* eyeTransforms, const Mat4* eyeProjections, unsigned int multiViewCount) { auto director = Director::getInstance(); Camera* defaultCamera = nullptr; // 转换坐标系，将ui元素相对坐标转换为世界坐标，原因在于OpenGL ES坐标系与cocos世界坐标系一致 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; }
5. visit主要用于UI树的遍历，遍历的规则使用的是中序(in-order)深度优先算法。即：
1. 遍历左边的子节点（小于0）
2. 遍历根节点（等于0）
3. 遍历右边的子节点（大于0）
void Node::visit(Renderer* renderer, const Mat4 &parentTransform, uint32_t parentFlags) { // 如果不可见，则不再绘制 if (!_visible) { return; }
bool visibleByCamera = isVisitableByVisitingCamera(); int i = 0; if(!_children.empty()) {
// 按照localZOrder排序，若相同则按照UI树顺序排序 sortAllChildren(); // 遍历 localZOrder < 0 for(auto size = _children.size(); i < size; ++i) { auto node = _children.at(i); if (node && node->_localZOrder < 0) node->visit(renderer, _modelViewTransform, flags); else break; } // 遍历自身 if (visibleByCamera) this->draw(renderer, _modelViewTransform, flags); // 遍历localZOrder > 0
for(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); }
而遍历的方法主要通过sortAllChildren方法实现，比较的是localZOrder。
// sortAllChildren void Node::sortAllChildren() { if (_reorderChildDirty) { sortNodes(_children); _reorderChildDirty = false; } } // sortNodes static void sortNodes(cocos2d::Vector<_T*>& nodes) { static_assert(std::is_base_of<Node, _T>::value, "Node::sortNodes: Only accept derived of Node!"); // 按照localZOrder排序 std::stable_sort(std::begin(nodes), std::end(nodes), [](_T* n1, _T* n2) { return n1->_localZOrder < n2->_localZOrder; }); }
6. 在visit排序遍历中，会依次根据localZOrder依次执行draw, 我们以Sprite为例：
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 updated auto visitingCamera = Camera::getVisitingCamera(); auto defaultCamera = Camera::getDefaultCamera(); 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绘制栈RenderQueue中 renderer->addCommand(&_trianglesCommand); } }
7. draw并未执行绘制，而是生成了RenderCommand绘制命令，放置到了RenderQueue中。
void Renderer::addCommand(RenderCommand* command) { int renderQueue =_commandGroupStack.top(); addCommand(command, renderQueue); }
8. UI树遍历结束后，会生成一系列的绘制命令，此时Renderer::render()开始对绘制命令进行排序，绘制。
这样做的目地主要使得渲染系统可以对绘制做一些优化，比如：使用相同纹理的Command可执行自动批绘制。
void Renderer::render() { _isRendering = true; if (_glViewAssigned) { for (auto &renderqueue : _renderGroups) { // 执行遍历，遍历的是globalZOrder相关 renderqueue.sort(); } visitRenderQueue(_renderGroups[0]); } clean(); _isRendering = false; }
关于其遍历sort的实现看下：
void RenderQueue::sort() { // 3D相关 std::sort(std::begin(_commands[QUEUE_GROUP::TRANSPARENT_3D]), std::end(_commands[QUEUE_GROUP::TRANSPARENT_3D]), compare3DCommand); // GLOBALZ_NEG 表示globalZOrder < 0 std::sort(std::begin(_commands[QUEUE_GROUP::GLOBALZ_NEG]), std::end(_commands[QUEUE_GROUP::GLOBALZ_NEG]), compareRenderCommand); // GLOBALZ_POS 表示globalZOrder > 0 std::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(); }
在这里，我们可以明白，RenderQueue对RenderCommand下globalZOrder不为0的，又执行了排序。我们可以总结到：
1. 过多的使用globalZOrder会影响UI元素的绘制性能
2. UI元素的绘制顺序并非仅受localZOrder的影响，也会受到globalZOrder的影响
9. 通过 visitRenderQueue 这一步会进入到渲染流程，而最终执行到的代码为：processRenderCommand
void Renderer::processRenderCommand(RenderCommand* command) { auto commandType = command->getType(); if( RenderCommand::Type::TRIANGLES_COMMAND == commandType) { // ... } else if (RenderCommand::Type::MESH_COMMAND == commandType) { flush2D(); // ... } else if(RenderCommand::Type::GROUP_COMMAND == commandType) { flush(); int renderQueueID = ((GroupCommand*) command)->getRenderQueueID(); CCGL_DEBUG_POP_GROUP_MARKER(); } else if(RenderCommand::Type::CUSTOM_COMMAND == commandType) { flush(); auto cmd = static_cast<CustomCommand*>(command); cmd->execute(); } else if(RenderCommand::Type::BATCH_COMMAND == commandType) { flush(); auto cmd = static_cast<BatchCommand*>(command); cmd->execute(); } else if(RenderCommand::Type::PRIMITIVE_COMMAND == commandType) { flush(); auto cmd = static_cast<PrimitiveCommand*>(command); cmd->execute(); } }
可以看到，更具渲染类型不同，会调用不同的渲染方法等。其相关命令主要有：
enum class Type { /** Reserved type.*/ UNKNOWN_COMMAND, // 用于绘制1个或多个矩形区域，比如Sprite, ParticleSystem QUAD_COMMAND, /**Custom command, used for calling callback for rendering.*/ CUSTOM_COMMAND, /* 用来绘制一个TextureAtlas, 比如Label, TileMap等 而对于TextureAtlas来说，它主要用于对同一纹理下多个精灵的封装 */ BATCH_COMMAND, // 用来包装多个RenderCommand,而其中的RenderCommand不会参与全局排序，多用于ClippingNode，RenderTexture等 GROUP_COMMAND, /**Mesh command, used to draw 3D meshes.*/ MESH_COMMAND, /**Primitive command, used to draw primitives such as lines, points and triangles.*/ PRIMITIVE_COMMAND, /**Triangles command, used to draw triangles.*/ TRIANGLES_COMMAND };
...
