探照灯shader出现了类似alpha叠加的问题

Creator 2.x
#1

  • Creator 版本：2.0.5

  • 目标平台： web

由于项目要使用一个探照灯效果，而且场景上有多于一个被照明的目标，所以决定使用shader来实现。但是在两个目标有重叠的时候，发现重叠部分出现了一条颜色比较深的缝隙。上图

再来一个frag的代码

frag: `
uniform sampler2D texture;
uniform vec2 resolution;
uniform vec2 heroPos;
uniform vec2 boxPos;
uniform vec2 doorPos;
uniform float radius;
varying vec2 uv0;

void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
    // 纹理坐标
    vec2 uv = uv0.xy ;
    // 纹理采样
    vec4 tex = texture2D(texture, uv);

    float minAlpha = 1.0;
    float rx = 0.0;
    float ry = 0.0;
    float r = 0.0;
    float ff = radius*radius;
    vec4 tex1 = vec4(0.0, 0.0, 0.0, 0.0);

    //英雄
    rx = heroPos.x;
    ry = heroPos.y * 0.562;
    r = ((uv0.x - rx)*(uv0.x - rx) + (uv0.y*0.562 - ry)*(uv0.y*0.562 -ry));
    if(r >= ff){
        r = 1.0;
    }else{
        r = r / ff;
    }
    if(r < minAlpha){
        minAlpha = r;
    }

    //门
    rx = doorPos.x;
    ry = doorPos.y * 0.562;
    r = ((uv0.x - rx)*(uv0.x - rx) + (uv0.y*0.562 - ry)*(uv0.y*0.562 -ry));
    if(r >= ff){
        r = 1.0;
    }else{
        r = r / ff;
    }
    if(r < minAlpha){
        minAlpha = r;
    }

    //宝箱
    rx = boxPos.x;
    ry = boxPos.y * 0.562;
    r = ((uv0.x - rx)*(uv0.x - rx) + (uv0.y*0.562 - ry)*(uv0.y*0.562 -ry));
    if(r >= ff){
        r = 1.0;
    }else{
        r = r / ff;
    }
    if(r < minAlpha){
        minAlpha = r;
    }
    
    tex1 = vec4(0.0, 0.0, 0.0, (minAlpha));
    fragColor =  tex1;
}
void main()
{
    mainImage(gl_FragColor, gl_FragCoord.xy);
}
`,

大概就是这样了，这个shader是挂在了一张铺满屏幕的黑色精灵上的。ps: 上面代码中的0.562是屏幕的宽高比

精灵节点上挂着一个脚本，脚本设置了精灵使用的shader
mat = new CustomMaterial(name, [
{name: ‘resolution’, type: renderer.PARAM_FLOAT3},
{name: ‘heroPos’, type: renderer.PARAM_FLOAT2},
{name: ‘boxPos’, type: renderer.PARAM_FLOAT2},
{name: ‘doorPos’, type: renderer.PARAM_FLOAT2},
{name: ‘radius’, type: renderer.PARAM_FLOAT},
]);
this.spImage.setMaterial(name, mat);
我的思路是取重叠位置计算出来的最小的alpha值，想请教一下到底为什么会出现黑缝这种，请各路大神指点！！

#2

这种操作，性能担忧

#3

两个光源在相交的地方，光通量应该相加，而不是取两者光通量更亮的部分。
伪代码大概这样：

intensity = .0f
for light in light_list:
    intensity += (1.0f - clamp01(len(uv-light_pos)/radius))^2  // 平方衰减

alpha = 1.0f - intensity
2赞
#4

双缝干涉了解一下 [狗头表情]

#5

试了一下，确实没有缝隙的问题出现。只是两个发光物体一起的时候有一个亮度比较强的光圈

#6

正常的手电筒，重叠的地方，也是会变亮的。

#7

游戏怎么感觉和盗王之王很像呀~