Webgl 为图像添加背景

Question

所以我是 Webgl 的新手，一直在尝试添加透明背景，这样您仍然可以看到图像和背景。我已经包含了我一直在使用的代码，但每次我运行代码它只是发布图像而不改变背景。任何关于我做错了什么的提示都将不胜感激。

precision highp float;
    
// Uniform variables are constant over image
uniform float time;
uniform sampler2D image;
uniform vec2 u_resolution;
uniform vec2 viewport;
    
void main(void)
{
    gl_FragColor = vec4(1.0, 0.0, 0.0, 0.5);
    gl_FragColor = texture2D(image, gl_FragCoord.yx / 600.0);
}

Answer 1

~~这取决于你想要什么。您可以 mix 纹理颜色和背景颜色 1:1:~~

~~void main(void) { vec4 color = vec4(1.0, 0.0, 0.0, 0.5); vec4 textureColor = texture2D(image, gl_FragCoord.yx / 600.0); gl_FragColor = mix(textureColor, color, 0.5); }~~

如果纹理是部分透明的并且您想用背景色填充这些区域，则必须mix颜色取决于纹理的 Alpha 通道 (textureColor.a):

void main(void)
{
    vec4 backColor = vec4(1.0, 0.0, 0.0, 0.5);
    vec4 textureColor = texture2D(image, gl_FragCoord.yx / 600.0);
    gl_FragColor = mix(backColor, textureColor, textureColor.a);
}

然而，Blending是完全不同的东西。需要启用混合并且必须设置混合功能。这不能在共享器中完成。它必须使用 WebGL 指令进行设置。例如：

gl.enable(gl.BLEND);
gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

另见

Webgl 为图像添加背景

Webgl adding a background to an image

javascript

glsl

webgl