项目中要加载很多用户网络图片。每一个图片的结构是这样的。
bigContainer
- avatarImage-1
- avatarImage-2
然后 avatarImage 要实现圆角效果,borderImage 是边框。
最初想的很简单,就使用自带的 mask 组件。 但是自测的时候发现自带的mask 会导致 drawcall 变得很大。于是放弃使用mask组件。
后来想着要不学学shader做一个简单的mask组件。做完了之后发现,在编辑器下是能够成功实现圆角效果的。那么项目跑起来。
1.问题来了,项目跑起来之后发现渲染的奇奇怪怪的,后来去社区看了看发现是自动和合图导致的uv变化,没办法最简单的办法就是当网络图片加载成功之后,给 spriteFrame 的 packable 设置为false。这样做完项目运行起来是正常的,但是drawcall也会增加, 每张图片增加一个dc。 这样做虽然比mask组件要好不少,但是我还是想要进一步减少dc。
2.无奈, 这样的话就只能还是打开动态合图功能, 不然就不可能减少dc。那该怎么办呢, 继续逛社区。发现有一个大佬@渡鸦说可以传入 uv ,然后经过转换能够得到原始的uv。我很兴奋,于是 cv 了一下大佬的代码。本质是定义一个 uniform 然后每张图片传入自己在大图中的顶点 uv 位置给 shader。ok, 项目运行起来,效果正常。 但是 drawcall 还是没有减少。 我对 drawcall 不是很熟悉, 猜测是每一个图片传入自己的顶点 uv 给shader 导致打断了合批功能。
以上的是最近几天的经历, 如果有什么位置说的不对的欢迎大佬指正。
然后我想问问,就是有没有什么办法,能够做到将方形图片变成圆形的,同时不会让dc增加的方案。