两张图片进行完全重叠的情况下，如何设置混合因子实现透明效果？

Creator 2.x
#1

1、我的目的是将下面这个图片（如图所示，阴影部分是紫色的，起名为1.png），展示在画布上面，同时希望紫色的部分有一定的透明度；

2、为达到这个目的，我又叠加了一张紫色的遮挡图（见图，起名为2.png）：

3、张两张图片大小完全相同；我把2.png放在下面，把1.png放在上面，两张图片完全重合；
这两个图用默认的混合因子，截图如下；

**

## 问题与求助 我如何才能实现我想要的结果，如何设置这两张图片的SRC、DST的混合因子呢？ 这个地方迷惑了大半天，一直没有解决问题。。求助了！！！

**：

显示效果.png1154×723 90.8 KB

#2

我发现这两张图片的SRC Blend因子和DST Blend因子都起作用，我非常迷惑，查了很多资料也无解啊。

按照道理来讲，两张图片混合，应该只有其中一个因子起作用才对啊，为什么两个因子都起作用，怎么也调不出来想要的效果来啊。

跪求大侠指点一二，在这里被挡了好长时间了。。。。谢谢

#3

我将测试项目打包如何，我的cocos creator 版本是最新版。谢谢。
项目打包文档：testBlend.zip (265.3 KB)

#4

我感觉你理解错了 Blending 的意思, 尤其是 src 和 dst 的意思.

https://learnopengl-cn.readthedocs.io/zh/latest/04%20Advanced%20OpenGL/03%20Blending/

所以我觉得通过混色是无法实现你的目的的, 有两个方案:

  1. 通过 PS 修改原图(图1) 让紫色部分带有透明度.
  2. 写一个 shader, 在 frag 中处理颜色, 判断如果当前色是紫色的话, 重新复制当前色的 alpha 值, 但是可能会 ‘误伤’.

我尝试了一下方案2, 效果如下:

左边是修改了alpha的, 右边是原图. 核心 shader 代码如下:

varying vec4 v_fragmentColor;
varying vec2 v_texCoord;

uniform float f_alpha;

void main()
{
    vec4 v_orColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);

    v_orColor.a = (v_orColor.r == 1.0 && v_orColor.g == 0.0 && v_orColor.b >= 0.99) ? f_alpha : v_orColor.a;
    
    gl_FragColor = v_orColor;
}

不知道能否帮到你, 另外我也只是了解皮毛, 希望能够抛砖引玉, 看看高手们是怎么做的.

#5

感谢回复。。。

那如果只是希望紫色的消失，要如何办呢？谢谢

#6

也是和上面一样的解决方案.

1赞
#7

多谢回复！