将 alpha 从 1 插入到 0 时，为什么我的图像在消失之前变白？

编程问答 2022-05-13

问题描述

我正在开发一个利用 WebGL 的程序，我有一个绘制图像的功能。片段着色器看起来像这样：

varying vec2 v_texcoord;

uniform sampler2D u_texture;
uniform vec4 u_tint;

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

然后我有另一个函数，它使用从 1.0 到 0.0 插值的色调的 alpha 分量在每一帧绘制图像。也就是说，进程可能看起来像这样：

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

令人困惑的是，无论出于何种原因，图像开始看起来很正常，然后逐渐变成几乎纯白色，最后逐渐消失。进程看起来像这样：

enter image description here

请注意，虽然图像确实淡入背景中，但在此之前它首先变得非常亮。当 alpha 值在 0.5 附近时，它似乎处于最大亮度。

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

编辑：我在理解问题方面取得了一些进展。看来，如果我将网站的背景颜色（如在 CSS 中）从默认（白色）更改为黑色，那么它就会摆脱白色色调并使其看起来好多了。但我想我的问题是，为什么改变 alpha 值使其淡入网站的背景而不是帧缓冲区的背景？这能解决吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

blendingcolorscolorsjavascriptshadershadershader