重叠物体描边。只绘制外轮廓,要怎么做比较好?

快用3.8 :smiley:

https://docs.cocos.com/creator/manual/zh/render-pipeline/post-process/

1赞

只能这样了吗?:joy:

还可以使用sdf

sdf?哦,学习一下,刚开始学习shader相关技术。

使用sdf没有解决重叠处理的问题吧?还是需要多个相机或者后效才能做出重叠的效果。

这个问题的本质就是怎么先把两张图和到一张图上。然后描边用sdf或者铁帖主的透明度判定都行。
unity中我用过Graphic.Blit接口,可以将纹理渲染到目标rendertexture中,还可以带上一个材质,通过shader随意处理。
ccc里一直找不到可以平替的接口,要做图像渲染操作只能用相机,就非常难受。
前端时间使劲看了一会源码,然后参考了https://forum.cocos.org/t/topic/100358 这里解析的有关ccc gfx的内容。
大致想到了一些思路:要做出手动的单次渲染操作,需要手动去创建渲染相关的一些指令,添加到gfx里的指令buffer中,然后通过它实现单次渲染。
但是目前还没有尝试过。
关键的代码我觉得是在这里:
image
ui-phase.ts里,这里是对平面ui的渲染。
如果去掉了相机,直接手动按照循环体内部的内容创建cmdbuff,并且设定好相应的参数,应该就能实现手动的一次渲染。

还有一个思路:如果纯粹是h5平台,或许可以考虑直接用webgl接口

https://forum.cocos.org/t/topic/133228

大佬,这不是用不用sdf的问题。这位小哥一共的是两个具有不规则形状的图片,然后通过边缘部分半透明这一特点,做了描边处理。
当然,也可以像你的这里一样,通过两个sdf计算min来做出合并效果
image
但我觉得这不是问题的关键,我给shader设定两个参数,代表两张图的中心点,也可以通过采样两次,两个值的透明度来判定是不是合并后的图片的边缘。
这种方式等于是在一个shader里同时显示多张图,要么传递多个texture,要么如果用的是同一个纹理的话,设定多个参数,然后后对纹理采样。都是在一定限制内的合并效果实现。

我举个实际的例子,模拟液体。一般用很多的圆,渲染成sdf一起到同一个rt上,然后用smoothmin来做平滑合并。
最终还要有渲染到同一个rt上这一步,而这一步,目前ccc里必须得另外创建一个相机出来。

为什么要用rt?shader只需要一个节点就行了

没啥问题,越多越省,挺好的

1我说的是帖主的这个需求,跟sdf无关,他已经通过透明度判定实现了,使用shader,也可以设置两个坐标参数,对纹理进行两次采样,然后按两次结果的透明度来判定你是不是边缘。
2帖主目前给的示例只是简单的两个相同的图。如果扩展一下,有很多的图,并且有可能这些图用的不是相同的纹理。这时候单纯地用一个shader就不好用了。还是得用相机的方式。
3对于ccc非得使用相机的方式的吐槽,没有一个单次渲染的接口,很多操作就很不方便了。因为帖主提到他现在使用的是用相机绘制到rt上,所以我提出了自己的一些经验。

哦,说明这么详细的,感谢,感谢。

刚学习很多还太了解,2.4可能确实不太方便;之后3.8的后效和sdf我都会试试的。

请问你们说的 rt 是指 RenderTexture 吗?

是的,经常缩写成rt。

为什么无关?楼主的问题是怎么做更好,使用sdf不用rt,难道不是更好吗?当然,sdf的确不能使用很多张图片,但是这个取决于楼主的决定

我说的与sdf无关是指马赛克大佬你的做法其实就是用shader。
楼主的外轮廓描边,已使用了透明度判定,而不是sdf判定
换成两张图,用shader,也可以一样用两次采样的alpha值取min来判定。
用sdf和用透明度判定是一样的。
所以重点不是在这里。

然后用rt的好处是,两种图直接就两个不同的sprite对象。
如果你用一个shader,那么就变成了在一个对象上,通过几个对象的参数来控制显示的位置。
用shader会省一些内存开销,但是问题是,如果你的这个几个对象需要拖拽、点击之类的操作,然后控制他们移动怎么办?
那你就需要再手动去写一套点击移动判定之类的计算逻辑,把算出来的值传给shader。

用相机拍摄对象到rt上,再对这个rt做描边渲染,好处是无论这些对象多复杂,有多少乱七八糟的东西,都不用做额外的操作。

当然了,具体还是看楼主的需求。

另外大佬你的框架群满了,有没有其他群啊。

突然想到一种新的思路。对于这种多个对象描边,可以把描边放在最下层。这样就能产生正常的渲染效果了!

我只能说你还不了解sdf,一般情况下 shader 比rt效率更高!

思路不错,好像不好实现啊,laya好像有cacheasbitmap这种将一个容器转存成图片的