粉刷匠原则

我是一个粉刷匠，粉刷本领强。领会了这句话，就掌握了UGUI的独孤九剑。

实际上UGUI的原理遵循刷粉刷匠原则，怎么理解这句话呢？

宏观上理解

想象一下，手上有个粉刷，先把墙面刷成灰色的。然后将窗户刷成粉色的，最后将楼梯刷成棕色的，这样一层一层的粉刷，就是UI层，GPU渲染。

微观上理解

屏幕上有无数的像素，一层一层的渲染，第一层像素布满后，然后布满第二层，第三层。顶层的不透明像素会覆盖下层的像素，透明或半透明的像素会和下层的像素进行混合，最终呈目前我们手机或者电视上炫酷的图案。

有没有小伙伴突然想到了蛋糕？嗯，就是这种感觉，多层次的我最爱吃。呵呵，扯远了，实则就像从顶到底看着蛋糕的样子。

渲染的层级又是如何呢？

UGUI是以Canvas为单位进行渲染的。也就是一层层的画布，然后根据画布的layer进行排序，每一层画布内又遵循粉刷匠原则。

怎么去理解呢？

想象一下，手里有个画板，然后在上面开始自己的绘画创作。起稿，找出结构线，铺大调子，深入刻画，最后加强整体感，完成了一幅秀丽的画作。但是此时感觉略显单调，自己随手拿起了第二幅，第三幅画…，创作完成后，把画纸叠放在一起，wow，是一幅机械战甲

钢铁侠一代

实则说了这么多，无数张纸合在一起，就是UI渲染

单张纸上又是如何渲染的呢？

不就是图片和文字交替渲染，如果有三张图有重叠，那么就会渲染三次，实际真的是这样吗？

这里就不得不提到一个概念，图集。

什么是图集呢？

图集就是将许多许多的jpg，png图片，合并到一张jpg，或者png图片中，简单说就是多张图的一个集合。

假设单张纸上的所有图片都来自一个图片集合的话，那么GPU在一个批次内就能绘制界面上所有的图片，为什么会这样？

兄弟们，稳住，待我慢慢道来。

这里就要从GPU的一次drawcall说起，what？你这是要说GPU渲染，shader之类的东西吗？

是时候展现一波真正的技术了，大家不要怕，不会去大谈渲染层的东西，仅仅只是为了说明UGUI渲染的原理而已，至于GPU层的东西，后面可能会出专题和大家讨论下。

何为一次drawcall？

GPU：嘿，CPU，把我这次渲染要的东西准备好。

CPU：老哥，你需要什么东西？

GPU：你的骨架（顶点和三角面信息），和你身上的衣服都给我 (使用的shader, 材质，切图，摄像机的参数，光照等)

CPU：把脸转过去，都丢给你了。

GPU：害羞啥，我每天处理千千万万个你，都麻木了，没啥好看的。

CPU：膜拜了，老司机…

那么在Canvas下面，需要给GPU就是图片，材质，以及顶点三角面信息等，我们会发现，打了图集之后，传递给GPU的图片只有一张，那么所有的顶点都是同班同学了。

这个时候大家就清楚了，GPU在渲染的时候，并非完全等同于粉刷匠原则，而是将在一个图集内的UI元素第一刷出来，然后如法炮制，刷其他的东西

背靠背，吓死你

如果一张纸上的UI图集有多个，相互交织在一起，GPU就懵逼了。道哥（CPU），你今天挺别致的，里三层，外三层的。G哥，我今天穿太多了，等等我衣服慢慢脱。糟糕，怎么外面的扣子扣里面去了，里面的衣领跑外面来了，袜子也穿反了。G哥问：咋啦道哥，被人给煮了？道哥挣扎道：没事，一会就好。结果半个小时过去了…

实则不同图集的UI元素相互重叠的话，就会打断UGUI的合批机制，就像人群中两个拉着手的伴侣，被人群冲散了。对，就是这意思。

总结：

UI元素遵循特殊的粉刷匠原则，把类似的东西先一起绘制（同一图集），然后如法炮制，绘制其他的图层，从底到顶一层一层地刷，这就是UGUI渲染的原理，看到这里，大家手里是否有自己的小刷子呢？

如果还有不懂的，可以在下方评论区留言，或者可以私信我，喜爱我的也可以关注我，期待你的加入，和我一起努力，进步。