Cocos2d-x3.2与OpenGL渲染总结(一)Cocos2d-x3.2的渲染流程

Cocos2d-x 前端之家
前端之家收集整理的这篇文章主要介绍了Cocos2d-x3.2与OpenGL渲染总结(一)Cocos2d-x3.2的渲染流程，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

最近几天，我都在学习如何在Cocos2d-x3.2中使用OpenGL来实现对图形的渲染。在网上也看到了很多好的文章，我在它们的基础上做了这次的我个人认为比较完整的总结。当你了解了Cocos2d-x3.2中对图形渲染的流程，你就会觉得要学会写自己的shader才是最重要的。

第一,渲染流程从2.x到3.x的变化。

在2.x中，渲染过程是通过递归渲染树(Rendering tree)这种图关系来渲染关系图。递归调用visit()函数，并且在visit()函数中调用该节点的draw函数渲染各个节点，此时draw函数的作用是直接调用OpenGL代码进行图形的渲染。由于visit()和draw函数都是虚函数，所以要注意执行时的多态。那么我们来看看2.x版本中CCSprite的draw函数，如代码1。

代码1：

[cpp] view plain copy
  1. //这是cocos2d-2.0-x-2.0.4版本的CCSprite的draw函数
  2. voidCCSprite::draw(void)
  3. {
  4. CC_PROFILER_START_CATEGORY(kCCProfilerCategorySprite,"CCSprite-draw");
  5. CCAssert(!m_pobBatchNode,"IfCCSpriteisbeingrenderedbyCCSpriteBatchNode,CCSprite#drawSHOULDNOTbecalled");
  6. CC_NODE_DRAW_SETUP();
  7. ccGLBlendFunc(m_sBlendFunc.src,m_sBlendFunc.dst);
  8. if(m_pobTexture!=NULL)
  9. ccGLBindTexture2D(m_pobTexture->getName());
  10. }
  11. else
  12. ccGLBindTexture2D(0);
  13. //
  14. //Attributes
  15. ccGLEnableVertexAttribs(kCCVertexAttribFlag_PosColorTex);
  16. #definekQuadSizesizeof(m_sQuad.bl)
  17. longoffset=(long)&m_sQuad;
  18. //vertex
  19. intdiff=offsetof(ccV3F_C4B_T2F,vertices);
  20. glVertexAttribPointer(kCCVertexAttrib_Position,3,GL_FLOAT,GL_FALSE,kQuadSize,(void*)(offset+diff));
  21. //texCoods
  22. diff=offsetof(ccV3F_C4B_T2F,texCoords);
  23. glVertexAttribPointer(kCCVertexAttrib_TexCoords,2,153); background-color:inherit; font-weight:bold">void*)(offset+diff));
  24. //color
  25. diff=offsetof(ccV3F_C4B_T2F,colors);
  26. glVertexAttribPointer(kCCVertexAttrib_Color,4,GL_UNSIGNED_BYTE,GL_TRUE,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> glDrawArrays(GL_TRIANGLE_STRIP,4);
  27. CHECK_GL_ERROR_DEBUG();
  28. #ifCC_SPRITE_DEBUG_DRAW==1
  29. //drawboundingBox
  30. CCPointvertices[4]={
  31. ccp(m_sQuad.tl.vertices.x,m_sQuad.tl.vertices.y),
  32. ccp(m_sQuad.bl.vertices.x,m_sQuad.bl.vertices.y),
  33. ccp(m_sQuad.br.vertices.x,m_sQuad.br.vertices.y),108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ccp(m_sQuad.tr.vertices.x,m_sQuad.tr.vertices.y),248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> };
  34. ccDrawPoly(vertices,true);
  35. #elifCC_SPRITE_DEBUG_DRAW==2
  36. //drawtextureBox
  37. CCSizes=this->getTextureRect().size;
  38. CCPointoffsetPix=this->getOffsetPosition();
  39. CCPointvertices[4]={
  40. ccp(offsetPix.x,offsetPix.y),ccp(offsetPix.x+s.width,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> ccp(offsetPix.x+s.width,offsetPix.y+s.height),ccp(offsetPix.x,offsetPix.y+s.height)
  41. };
  42. ccDrawPoly(vertices,153); background-color:inherit; font-weight:bold">true);
  43. #endif//CC_SPRITE_DEBUG_DRAW
  45. CC_INCREMENT_GL_DRAWS(1);
  46. CC_PROFILER_STOP_CATEGORY(kCCProfilerCategorySprite,"CCSprite-draw");
  47. }
那么我们也看看3.x中Sprite的draw函数，如代码2。

代码2：

    voidSprite::draw(Renderer*renderer,constMat4&transform,uint32_tflags)
  1. {
  2. //Don'tdocalculatethecullingifthetransformwasnotupdated
  3. _insideBounds=(flags&FLAGS_TRANSFORM_DIRTY)?renderer->checkVisibility(transform,_contentSize):_insideBounds;
  4. if(_insideBounds)
  5. _quadCommand.init(_globalZOrder,_texture->getName(),getGLProgramState(),_blendFunc,&_quad,1,transform);
  6. renderer->addCommand(&_quadCommand);
  7. #ifCC_SPRITE_DEBUG_DRAW
  8. _customDebugDrawCommand.init(_globalZOrder);
  9. _customDebugDrawCommand.func=CC_CALLBACK_0(Sprite::drawDebugData,153); background-color:inherit; font-weight:bold">this);
  10. renderer->addCommand(&_customDebugDrawCommand);
  11. }
  12. }

从代码1和代码2的对比中，我们很容易就发现2.x版本中的draw函数直接调用OpengGL代码进行图形渲染,而3.x版本中draw的作用是把RenderCommand添加到CommandQueue中，至于这样做的好处是，实际的渲染API进入其中一个与显卡直接交流的有独立线程的RenderQueue。

从Cocos2d-x3.0开始，Cocos2d-x引入了新的渲染流程，它不像2.x版本直接在每一个node中的draw函数中直接调用OpenGL代码进行图形渲染，而是通过各种RenderCommand封装起来，然后添加到一个CommandQueue队列里面去，而现在draw函数的作用就是在此函数中设置好相对应的RenderCommand参数，然后把此RenderCommand添加到CommandQueue中。最后在每一帧结束时调用renderer函数进行渲染，在renderer函数中会根据ID对RenderCommand进行排序，然后才进行渲染。

下面我们来看看图1、图2，这两个图形象地表现了Cocos2d-x3.x下RenderCommand的封装与传递与及RenderCommand的排序。

图1：



图2：


上面所说的各个方面都有点零碎，下面就对渲染的整个流程来一个从头到尾的梳理吧。下面是针对3.2版本的，对于2.x版本的梳理不做梳理，因为我用的是3.2版本。

首先,我们Cocos2d-x的执行是通过Application::run()来开始的,如代码3，此代码目录中在xx\cocos2d\cocos\platform\对应平台的目录下，这是与多平台实现有关的类，关于如何实现多平台的编译，你可以参考《cocos2d-x3.2源码分析(一）类FileUtils--实现把资源放在Resources文件目录下达到多平台的引用》中我对平台编译的分析。以防篇幅过长，只截取了重要部分，如需详解，可以直接查看源码。

代码3：

    intApplication::run()
  1. ...
  2. director->mainLoop();
  3. }
从代码3中，它明显的启发着我们要继续追寻Director::mainLoop()函数。在Director中mainLoop()为纯函数，此子类DisplayLinkDirector才有其实现，如代码4。

代码4：

    voidDisplayLinkDirector::mainLoop()
  1. <span><spanclass="comment">//只有一种情况会调用到这里来，就是导演类调用end函数</span><span></span></span>
  2. if(_purgeDirectorInNextLoop)
  3. _purgeDirectorInNextLoop=false;
  4. //清除导演类</span><span></span></span>
  5. purgeDirector();
  6. elseif(!_invalid)
  7. {<span><span//绘制</span><span></span></span>
  8. drawScene();
  9. //清除当前内存池中对象，即池中每一个对象--_referenceCount
  10. PoolManager::getInstance()->getCurrentPool()->clear();
  11. }
mainLoop是主线程调用的循环，其中drawScene()是绘制函数，接着我们继续追寻它的代码，如代码5。

代码5：

    voidDirector::drawScene()
  1. //计算间隔时间</span><span></span></span>
  2. calculateDeltaTime();
  4. //忽略该帧如果时间间隔接近0
  5. if(_deltaTime<FLT_EPSILON)
  6. return;
  7. if(_openGLView)
  8. _openGLView->pollInputEvents();
  9. //tickbeforeglClear:issue#533
  10. if(!_paused)
  11. _scheduler->update(_deltaTime);
  12. _eventDispatcher->dispatchEvent(_eventAfterUpdate);
  13. glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  14. /*toavoidflickr,nextSceneMUSTbehere:aftertickandbeforedraw.
  15. XXX:Whichbugisthisone.Itseemsthatitcan'tbereproducedwithv0.9*/
  16. if(_nextScene)
  17. setNextScene();
  18. pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  19. //drawthescene
  20. if(_runningScene)
  21. _runningScene->visit(_renderer,Mat4::IDENTITY,153); background-color:inherit; font-weight:bold">false);
  22. _eventDispatcher->dispatchEvent(_eventAfterVisit);
  23. //drawthenotificationsnode
  24. if(_notificationNode)
  25. _notificationNode->visit(_renderer,153); background-color:inherit; font-weight:bold">false);
  26. if(_displayStats)
  27. showStats();
  28. _renderer->render();
  29. _eventDispatcher->dispatchEvent(_eventAfterDraw);
  30. popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  31. _totalFrames++;
  32. //swapbuffers
  33. if(_openGLView)
  34. _openGLView->swapBuffers();
  35. calculateMPF();
  36. }
从代码5中，我们看见visit()和render()函数的调用。其中visit()函数会调用draw()函数来向RenderQueue中添加RenderCommand,那么就继续追寻visit()的代码，如代码6。

代码6：

    voidNode::visit(Renderer*renderer,153); background-color:inherit; font-weight:bold">constMat4&parentTransform,uint32_tparentFlags)
  1. //quickreturnifnotvisible.childrenwon'tbedrawn.
  2. if(!_visible)
  3. return;
  4. uint32_tflags=processParentFlags(parentTransform,parentFlags);
  5. //IMPORTANT:
  6. //Toeasethemigrationtov3.0,westillsupporttheMat4stack,
  7. //butitisdeprecatedandyourcodeshouldnotrelyonit
  8. Director*director=Director::getInstance();
  9. director->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  10. director->loadMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW,_modelViewTransform);
  11. inti=0;
  12. if(!_children.empty())
  13. sortAllChildren();
  14. //drawchildrenzOrder<0
  15. for(;i<_children.size();i++)
  16. autonode=_children.at(i);
  17. if(node&&node->_localZOrder<0)
  18. node->visit(renderer,_modelViewTransform,flags);
  19. break;
  20. //selfdraw
  21. this->draw(renderer,flags);
  22. for(autoit=_children.cbegin()+i;it!=_children.cend();++it)
  23. (*it)->visit(renderer,153); background-color:inherit; font-weight:bold">else
  24. director->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  25. //FIXME:Whyneedtoset_orderOfArrivalto0??
  26. //Pleaserefertohttps://github.com/cocos2d/cocos2d-x/pull/6920
  27. //resetfornextframe
  28. //_orderOfArrival=0;
  29. }
从代码6中，我们可以看到“ auto node = _children.at(i)；和node->visit(renderer,flags);”，这段代码的意思是先获取子节点，然后递归调用节点的visit()函数，到了没有子节点的节点，开始调用draw()函数。那么我们看看draw()函数代码，如代码7。

代码7：

    voidNode::draw(Renderer*renderer,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> }
好吧，从代码7中，我们看到Node的draw什么都没有做，是我们找错地方？原来draw()是虚函数，所以它执行时执行的是该字节类的draw()函数。确实是我们找错地方了。那么我们分别看DrawNode::draw()、Sprite::draw()。

代码8：

    voidDrawNode::draw(Renderer*renderer,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> _customCommand.init(_globalZOrder);
  1. _customCommand.func=CC_CALLBACK_0(DrawNode::onDraw,153); background-color:inherit; font-weight:bold">this,transform,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> renderer->addCommand(&_customCommand);
  2. //Don'tdocalculatethecullingifthetransformwasnotupdated
  3. _insideBounds=(flags&FLAGS_TRANSFORM_DIRTY)?renderer->checkVisibility(transform,_contentSize):_insideBounds;
  4. }
从代码8中，我们可以看到在draw()函数 向RenderQueue中添加RenderCommand,当然有的类的draw()不是向RenderQueue中添加RenderCommand，而是直接使用OpenGL的API直接进行渲染，或者做一些其他的事情。

那么当draw()都递归调用完了，我们来看看最后进行渲染的Renderer::render() 函数，如代码9。

代码9：

    voidRenderer::render()
  1. //Uncommentthisonceeverythingisrenderedbynewrenderer
  2. //glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);
  3. //TODOsetupcameraorMVP
  4. _isRendering=true;
  5. if(_glViewAssigned)
  6. //cleanup
  7. _drawnBatches=_drawnVertices=0;
  8. //Processrendercommands
  9. //1.SortrendercommandsbasedonID
  10. for(auto&renderqueue:_renderGroups)
  11. renderqueue.sort();
  12. visitRenderQueue(_renderGroups[0]);
  13. flush();
  14. clean();
  15. _isRendering= }
从代码9中，我们看到“renderqueue.sort()"，这是之前所说的对命令先排序，然后才进行渲染，“visitRenderQueue( _renderGroups[0])”就是来进行渲染的。那么我们接着看看void Renderer::visitRenderQueue(const RenderQueue& queue)的代码，如代码10。

代码10：

    voidRenderer::visitRenderQueue(constRenderQueue&queue)
  1. ssize_tsize=queue.size();
  2. for(ssize_tindex=0;index<size;++index)
  3. autocommand=queue[index];
  4. autocommandType=command->getType();
  5. if(RenderCommand::Type::QUAD_COMMAND==commandType)
  6. flush3D();
  7. autocmd=static_cast<QuadCommand*>(command);
  8. //Batchquads
  9. if(_numQuads+cmd->getQuadCount()>VBO_SIZE)
  10. CCASSERT(cmd->getQuadCount()>=0&&cmd->getQuadCount()<VBO_SIZE,"VBOisnotbigenoughforquaddata,pleasebreakthequaddatadownorusecustomizedrendercommand");
  11. //DrawbatchedquadsifVBOisfull
  12. drawBatchedQuads();
  13. _batchedQuadCommands.push_back(cmd);
  14. memcpy(_quads+_numQuads,cmd->getQuads(),153); background-color:inherit; font-weight:bold">sizeof(V3F_C4B_T2F_Quad)*cmd->getQuadCount());
  15. convertToWorldCoordinates(_quads+_numQuads,cmd->getQuadCount(),cmd->getModelView());
  16. _numQuads+=cmd->getQuadCount();
  17. if(RenderCommand::Type::GROUP_COMMAND==commandType)
  18. flush();
  19. intrenderQueueID=((GroupCommand*)command)->getRenderQueueID();
  20. visitRenderQueue(_renderGroups[renderQueueID]);
  21. if(RenderCommand::Type::CUSTOM_COMMAND==commandType)
  22. autocmd=static_cast<CustomCommand*>(command);
  23. cmd->execute();
  24. if(RenderCommand::Type::BATCH_COMMAND==commandType)
  25. static_cast<BatchCommand*>(command);
  26. if(RenderCommand::Type::MESH_COMMAND==commandType)
  27. flush2D();
  28. static_cast<MeshCommand*>(command);
  29. if(_lastBatchedMeshCommand==nullptr||_lastBatchedMeshCommand->getMaterialID()!=cmd->getMaterialID())
  30. flush3D();
  31. cmd->preBatchDraw();
  32. cmd->batchDraw();
  33. _lastBatchedMeshCommand=cmd;
  34. cmd->batchDraw();
  35. CCLOGERROR("UnknowncommandsinrenderQueue");
  36. }
从代码10中，我们看到RenderCommand类型有QUAD_COMMAND,CUSTOM_COMMAND,BATCH_COMMAND,

GROUP_COMMAND,MESH_COMMAND五种，这些类型的讲解在下一节。

从代码10中，好像没有与OpenGL相关的代码，有点囧。其实这OpenGL的API调用是在Renderer::drawBatched

Quads()、BatchCommand::execute()中。在代码10中，我们也看到在QUAD_COMMAND类型中调用了drawBatchedQuads()，如代码11。在CUSTOM_COMMAND中调用了CustomCommand::execute()，如代码12。在BATCH_COMMAND中调用了BatchCommand::execute()，如代码13。在MESH_COMMAND类型中调用了MeshCommand::preBatchDraw()和MeshCommand::batchDraw()。至于GROUP_COMMAND类型，就递归它组里的成员。

代码11：

    voidRenderer::drawBatchedQuads()
  1. //TODOwecanimprovethedrawperformancebyinsertmaterialswitchingcommandbeforehand.
  2. intquadsToDraw=0;
  3. intstartQuad=0;
  4. //UploadbuffertoVBO
  5. if(_numQuads<=0||_batchedQuadCommands.empty())
  6. if(Configuration::getInstance()->supportsShareableVAO())
  7. //SetVBOdata
  8. glBindBuffer(GL_ARRAY_BUFFER,_buffersVBO[0]);
  9. //option1:subdata
  10. //glBufferSubData(GL_ARRAY_BUFFER,sizeof(_quads[0])*start,sizeof(_quads[0])*n,&_quads[start]);
  11. //option2:data
  12. //glBufferData(GL_ARRAY_BUFFER,sizeof(quads_[0])*(n-start),&quads_[start],GL_DYNAMIC_DRAW);
  13. //option3:orphaning+glMapBuffer
  14. glBufferData(GL_ARRAY_BUFFER,153); background-color:inherit; font-weight:bold">sizeof(_quads[0])*(_numQuads),nullptr,GL_DYNAMIC_DRAW);
  15. void*buf=glMapBuffer(GL_ARRAY_BUFFER,GL_WRITE_ONLY);
  16. memcpy(buf,_quads,153); background-color:inherit; font-weight:bold">sizeof(_quads[0])*(_numQuads));
  17. glUnmapBuffer(GL_ARRAY_BUFFER);
  18. //BindVAO
  19. GL::bindVAO(_quadVAO);
  20. #definekQuadSizesizeof(_quads[0].bl)
  21. glBufferData(GL_ARRAY_BUFFER,153); background-color:inherit; font-weight:bold">sizeof(_quads[0])*_numQuads,GL_DYNAMIC_DRAW);
  22. GL::enableVertexAttribs(GL::VERTEX_ATTRIB_FLAG_POS_COLOR_TEX);
  23. //vertices
  24. glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_POSITION,(GLvoid*)offsetof(V3F_C4B_T2F,vertices));
  25. //colors
  26. glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_COLOR,colors));
  27. //texcoords
  28. glVertexAttribPointer(GLProgram::VERTEX_ATTRIB_TEX_COORD,texCoords));
  29. glBindBuffer(GL_ELEMENT_ARRAY_BUFFER,_buffersVBO[1]);
  30. //Startdrawingvertiesinbatch
  31. for(constauto&cmd:_batchedQuadCommands)
  32. autonewMaterialID=cmd->getMaterialID();
  33. if(_lastMaterialID!=newMaterialID||newMaterialID==QuadCommand::MATERIAL_ID_DO_NOT_BATCH)
  34. //Drawquads
  35. if(quadsToDraw>0)
  36. glDrawElements(GL_TRIANGLES,(GLsizei)quadsToDraw*6,GL_UNSIGNED_SHORT,(GLvoid*)(startQuad*6*sizeof(_indices[0])));
  37. _drawnBatches++;
  38. _drawnVertices+=quadsToDraw*6;
  39. startQuad+=quadsToDraw;
  40. quadsToDraw=0;
  41. //Usenewmaterial
  42. cmd->useMaterial();
  43. _lastMaterialID=newMaterialID;
  44. quadsToDraw+=cmd->getQuadCount();
  45. //Drawanyremainingquad
  46. if(quadsToDraw>0)
  47. glDrawElements(GL_TRIANGLES,153); background-color:inherit; font-weight:bold">sizeof(_indices[0])));
  48. _drawnBatches++;
  49. _drawnVertices+=quadsToDraw*6;
  50. //UnbindVAO
  51. GL::bindVAO(0);
  52. _batchedQuadCommands.clear();
  53. _numQuads=0;

代码12：

    voidCustomCommand::execute()
  1. if(func)
  2. func();
  3. }

代码13：

    voidBatchCommand::execute()
  1. //Setmaterial
  2. _shader->use();
  3. _shader->setUniformsForBuiltins(_mv);
  4. GL::bindTexture2D(_textureID);
  5. GL::blendFunc(_blendType.src,_blendType.dst);
  6. //Draw
  7. _textureAtlas->drawQuads();
  8. }

从代码11、代码12、代码13中，我们都看到了这些函数中对OpenGl的API调用来进行渲染。其中特别提醒一下，在CustomCommand::execute()中直接调用的函数是我们设置的回调函数。在这个函数中，我们可以自己使用OpenGL的API进行图形的渲染。这就在第三节中讲如何在Cocos2d-x中自己设置渲染功能中向_customCommand添加的函数。在这里我先给出简便的方式，_customCommand.func = CC_CALLBACK_0(HelloWorld::onDraw,this)。

以上就是把一个完整的渲染的流程都梳理了一片，下面我给出了流程图，如图3。

图3：




第二，RenderCommand的类型。

这里的类型讲解主要参考这篇文章中关于RenderComman的类型讲解。

QUAD_COMMAND：QuadCommand类绘制精灵等。
所有绘制图片的命令都会调用到这里，处理这个类型命令的代码就是绘制贴图的openGL代码，下一篇文章会详细介绍这部分代码。
CUSTOM_COMMAND：CustomCommand类自定义绘制，自己定义绘制函数，在调用绘制时只需调用已经传进来的回调函数就可以，裁剪节点，绘制图形节点都采用这个绘制，把绘制函数定义在自己的类里。这种类型的绘制命令不会在处理命令的时候调用任何一句openGL代码，而是调用你写好并设置给func的绘制函数，后续文章会介绍引擎中的所有自定义绘制，并自己实现一个自定义的绘制。
BATCH_COMMAND：BatchCommand类批处理绘制，批处理精灵和粒子
其实它类似于自定义绘制，也不会再render函数中出现任何一句openGL函数，它调用一个固定的函数，这个函数会在下一篇文章中介绍。
GROUP_COMMAND：GroupCommand类绘制组，一个节点包括两个以上绘制命令的时候，把这个绘制命令存储到另外一个_renderGroups中的元素中，并把这个元素的指针作为一个节点存储到_renderGroups[0]中。


第三，如何在Cocos2d-x中自己设置渲染功能。

1.第一种方法针对的是整个图层的渲染。

重写visit()函数，并且在visit()函数中直接向CommandQueue添加CustomCommand，设置好回调函数，这个比较直接，如代码14，代码14是子龙山人《基于Cocos2d-x学习OpenGL ES 2.0》第一篇中的部分代码。或者重写draw()函数，并且在draw()函数中向CommandQueue添加CustomCommand，设置好回调函数，这个就比较按照正规的流程走。

代码14：

    voidHelloWorld::visit(cocos2d::Renderer*renderer,booltransformUpdated)
  1. Layer::draw(renderer,transformUpdated);
  2. //sendcustomcommandtotelltherenderertocallopenglcommands
  3. _customCommand.init(_globalZOrder);
  4. _customCommand.func=CC_CALLBACK_0(HelloWorld::onDraw,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> renderer->addCommand(&_customCommand);
  5. voidHelloWorld::onDraw()
  6. //question1:whythetrianglegoestotheupside
  7. //如果使用对等矩阵，则三角形绘制会在最前面
  8. Director::getInstance()->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  9. Director::getInstance()->loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  10. Director::getInstance()->pushMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
  11. Director::getInstance()->loadIdentityMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
  12. autoglProgram=getGLProgram();
  13. glProgram->use();
  14. //setuniformvalues,theorderofthelineisveryimportant
  15. glProgram->setUniformsForBuiltins();
  16. autosize=Director::getInstance()->getWinSize();
  17. //usevao
  18. glBindVertexArray(vao);
  19. GLuintuColorLocation=glGetUniformLocation(glProgram->getProgram(),"u_color");
  20. floatuColor[]={1.0,1.0,1.0};
  21. glUniform4fv(uColorLocation,uColor);
  22. //glDrawArrays(GL_TRIANGLES,6);
  23. glBindVertexArray(0);
  24. CC_INCREMENT_GL_DRAWN_BATCHES_AND_VERTICES(1,6);
  25. Director::getInstance()->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_PROJECTION);
  26. Director::getInstance()->popMatrix(MATRIX_STACK_TYPE::MATRIX_STACK_MODELVIEW);
  27. }

从代码14中，我们看到重写visit()函数，在visit()函数中直接向RenderQueue添加RenderCommand,即“renderer->addCommand(&_customCommand);”，由于此RenderCommand类型为CustomCommand,所以要添加处理图形渲染的回调函数，即“_customCommand.func = CC_CALLBACK_0(HelloWorld::onDraw,this);”，这行代码就是添加回调函数的，onDraw()函数中调用OpengGL的API渲染图形。关于func是如何被调用，可以参考上面的代码12上下文的分析。

2.第二种方法针对个别精灵。

有时候，我们只要对个别精灵进行特效的处理，这个精灵需要使用我们自己编写的Shader，而图层其他的元素按默认处理就行了。这时候就需要第二种方法了。设置好Shader,向精灵添加Shader，最后在重写draw函数，在draw函数中进行特效的处理，如代码15，代码15是《捕鱼达人3》教程第二节的代码。

代码15：

    boolFishLayer::init()
  1. ...省略了不相关的代码。
  2. //将vsh与fsh装配成一个完整的Shader文件。
  3. autoglprogram=GLProgram::createWithFilenames("UVAnimation.vsh","UVAnimation.fsh");
  4. //由Shader文件创建这个Shader
  5. autoglprogramstate=GLProgramState::getOrCreateWithGLProgram(glprogram);
  6. //给精灵设置所用的Shader
  7. m_Sprite->setGLProgramState(glprogramstate);
  8. //创建海龟所用的贴图。
  9. autotextrue1=Director::getInstance()->getTextureCache()->addImage("tortoise.png");
  10. //将贴图设置给Shader中的变量值u_texture1
  11. glprogramstate->setUniformTexture("u_texture1",textrue1);
  12. //创建波光贴图。
  13. autotextrue2=Director::getInstance()->getTextureCache()->addImage("caustics.png");
  14. //将贴图设置给Shader中的变量值u_lightTexture
  15. glprogramstate->setUniformTexture("u_lightTexture",textrue2);
  16. //注意，对于波光贴图，我们希望它在进行UV动画时能产生四方连续效果，必须设置它的纹理UV寻址方式为GL_REPEAT。
  17. Texture2D::TexParamstRepeatParams;
  18. tRepeatParams.magFilter=GL_LINEAR_MIPMAP_LINEAR;
  19. tRepeatParams.minFilter=GL_LINEAR;
  20. tRepeatParams.wrapS=GL_REPEAT;
  21. tRepeatParams.wrapT=GL_REPEAT;
  22. textrue2->setTexParameters(tRepeatParams);
  23. //在这里，我们设置一个波光的颜色，这里设置为白色。
  24. Vec4tLightColor(1.0,1.0);
  25. glprogramstate->setUniformVec4("v_LightColor",tLightColor);
  26. //下面这一段，是为了将我们自定义的Shader与我们的模型顶点组织方式进行匹配。模型的顶点数据一般包括位置，法线，色彩，纹理，以及骨骼绑定信息。而Shader需要将内部相应的顶点属性通道与模型相应的顶点属性数据进行绑定才能正确显示出顶点。
  27. longoffset=0;
  28. autoattributeCount=m_Sprite->getMesh()->getMeshVertexAttribCount();
  29. for(autok=0;k<attributeCount;k++){
  30. automeshattribute=m_Sprite->getMesh()->getMeshVertexAttribute(k);
  31. glprogramstate->setVertexAttribPointer(s_attributeNames[meshattribute.vertexAttrib],248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> meshattribute.size,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> meshattribute.type,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> GL_FALSE,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> m_Sprite->getMesh()->getVertexSizeInBytes(),248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> (GLvoid*)offset);
  32. offset+=meshattribute.attribSizeBytes;
  33. //uv滚动初始值设为0
  34. m_LightAni.x=m_LightAni.y=0;
  35. returntrue;
  36. voidFishLayer::draw(Renderer*renderer,153); background-color:inherit; font-weight:bold">if(m_Sprite)
  37. //乌龟从右向左移动，移出屏幕后就回到最右边
  38. autos=Director::getInstance()->getWinSize();
  39. m_Sprite->setPositionX(m_Sprite->getPositionX()-1);
  40. if(m_Sprite->getPositionX()<-100)
  41. m_Sprite->setPositionX(s.width+10);
  42. autoglprogramstate=m_Sprite->getGLProgramState();
  43. if(glprogramstate)
  44. m_LightAni.x+=0.01;
  45. if(m_LightAni.x>1.0)
  46. m_LightAni.x-=1.0;
  47. m_LightAni.y+=0.01;
  48. if(m_LightAni.y>1.0)
  49. m_LightAni.y-=1.0;
  50. glprogramstate->setUniformVec2("v_animLight",m_LightAni);
  51. Node::draw(renderer,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> }
从代码15中，我们可以看到先使用OpengGL的API创建自己的Shader ,然后再把m_sprite的Shader设置为自己的Shader即“m_Sprite->setGLProgramState(glprogramstate);”，这是给精灵设置所用的Shader，这就是针对个别的精灵，而不是整个图层。接着在draw()中，如果精灵已生成，每次调用draw()函数都改变Shader中参数，以达到特别的效果。
以上都是我通过阅读别人的代码总结的方法，不知道还有没有其他的在Cocos2d-x中自己设置渲染功能的方法，如果有的话，请告诉我，直接在我的博客留言就可以了。

参考资料：

1.http://cn.cocos2d-x.org/article/index?type=wiki&url=/doc/cocos-docs-master/manual/framework/native /wiki/renderer/zh.md

2.http://cocos2d-x.org/wiki/Cocos2d_v30_renderer_pipeline_roadmap

3.http://cn.cocos2d-x.org/tutorial/show?id=1336

4.http://blog.csdn.net/bill_man/article/details/35839499

5.《Cocos2d-x高级开发教程》2.1.4节

6.Cocos2d-x3.2和Cocos2d-x2.0.4源码

如需转载，请标明出处：http://www.jb51.cc/article/p-svmuttyv-sw.html

猜你在找的Cocos2d-x相关文章

创建自定义的Cocos2d-x场景
操作步骤 1、创建cocos2d-x工程 2、新建 Scene1.cpp Scene1.h Scene1.h代码 #ifndef __SCE...
给vs2010安装上cocos2d-x的模版
开发环境：OS(WINDOWS 8.1 X64 企业版) cocos2d-x 2.2.1 vs2010 想给vs安装上cocos的模版，...
Python创建Cocos2d-x 2.2方法
把创建项目做成一个批处理，当创建项目时可以省时省力很多。 操作步骤 1、在 E:cocos2d-x-...
cocos2dx 物理碰撞
https://www.cnblogs.com/JiaoQing/p/3906780.html 四个响应函数 1 EventListenerPhysics...
cocos2d-js 自定义事件监听派发
转载于 http://www.cnblogs.com/kenkofox/p/3926797.html 熟悉js的dom事件或者flash事件的...
cocos常用 实用 公共函数 lua代码
公共资源加载，缓存retain；防止被自动销毁 2. 数字滚动递增；用于得奖后，总金币跳动增加...
cocos creator box2d
title Map 使用box2d var sfloors = this.tiledMap.getObjectGroup(‘Special_Floor‘).g...
（转）让quick-cocos2d-x支持加密的plist文件
前篇：quick-cocos2d-x图片资源加密 在前篇里面，我们实现了图片资源的加密，但还没有实现...
（转）quick-cocos2d-x图片资源加密(续)
摘要: 对在quick-cocos2d-x上实现的资源加密方法的补充 前篇： quick-cocos2d-x图片资源加...
Cocos Creator 动态改变sprite图片
首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url...
iOSAndroidSwiftHybridCocos2d-xFlutterXcodeSilverlightcocoaCordova
调试桥筛选栏假异步不会丢失AndPermissio权限申请抽屉式systemUI信号栏多行排列跨多行显示viewmode数据共享录制语音视频通话多行显示Studio3.5拉伸控件望远镜发动态走势图点赞控件显示牌冷启动v3签名v2签名v1签名本地html外接键盘流式标签