Question

参考上一个问题 Scaling Video texture mixed with image texture

我使用 bodypix 数据提供的遮罩部分缩放了网络摄像头视频纹理。但是我不知道如何去除因混合两者而产生的白色背景。我不确定额外的 alpha 来自哪里。

更新小提琴 https://jsfiddle.net/danrossi303/q8gz5cun/10/

这个片段

precision mediump float;
uniform sampler2D background;
uniform sampler2D frame;
uniform sampler2D mask;

uniform float texWidth;
uniform float texHeight;


void main(void) {
vec2 texCoord = gl_FragCoord.xy / vec2(texWidth,texHeight);
vec2 frameuv = texCoord * vec2(texWidth, texHeight) / vec2(200.0, 200.0);

vec4 texel0 = texture2D(background, texCoord);
vec4 frameTex = texture2D(frame, frameuv.xy);
vec4 maskTex = texture2D(mask, frameuv.xy);

vec4 texel1 = vec4(frameTex.rgb, maskTex.a * 255.);

gl_FragColor = mix(texture2D(background, texCoord), texel1, step(frameuv.x, 1.0) * step(frameuv.y, 1.0));
}

我需要将缩放后的视频定位到画布的任何角落，并以某种方式提供动态统一以将纹理坐标更改回视口大小。目前它被硬编码为 200，但应该恢复。

带有遮罩 bodypix 视频的未缩放示例。

https://jsfiddle.net/danrossi303/q8gz5cun/6/

Answer 1

Alpha 通道在 [0.0, 1.0] 范围内（链接颜色通道。因此与 255. 的乘法显然是错误的：

~~vec4 texel1 = vec4(frameTex.rgb, maskTex.a * 255.);~~

vec4 texel1 = vec4(frameTex.rgb, maskTex.a);

混合纹理可能取决于遮罩：

gl_FragColor = mix(texture2D(background, texCoord), texel1, 
    step(frameuv.x, 1.0) * step(frameuv.y, 1.0) * maskTex.a);

在图像纹理背景上使用蒙版缩放视频纹理

1 个答案: