原因是这样的,我们要将图片放大,然后切割中间的部分,图片是网络图,没法让ui提前设计,所以之前都是用mask来切割,但是使用mask后,每一个item都增加了3个Drawcall ,这很恐怖,因为有的页面有几百个item,每个都增加3个Drawcall,都要超过1000个Drawcall 看下面逻辑图可能会更清晰点
尝试下shader
用 Shader 一样会打断渲染批处理。
可以尝试将所有需要切割的节点放到UI外层统一管理,不打断正常图像的批处理就好了。
是 现在切割的节点就是在最外层,只是因为mask组件会导致增加3个Drawcall ,我的想法是既能实现切割,然后Drawcall 不会增多
Shader不一定会打断合批渲染。
可以考虑这个方案:
- 所有网络图参与动态合图
- 每张图切割的位置自己计算顶点数据传给shader,可以参考我这个帖子
【分享】自定义渲染合批之自定义顶点格式(附 Demo 和引擎源码解读)
这样可以保证不断合批。
好的,我看看,谢谢
参考一下,可能有帮助
一个mask组件可以通过重写_updateGraphics方法,创建多个切割区域。
let mask = maskNode.getComponent(cc.Mask);
(mask as any)._updateGraphics = () => {
let graphics = mask._graphics;
graphics.clear(false);
// 用graphics绘制多个遮罩区域
...
graphics.fill();
};
mask._updateGraphics();
现在主要是mask组件新增了2个Drawcall 想换另一种方式既有mask的效果,又不会新增Drawcall
现在要解决的是mask带来的drawcall还是一大堆网络图片带来的drawcall呢。
如果只是解决mask带来的,那就是简单搞一下shader就可以了吧,然后把这些网络图片的渲染放到一起。
一大堆网络图片带来的drawcall这个就得用楼上自定义渲染合批了,感觉还挺麻烦。
是解决mask带来的,网络图都是放在单个item里面没法合并
嗯嗯,那其实就是一个shader就搞定了,根据uv算需要显示的部分。
最简单的例子,这样就只显示坐上角的部分了。
你项目有100个item, 网络图不合并的话,最好情况下也会有100 draw call
是的 目前一个item不止一个draw call,有7个draw call,如果去掉mask则一个item只有5个,也算是一种优化吧
大神看不懂啊,这是c++写的么
我的意思就是只用一个mask组件,创建所有Item需要的遮罩区域。我们游戏就是这样做的
只用一个mask组件,创建所有Item需要的遮罩区域 好像我们的结构不能这么做,现在每一个item都是一个预制资源,每生成一个预制资源就会有一个mask
你自己创建一个material和effect,然后打开effct文件就能看到了,我就加了个*0.5