RGBA Image as background

[kevinpl07]

trafficstars

I want to experiment with rgba images as a background image. That way the rgba image would be over the camera except for the cutout person mask. I can't seem to get the fragment shader to work with rgba.

Any ideas?

[Volcomix]

I think in the fragment shader, changing this line to something like this should be a good starting point:

outColor = vec4(frameColor, personMask);

Then there is something to take into consideration to have it working, it's that the alpha channel might not be processed by WebRTC. So you'll probably need to hack around something similar to this: https://webrtchacks.com/how-to-make-virtual-backgrounds-transparent-in-webrtc/

[kevinpl07]

@Volcomix Btw I managed to make it work with a simple trick in the shader of the backgroundImageStage:

float personMask = clamp((1.0 - texture(u_background, v_backgroundCoord).a) + texture(u_personMask, v_texCoord).a, 0.0, 1.0);

This way RGBA pngs as background images will be correclty displayed on top of the backround while allowing the original background to be visible wherever the image is transparent.

[rishabh-adda]

Hi Kevin , I am also trying to achieve transparent background . Are you able to do that @kevinpl07

[kevinpl07]

Hi Kevin , I am also trying to achieve transparent background . Are you able to do that @kevinpl07

yes, see the code change given above

[rishabh-adda]

I have made the above code change , Anything else required. I am still facing issues generating transparent background , can you share the Screenshot Images that you were able to achieve @kevinpl07 . Thanks