WebGL白色粒子淡出失效问题求助

原因 #

你的代码通过叠加黑色半透明图层实现粒子淡出效果，但画布的CSS背景色是深灰色（#111，对应RGB值约(0.067, 0.067, 0.067)）。白色粒子衰减时，颜色会逐渐趋近于黑色，而非画布的深灰色背景，导致视觉上留下与背景不一致的残留痕迹；其他颜色粒子因色调差异或原有颜色逻辑，衰减后与背景的视觉冲突不明显，所以表现正常。

另外，顶点着色器中的c2rgb函数未被实际调用，当前所有粒子都被固定渲染为白色（vec4(1,1,1,a_data.w)），这进一步放大了白色粒子的痕迹问题。

解决方案 #

1. 匹配淡出图层与画布背景色

修改顶点着色器的clear函数，将黑色替换为画布背景的深灰色，让淡出效果最终趋近于背景色：

void clear(){
    gl_Position = vec4( a_data.xy, 0, 1 );
    // 使用#111对应的归一化RGB值（17/255≈0.0667）
    v_color = vec4( 0.0667, 0.0667, 0.0667, a_data.w );
}

2. 修复粒子颜色逻辑（可选）

如果需要使用自定义颜色而非固定白色，修改draw函数，启用c2rgb解析传入的颜色值：

void draw(){
    gl_Position = vec4( vec2( 1, -1 ) * ( ( a_data.xy / u_res ) * 2. - 1. ), 0, 1 );
    // 解析a_data.z中的整数颜色值，替换固定白色
    v_color = vec4( c2rgb(int(a_data.z)), a_data.w );
}

这样粒子颜色会根据a_data.z传入的颜色值动态变化，同时淡出时会平滑过渡到背景色，不会留下痕迹。

3. 验证混合模式（可选）

当前使用的gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA是标准的alpha混合模式，无需修改。如果需要更强烈的淡出效果，可以微调webgl.clear()中的alpha值（当前为0.1），但核心问题还是颜色匹配。

修改后的关键代码片段 #

调整后的顶点着色器：

#version 300 es
uniform int u_mode;
uniform vec2 u_res;
in vec4 a_data;
out vec4 v_color;

vec3 c2rgb(int color_int){
    int r = color_int >> 16;
    int g = color_int >> 8 & 0xff;
    int b = color_int & 0xff;
    return vec3(r/255.0, g/255.0, b/255.0);
}

void clear(){
    gl_Position = vec4( a_data.xy, 0, 1 );
    // 匹配画布背景#111的归一化RGB值
    v_color = vec4( 0.0667, 0.0667, 0.0667, a_data.w );
}
void draw(){
    gl_Position = vec4( vec2( 1, -1 ) * ( ( a_data.xy / u_res ) * 2. - 1. ), 0, 1 );
    // 启用自定义颜色解析（可选）
    v_color = vec4( c2rgb(int(a_data.z)), a_data.w );
}
void main(){
    if( u_mode == 0 )
        draw();
    else
        clear();
}

内容的提问来源于stack exchange，提问作者dragoon