在图像纹理背景上放置缩放的视频纹理

时间:2021-06-26 18:40:36

标签: webgl webgl2

我在图像纹理背景上有这个工作缩放蒙版视频纹理。但是它位于左下角。我尝试了一些乘以坐标的技巧,但似乎没有太大区别。我可能不得不让很多值可以改变制服,但现在硬编码没问题。

可以使用哪些值来更改视频纹理坐标以显示在右上角或右下角?

该视频是一个网络摄像头流,bodypix 数据提供了掩码。

混合中的 alpha 来自 bodypix 数据,需要以 255 计算才能正确显示。

片段示例

 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);

gl_FragColor = mix(texel0, frameTex, step(frameuv.x, 1.0) * step(frameuv.y, 1.0) * maskTex.a * 255.);

 }

https://jsfiddle.net/danrossi303/82tpoy94/3/

0 个答案:

没有答案