仔细看了一下,这个问题分为两部分,这两部分目前引擎的行为都是对的。
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),跟你目前的做法又不同了。这个方案可能要改引擎,不过移植成本可能最低?我猜的。