首页 > 代码库 > 【Cocos2d-x 3.x】 3.0版本的全新绘制系
【Cocos2d-x 3.x】 3.0版本的全新绘制系
在Cocos2d-x 3.0的版本之前，Cocos2d-x的每个元素的绘制逻辑均分布于每个元素内部的draw()方法里，紧密依赖UI树的遍历；3.0开始，对绘制部分进行了重构，新的代码将绘制部分从UI树的遍历中分离出来，使得绘制系统设计更优雅、更灵活和易于扩展。
UI树的遍历
这是渲染系统比较重要的一个职责，遍历UI树中每一个元素，遍历的有两个重要的目的，一是遍历的顺序基本决定了元素被绘制的顺序，二是在遍历过程中实现元素的模型视图变换矩阵的计算，计算结果供OpenGL ES渲染管线计算顶点位置。
在3D渲染系统中，元素可以用任何顺序被绘制，最终图形惯性能够根据元素的Z轴，使用深度测试进行正确的绘制；在2D图形绘制中，各个元素在渲染管线中具有相同的Z深度，这些元素之间的层级以及绘制关系必须依赖同一个逻辑的深度，Cocos2d-x使用localZOrder来表示元素的逻辑深度，UI树的遍历采用中序的深度优先算法进行遍历。
遍历顺序及特点为：
遍历左边的子节点；
遍历根节点；
遍历右边子节点。
Cocos2d-x按元素的层级关系组织了一颗“”二叉树“”，左边的子节点表示逻辑深度小于0的子元素，右边的“”子节点“”表示逻辑深度大于0的子元素，这样，就能通过逻辑深度的顺序来表示元素被绘制的顺序，参见Node::visit()方法：
void Node::visit(Renderer* renderer, const Mat4 &parentTransform, uint32_t parentFlags)
{
// quick return if not visible. children won't be drawn.
if (!_visible)
{
return;
}
uint32_t flags = processParentFlags(parentTransform, parentFlags);
// IMPORTANT:
// To ease the migration to v3.0, we still support the Mat4 stack,
// but it is deprecated and your code should not rely on it
_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())
{
sortAllChildren();
// draw children zOrder < 0
for( ; i < _children.size(); i++ )
{
auto node = _children.at(i);
if (node && node->_localZOrder < 0)
node->visit(renderer, _modelViewTransform, flags);
else
break;
}
// self draw
if (visibleByCamera)
this->draw(renderer, _modelViewTransform, flags);
for(auto it=_children.cbegin()+i; it != _children.cend(); ++it)
(*it)->visit(renderer, _modelViewTransform, flags);
}
else if (visibleByCamera)
{
this->draw(renderer, _modelViewTransform, flags);
}
_director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
// FIX ME: Why need to set _orderOfArrival to 0??
// Please refer to https://github.com/cocos2d/cocos2d-x/pull/6920
// reset for next frame
// _orderOfArrival = 0;
}可见，Node先会将所有子节点排序，如果两个子节点的localZOrder值相同，则按照它们出现的顺序来表示绘制的顺序：
bool nodeComparisonLess(Node* n1, Node* n2)
{
return( n1->getLocalZOrder() < n2->getLocalZOrder() ||
( n1->getLocalZOrder() == n2->getLocalZOrder() && n1->getOrderOfArrival() < n2->getOrderOfArrival() )
);
}
void Node::sortAllChildren()
{
if (_reorderChildDirty)
{
std::sort(std::begin(_children), std::end(_children), nodeComparisonLess);
_reorderChildDirty = false;
}
}排序之后，Node就会按照小于0，根节点，然后是大于0的节点这样的顺序来一次绘制每个节点。
渲染命令和渲染队列
概述
新的绘制流程大致分为三步：生成绘制命令、对绘制命令进行排序、执行绘制命令。
生成绘制命令
在UI树的遍历的时候，对每一个元素生成一个绘制命令，RenderCommand表示一个绘制类型，它定义了如何去绘制一个元素，
class CC_DLL RenderCommand
{
public:
enum class Type
{
UNKNOWN_COMMAND,
QUAD_COMMAND,
CUSTOM_COMMAND,
BATCH_COMMAND,
GROUP_COMMAND,
MESH_COMMAND,
PRIMITIVE_COMMAND,
TRIANGLES_COMMAND
};
/**
* init function, will be called by all the render commands
*/
void init(float globalZOrder, const Mat4& modelViewTransform, uint32_t flags);
/** Get Render Command Id */
inline float getGlobalOrder() const { return _globalOrder; }
//...其他定义省略
};Type这个enum class里定义了几种绘制的类型，一般情况下，每个UI元素会关联0个或1个RenderCommand，并重写基类Node::draw()方法，在draw方法中将绘制命令发送给render。
void Sprite::draw(Renderer *renderer, const Mat4 &transform, uint32_t flags)
{
#if CC_USE_CULLING
// Don't do calculate the culling if the transform was not updated
_insideBounds = (flags & FLAGS_TRANSFORM_DIRTY) ? renderer->checkVisibility(transform, _contentSize) : _insideBounds;
if(_insideBounds)
#endif
{
_quadCommand.init(_globalZOrder, _texture->getName(), getGLProgramState(), _blendFunc, &_quad, 1, transform, flags);
renderer->addCommand(&_quadCommand);
#if CC_SPRITE_DEBUG_DRAW
_debugDrawNode->clear();
Vec2 vertices[4] = {
Vec2( _quad.bl.vertices.x, _quad.bl.vertices.y ),
Vec2( _quad.br.vertices.x, _quad.br.vertices.y ),
Vec2( _quad.tr.vertices.x, _quad.tr.vertices.y ),
Vec2( _quad.tl.vertices.x, _quad.tl.vertices.y ),
};
_debugDrawNode->drawPoly(vertices, 4, true, Color4F(1.0, 1.0, 1.0, 1.0));
#endif //CC_SPRITE_DEBUG_DRAW
}
}Sprite::draw()方法示意了这样绘制分离的方式，它只负责将绘制命令发送给render，并不会执行任何的GL命令，render会将RenderCommand放入一个栈中，等所有的UI元素遍历结束，render才开始执行所有的RenderCommand。
绘制命令的排序
绘制命令被执行的顺序不一定是UI元素被遍历的顺序，Cocos2d-x使用一个新的globalZOrder直接设置元素的绘制顺序，因此，UI元素绘制的顺序首先由globalZOrder决定，
然后再由遍历的顺序决定。
绘制命令执行
最后，render对经过排序的绘制命令执行绘制。 对于一般的RenderCommand，按顺序执行；对于Sprite使用的QuadCommand，如果两个QuadCommand相邻且使用相同的纹理、着色器等，render会将它们组合合成一个QuadCommand，这种情况称为自动批绘制。自动批绘制减少了绘制次数，提升了绘制性能。
绘制命令、绘制队列和绘制类
RenderCommand
class CC_DLL RenderCommand
{
public:
enum class Type
{
UNKNOWN_COMMAND,
QUAD_COMMAND,
CUSTOM_COMMAND,
BATCH_COMMAND,
GROUP_COMMAND,
MESH_COMMAND,
PRIMITIVE_COMMAND,
TRIANGLES_COMMAND
};
/**
* init function, will be called by all the render commands
*/
void init(float globalZOrder, const Mat4& modelViewTransform, uint32_t flags);
/** Get Render Command Id */
inline float getGlobalOrder() const { return _globalOrder; }
};每一个R enderCommand实例中，都包含一个globalZOrder属性，它是决定绘制顺序的重要属性。还有一个属性是Type，引擎内置了多个RenderCommand类型，其中QUAD_COMMAND用来绘制1个或多个矩形区域(比如说Sprite和ParticalSystem)，相邻的QuadCommand如果使用相同的纹理，则可以实现自动批绘制。
BATCH_COMMAND用来绘制一个TextAtlas，如Label、TileMap等。 GROUP_COMMAND可以包装多个RenderCommand的集合，而且GroupCommand中的每一个RenderCommand都不会参与全局的排序。
RenderQueue
class RenderQueue {
public:
enum QUEUE_GROUP
{
GLOBALZ_NEG = 0,
OPAQUE_3D = 1,
TRANSPARENT_3D = 2,
GLOBALZ_ZERO = 3,
GLOBALZ_POS = 4,
QUEUE_COUNT = 5,
};
public:
RenderQueue()
{
clear();
}
void push_back(RenderCommand* command);
ssize_t size() const;
void sort();
RenderCommand* operator[](ssize_t index) const;
void clear();
inline std::vector<RenderCommand*>& getSubQueue(QUEUE_GROUP group) { return _commands[group]; }
inline ssize_t getSubQueueSize(QUEUE_GROUP group) const { return _commands[group].size();}
void saveRenderState();
void restoreRenderState();
protected:
std::vector<std::vector<RenderCommand*>> _commands;
//Render State related
bool _isCullEnabled;
bool _isDepthEnabled;
GLboolean _isDepthWrite;
};场景中每一个UI元素的绘制命令被发送到一个RenderQueue的绘制栈上，由类的定义可知，RenderQueue中存储着一组RenderCommand。而在QUEUE_GROUP中定义了每个RenderCommand应该添加到vector的哪个对应索引下：
static bool compareRenderCommand(RenderCommand* a, RenderCommand* b)
{
return a->getGlobalOrder() < b->getGlobalOrder();
}
static bool compare3DCommand(RenderCommand* a, RenderCommand* b)
{
return a->getDepth() > b->getDepth();
}
void RenderQueue::sort()
{
// Don't sort _queue0, it already comes sorted
std::sort(std::begin(_commands[QUEUE_GROUP::TRANSPARENT_3D]), std::end(_commands[QUEUE_GROUP::TRANSPARENT_3D]), compare3DCommand);
std::sort(std::begin(_commands[QUEUE_GROUP::GLOBALZ_NEG]), std::end(_commands[QUEUE_GROUP::GLOBALZ_NEG]), compareRenderCommand);
std::sort(std::begin(_commands[QUEUE_GROUP::GLOBALZ_POS]), std::end(_commands[QUEUE_GROUP::GLOBALZ_POS]), compareRenderCommand);
}这是RenderQueue的排序方式，有sort()函数体的代码可以看到，QUEUE_GROUP::TRANSPARENT_3D表示的是3D的物体的绘制命令，将这些绘制命令排序时用到compare3DCommand，比较他们的Depth；而QUEUE_GROUP::GLOBALZ_NEG和QUEUE_GROUP::GLBALZ_POS分别表示globalZOrder小于0和大于0的绘制命令。
Render类实际上维护着一个RenderQueue的数组，每一个RenderQueue对应一组RenderCommand或者一个GroupCommand。
GroupCommand
class CC_DLL GroupCommand : public RenderCommand
{
public:
GroupCommand();
~GroupCommand();
void init(float depth);
inline int getRenderQueueID() const {return _renderQueueID;}
protected:
int _renderQueueID;
};
每个GroupCommand都对应着一个单独的RenderQueue，由_renderQueueID标识。
Renderer
class CC_DLL Renderer
{
public:
static const int VBO_SIZE = 65536;
static const int INDEX_VBO_SIZE = VBO_SIZE * 6 / 4;
static const int BATCH_QUADCOMMAND_RESEVER_SIZE = 64;
static const int MATERIAL_ID_DO_NOT_BATCH = 0;
/** Adds a `RenderComamnd` into the renderer */
void addCommand(RenderCommand* command);
/** Adds a `RenderComamnd` into the renderer specifying a particular render queue ID */
void addCommand(RenderCommand* command, int renderQueue);
/** Pushes a group into the render queue */
void pushGroup(int renderQueueID);
/** Pops a group from the render queue */
void popGroup();
/** returns whether or not a rectangle is visible or not */
bool checkVisibility(const Mat4& transform, const Size& size);
protected:
void processRenderCommand(RenderCommand* command);
void visitRenderQueue(RenderQueue& queue);
std::stack<int> _commandGroupStack;
std::vector<RenderQueue> _renderGroups;
MeshCommand* _lastBatchedMeshCommand;
std::vector<TrianglesCommand*> _batchedCommands;
std::vector<QuadCommand*> _batchQuadCommands;
GroupCommandManager* _groupCommandManager;
};Renderer类主要的部分如上，_commandGroupStack保留了一个RenderQueue的栈，开始一个GroupCommand时，会对应新建一个新的RenderQueue的Id入栈，默认情况下，addCommand会将RenderCommand添加到_commandGroupStack栈的最后一个元素所对应的RenderQueue中，这样就能将所有子元素的RenderCommand添加到单独一个RenderQueue中，当分组结束，GroupCommand从_commandGroupStack上移除自己，后续的RederCommand将继续加入之前的RederQueue中：
int GroupCommandManager::getGroupID()
{
//Reuse old id
for(auto it = _groupMapping.begin(); it != _groupMapping.end(); ++it)
{
if(!it->second)
{
_groupMapping[it->first] = true;
return it->first;
}
}
//Create new ID
// int newID = _groupMapping.size();
int newID = Director::getInstance()->getRenderer()->createRenderQueue();
_groupMapping[newID] = true;
return newID;
}这是GroupCommand获取groupID的方法，在GroupCommandManager的init()方法中，说明了GroupCommand所在的_commandGroupStack索引不能是0 ：
bool GroupCommandManager::init()
{
//0 is the default render group
_groupMapping[0] = true;
return true;
}而在Renderer::Renderer()中，说明了_commandGroupStack[0]表示默认的绘制队列：
_commandGroupStack.push(DEFAULT_RENDER_QUEUE); // DEFAULT_RENDER_QUEUE == 0
Renderer还有两个函数，当创建一个GroupCommand并将其作为一个普通的RenderCommand发送到当前的RenderQueue上，GroupCommand会在Renderer上创建新的RenderQueue，并调用pushGroup()方法将其renderQueueId添加到_commandGroupStack栈中，结束时，调用popGroup()：
void Renderer::pushGroup(int renderQueueID)
{
CCASSERT(!_isRendering, "Cannot change render queue while rendering");
_commandGroupStack.push(renderQueueID);
}
void Renderer::popGroup()
{
CCASSERT(!_isRendering, "Cannot change render queue while rendering");
_commandGroupStack.pop();
}个人的一些源码阅读理解，欢迎路过的各位大大指出错误~ 后续还会有更新~
【Cocos2d-x 3.x】 3.0版本的全新绘制系
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。