有什么方案能代替mask组件切割效果

Creator 2.x
#1

原因是这样的,我们要将图片放大,然后切割中间的部分,图片是网络图,没法让ui提前设计,所以之前都是用mask来切割,但是使用mask后,每一个item都增加了3个Drawcall ,这很恐怖,因为有的页面有几百个item,每个都增加3个Drawcall,都要超过1000个Drawcall 看下面逻辑图可能会更清晰点

snipaste_20200716_090649.png964×687 11.1 KB

2赞
#2

@panda

#3

@jare

#4

尝试下shader

#5

用 Shader 一样会打断渲染批处理。

可以尝试将所有需要切割的节点放到UI外层统一管理，不打断正常图像的批处理就好了。

#6

是 现在切割的节点就是在最外层,只是因为mask组件会导致增加3个Drawcall ,我的想法是既能实现切割,然后Drawcall 不会增多

#7

Shader不一定会打断合批渲染。
可以考虑这个方案：

  1. 所有网络图参与动态合图
  2. 每张图切割的位置自己计算顶点数据传给shader，可以参考我这个帖子
    【分享】自定义渲染合批之自定义顶点格式（附 Demo 和引擎源码解读）

这样可以保证不断合批。

#8

好的,我看看,谢谢

#9


:grin:参考一下，可能有帮助

1赞
#11

一个mask组件可以通过重写_updateGraphics方法，创建多个切割区域。

let mask = maskNode.getComponent(cc.Mask);
(mask as any)._updateGraphics = () => {
    let graphics = mask._graphics;
    graphics.clear(false);
    // 用graphics绘制多个遮罩区域
    ...
    graphics.fill();
};
mask._updateGraphics();
1赞
#12

现在主要是mask组件新增了2个Drawcall 想换另一种方式既有mask的效果,又不会新增Drawcall

#13

现在要解决的是mask带来的drawcall还是一大堆网络图片带来的drawcall呢。
如果只是解决mask带来的，那就是简单搞一下shader就可以了吧，然后把这些网络图片的渲染放到一起。

一大堆网络图片带来的drawcall这个就得用楼上自定义渲染合批了，感觉还挺麻烦。

#14

是解决mask带来的,网络图都是放在单个item里面没法合并

#15

嗯嗯，那其实就是一个shader就搞定了，根据uv算需要显示的部分。
最简单的例子，这样就只显示坐上角的部分了。

#16

你项目有100个item， 网络图不合并的话，最好情况下也会有100 draw call

#17

是的 目前一个item不止一个draw call,有7个draw call,如果去掉mask则一个item只有5个,也算是一种优化吧

#18

大神看不懂啊:joy:,这是c++写的么

#19

我的意思就是只用一个mask组件，创建所有Item需要的遮罩区域。我们游戏就是这样做的

#20

只用一个mask组件，创建所有Item需要的遮罩区域 好像我们的结构不能这么做,现在每一个item都是一个预制资源,每生成一个预制资源就会有一个mask

#21

你自己创建一个material和effect，然后打开effct文件就能看到了，我就加了个*0.5