前言

最近被人问到同一batch中ugui的前后顺序是怎么表现出来的，之前我只考虑过一帧是怎么前后顺序的渲染，所以这次我讲说一下一个batch中的图片渲染顺序

知识点

1. 使用xcode的FPS截帧
2. 渲染的点的坐标
3. 渲染三角形的顺序
4. 渲染三角形的uv顺序

正文

渲染图片的本质

在一般情况下，我们常说的渲染一张图片其实是记录下一张图片的四个顶点位置，通过mvp变换，从模型空间转换到屏幕空间，然后渲染到显示设备上。在渲染的时候，我们需要定义三角形的顺序，根据对应渲染设备所使用的坐标系，我们通过左手或者右手定则，来确定渲染的朝向。定义的uv坐标来确定这三个点所需要渲染的颜色在uv图上的什么位置。通过上面的概念我们就应该能知道渲染一个图所需要简单的数据结构了。

我们只考虑最上面的那张图我们来简单定义一下数据结构

vector3[]index   --点坐标
int[2*3] vertex     --三角形的渲染顺序
int[2*3] UV             --uv坐标id

通过上面的结构体，我们就能正常的渲染出一张图片出来的。

ugui合批本质

我这里所说的合批是ugui的动态合批。一般来说，你可以认为它就是问了把多个mesh合并成一个mesh传到gpu去渲染，那什么是mesh呢？其实就是我们上面所说的那个结构体。既然知道了它是什么，我们就好来理解mesh的合并了。首先在ugui我们会对渲染的物体进行一次排序（这个内容我已经拖更很久了，大家可以去看官方的一节课）然后通过这个排序结果，我们就可以开始记录合并的mesh内容了。如果是同一个材质，同一个贴图，并且是相邻的，那就记录一次合并，如果不可以，那就把上一次合并的结果callback到gpu做一次渲染，剩下的再进行合并记录。

同一批次的遮挡顺序

通过上面我们就可以知道，同一个批次里面，如果图片前后有遮挡关系；首先我们通过排序，记录下所有点的位置信息，然后通过顺序我们记录下来三角形的渲染顺序

在这张图片，我们就能看出来，其实在这个批次的渲染里，我们是记录下来所有点，和所有三角形的信息给gpu去渲染的，在这次合批中我们是不会进行三角形的剔除操作。就算是所有做了一次完全的遮挡，其实我们上传的数据也是做了一次全量的记录的。所以同一batch的遮挡就是在合批时候的排序顺序的关系。

总结

渲染的本质是通过三角形的排布来做纹理的展示，所有的优化方式都是围绕这三角形怎么减少呀，三角形的颜色该怎么计算出来，这样的方式来做优化的。了解本质，你才能更轻松的理解方案。