Webm video texture with alpha

I am trying to create a plane with video texture and alpha. I know webm is one format that supports alpha, any hints on how to enable the alpha channel.

It should work just like a plane with PNG texture, but it seems that is not the case. Any suggestions?

Can you provide a PG so that it’s easier to help you?


yeah i have been searching the end of the earth to get a video with alpha channel on a transparent mesh. no one seems to have an answer on here.

Maybe this can help:

1 Like

The issue is IOS… it doesn’t have any alpha video usage in browser unless it’s the newest phone that uses Hevc… when you play the video it adds a black background… I was thinking though… couldn’t I use a black and white version of that same video with the person in black and the background white to cut out the main video? Or I guess I could just add a solid color and key it out live. :thinking: problem is I have no idea how to in bjs. Is it the same in vanilla js? That’s fairly easy.

I will upload some screen shots when I get a chance. I’m wanting to feed in a live stream of a band. I can key them out before I send or I can on the client with js.

Here is the working example - https://playground.babylonjs.com/#LT4WHM#2
Hit Alt+Enter or Run PG button to start video.

1 Like

You can find in this thread some PGs that are removing the background color thanks to a custom shader.

The opacity texture trick would do but else you might need a custom shader unfortunately