Javascript 为什么在将alpha从1插值到0时，我的图像在褪色之前会变成白色？

我正在开发一个利用WebGL的程序，我有一个绘制图像的功能。片段着色器如下所示：

varying vec2 v_texcoord;

uniform sampler2D u_texture;
uniform vec4 u_tint;

void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord) * u_tint;
}

Frame 0: Tint =  [ 1, 1, 1, 1.0 ]
Frame 1: Tint =  [ 1, 1, 1, 0.9 ]
Frame 2: Tint =  [ 1, 1, 1, 0.8 ]
Frame 3: Tint =  [ 1, 1, 1, 0.7 ]
Frame 4: Tint =  [ 1, 1, 1, 0.6 ]
Frame 5: Tint =  [ 1, 1, 1, 0.5 ]
Frame 6: Tint =  [ 1, 1, 1, 0.4 ]
Frame 7: Tint =  [ 1, 1, 1, 0.3 ]
Frame 8: Tint =  [ 1, 1, 1, 0.2 ]
Frame 9: Tint =  [ 1, 1, 1, 0.1 ]
Frame 10: Tint = [ 1, 1, 1, 0.0 ]

然后，我有另一个函数，它使用从

1.0

到

0.0

插值的色调的alpha分量，每帧绘制一幅图像。也就是说，进程可能如下所示：

varying vec2 v_texcoord;

uniform sampler2D u_texture;
uniform vec4 u_tint;

void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord) * u_tint;
}

Frame 0: Tint =  [ 1, 1, 1, 1.0 ]
Frame 1: Tint =  [ 1, 1, 1, 0.9 ]
Frame 2: Tint =  [ 1, 1, 1, 0.8 ]
Frame 3: Tint =  [ 1, 1, 1, 0.7 ]
Frame 4: Tint =  [ 1, 1, 1, 0.6 ]
Frame 5: Tint =  [ 1, 1, 1, 0.5 ]
Frame 6: Tint =  [ 1, 1, 1, 0.4 ]
Frame 7: Tint =  [ 1, 1, 1, 0.3 ]
Frame 8: Tint =  [ 1, 1, 1, 0.2 ]
Frame 9: Tint =  [ 1, 1, 1, 0.1 ]
Frame 10: Tint = [ 1, 1, 1, 0.0 ]

令人困惑的是，无论出于何种原因，图像开始看起来很正常，逐渐变为几乎纯白色，然后最终逐渐消失。进度如下所示：

varying vec2 v_texcoord;

uniform sampler2D u_texture;
uniform vec4 u_tint;

void main() {
  gl_FragColor = texture2D(u_texture, v_texcoord) * u_tint;
}

Frame 0: Tint =  [ 1, 1, 1, 1.0 ]
Frame 1: Tint =  [ 1, 1, 1, 0.9 ]
Frame 2: Tint =  [ 1, 1, 1, 0.8 ]
Frame 3: Tint =  [ 1, 1, 1, 0.7 ]
Frame 4: Tint =  [ 1, 1, 1, 0.6 ]
Frame 5: Tint =  [ 1, 1, 1, 0.5 ]
Frame 6: Tint =  [ 1, 1, 1, 0.4 ]
Frame 7: Tint =  [ 1, 1, 1, 0.3 ]
Frame 8: Tint =  [ 1, 1, 1, 0.2 ]
Frame 9: Tint =  [ 1, 1, 1, 0.1 ]
Frame 10: Tint = [ 1, 1, 1, 0.0 ]

请注意，当图像淡入背景时，它首先变得非常明亮，然后才这样做。当alpha值在

0.5左右时，它似乎处于最大亮度

有没有办法避免图像在淡入背景时变得更亮？我的直觉是，将alpha分量从
1.0
淡入
0.0
会慢慢地将图像混合成与背景相同的颜色，但无论出于何种原因，它似乎也会首先增加图像的亮度

编辑：我在理解这个问题方面取得了一些进展。看起来，如果我将网站的背景色（如CSS中的）从默认（白色）更改为黑色，那么它将去除白色色调并使其看起来更好。但我想我的问题是，为什么改变alpha值会使它淡入网站的背景而不是帧缓冲区的背景？这个问题可以解决吗？
是否启用了预乘alpha？如果是，则
vec4 color=texture2D（u_纹理，v_texcoord）*u色调
gl_FragColor=vec4（color.rgb，1.0）*color.a
这两行代码似乎没有效果，因为它看起来似乎与当前发生的情况没有任何变化。启用了混合模式和深度测试？@Denis很抱歉，我刚才在睡觉。是的，混合已启用。我不认为我需要深度测试，但我只是尝试启用它，并且相同的行为正在发生（即，没有变化）。尝试在中禁用预乘alpha和/或alpha。