【转载】openGL基础知识及cocos2d-x渲染流程

一、概述

很早就接触了openGL和cocos2d-x源码的渲染部分，一直没有总结成文档；现在以图文方式总结一下，算作对自己的一个产出，也方便以后的查看。

二、openGL基础知识

1、渲染管线

openGL的渲染管线分为这几个阶段：顶点着色、图元装配、几何着色、光栅化、片段着色、测试与混合；其中，顶点着色、几何着色和片段着色为可编程阶段。各个阶段的功能如下：

（1）顶点着色：坐标转换，将用户输入的模型坐标转换成剪裁空间下的坐标（最后进行视口变换，转换成屏幕坐标）

（2）图元装配：调用绘制指令时，有指定图元类型；这个阶段就是，将顶点以图元为单位进行打包、分组

（3）几何着色：在这个阶段，可以增加、减少顶点，用来产生更多的形状，让图形看起来更加的平滑

（4）光栅化：将图元映射成屏幕片段

（5）片段着色：计算片段在屏幕上的颜色

（6）测试与混合：与深度缓冲区比较，进行颜色的剔除与混合

2、CPU端的工作（以绘制一个四边形为例）

（1）顶点数据的定义

定义了三个顶点属性：顶点坐标、顶点颜色、纹理坐标；定义了6个顶点索引，用来绘制两个三角形

（2）向GPU上传数据、调用绘制指令

CPU端的工作大致为：创建数据对象，指定顶点输入，调用绘制指令

3、GPU端的工作（以绘制一个四边形为例）

这两段代码会被编译成可执行程序，在GPU中，作为顶点着色器和片段着色器运行

三、cocos2d-x渲染流程

（1）cocos2d-x的渲染分为两步：遍历场景（向渲染队列添加渲染命令）、处理渲染命令（方便合并渲染）

（2）导演类的drawScene方法

导演类的drawScene方法，主要做了几件事情：执行update逻辑、处理场景切换、遍历场景树、处理渲染命令

（3）GLView的renderScene方法

GLView的renderScene方法最终会调用Node的visit方法

（4）Node的visit方法

Node的visit方法用来遍历节点树，首先对孩子节点排序（根据localZOrder由小到大），遍历localZOrder小于0的，然后遍历自己，再遍历localZOrder大于0的

（5）draw方法

Sprite的绘制由TrianglesCommand完成，在onDraw方法里，向渲染队列添加TrianglesCommand命令

（6）onDraw方法

在DrawNode的onDrawGLLine方法里，调用openGL命令完成线段的绘制

（7）Renderer的addCommand方法

Renderer的addCommand方法，向当前的渲染队列添加渲染命令，会对命令进行分组（根据globalZOrder、3D透明、3D不透明）

（8）Renderer的render方法

Renderer的render方法，先对所有渲染命令的队列进行排序，然后处理第一个队列里的命令。单个队列命令，处理顺序为：globalZOrder<0、3D不透明、3D透明，globalZOrder=0、globalZOrder>0

（9）Node的localZOrder、localZOrderAndArrival、globalZOrder
, , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , ,
　　a、localZOrder、localZOrderAndArrival：用于子节点的排序

b、globalZOrder：用于渲染队列中分组命令的排序，如果想要批量渲染不被打断，就需要设置相同的globalZOrder（globalZOrder默认值都是0）

四、总结

基本是源码里的思路