H5小游戏,背景设置为透明后,游戏内的半透明图片与DOM背景融合产生黑边

  • Creator 版本: 3.2.1以及3.4

  • 目标平台:PC上Chrome

  • 重现方式:通过将style.ccs中body的background-color修改 transparent,项目设置勾选ENABLE_TRANSPARENT_CANVAS,将场景的相机配置ClearFlags为SOLID_COLOR,ClearColor透明底为0

  • 之前哪个版本是正常的:通过论坛的预乘外加blendSrc设置为one的方式,在2.4.1是可以解决的

  • 编辑器操作系统: windows10

  • 重现概率: 必现

image

1赞

美术对图片做一下预乘试试?

我现在是通过shader的方式


然后设置材质的BlendState的BlendSrc为one,下面是我的测试图
image


我想问一下这是什么问题

是不是对应的项目打开方式有问题,可以从cocosCreator的资源管理器打开

我有尝试用其他的方式将对应的png图片转换为预乘,然后在材质部分的BlendState部分选择为BlendSrc为one,但是还是有黑边,是我哪些地方没有处理好吗

在项目宏中把 TRANSPARENT_CANVAS 关掉

我这边的需求,就是想让背景能透明的,需要半屏显示 :flushed:
如果把 TRANSPARENT_CANVAS关掉的话,就实现不了透明背景了

能提供一个 demo 吗?

demo_fixBlack.zip (2.2 MB)
这是demo,麻烦看一下是什么原因

谢谢,已反馈给引擎团队

仔细看了一下,这个问题分为两部分,这两部分目前引擎的行为都是对的。

1。底色穿透问题,也就是说 Alpha 通道被上层的透明像素污染的问题,经测试不存在。

图片效果正常,不存在红色描边,说明红色未穿透。这是 2.x 有可能遇到的问题,但是你已经避开了。

2。Sprite 黑边问题,当你完全隐藏 UI 背景时,元素混合到白色的 DOM body 上,就要确保半透明处的 rgb 是未混合过的,所以工具预乘必然是无效的(直接修改了 rgb,颜色变暗了)。你的着色器预乘也是错的,因为你在 blend src 上已经设置过 SRC_ALPHA 了,等于混合了两次 alpha。

几种都可行的方案:
a. Camera 的 clearColor 设置为白色透明(你没有),这样 canvas 颜色怎么混合都不会变暗,白色网页背景这样就行,其它颜色背景可能会出现白边。
b. 普通 2D 材质,blendSrc 和 blendSrcAlpha 都设为 ONE。由浏览器进行混合 DOM 对象得到正确的结果。但是多图层混合可能会出问题。如下图
c. 启用 Canvas 和 body 叠加时的预乘,这个可能是得 canvas.getContext('webgl', { alpha: false, premultipliedAlpha: true),跟你目前的做法又不同了。这个方案可能要改引擎,不过移植成本可能最低?我猜的。

感谢大佬,我目前尝试了a和b方案,a方案处理了之后确实会出现白边的问题,b方案目前效果很理想;但是这部分b方案的多图层混合的问题,目前我只将ui背景的混合模式设置为b方案,其他图层不修改混合方式,只要使用扩边而不是预乘就没有问题

请问使用了b方案,使用材质设置了完成后,有锯齿怎么解决?

是不是在texture采样部分选择了nearest

没有选择nearest

锯齿应该是别的原因,需要另外排查一下

该主题在最后一个回复创建后14天后自动关闭。不再允许新的回复。