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

【问题标题】：Scale video texture with mask over image texture background在图像纹理背景上使用蒙版缩放视频纹理
【发布时间】：2021-06-25 19:23:18
【问题描述】：

参考上一个问题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/

【问题讨论】：

标签： javascript glsl webgl

【解决方案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);

【讨论】：