Mp4 video alpha transparency

Questions
1

Hello - I have created a PG (https://www.babylonjs-playground.com/#05UVJI#38) attempting to enable transparency on the alpha channel so that the background is transparent. The video I am using is from Blue alien planet rotating with alpha channel - Free HD Video Clips & Stock Video Footage at Videezy!. The video is hosted on imgur.

The video renders in the PG but I can not figure out how to enable the .hasAlpha = true so that the background is transparent.

Any help is much appreciated.

Thanks - Jeff

2

Hi there,

I follow the documentation for hasAlpha I tried using it similar to how you did and got nothing which makes me think I’m misinterpreting the purpose of it.

BUT I looked around the forms I found a playground example with a transparent video so hopefully this can be a good reference. (I noticed it’s not even using hasAlpha).
https://www.babylonjs-playground.com/#SUU0KB#361

3

Hello @msDestiny14 - Thanks for looking at this. I believe the video in the PG you found (https://www.babylonjs-playground.com/#SUU0KB#361) has transparent alpha channel or the creator removed the background using video editor tools. I substituted my video link and still get a solid background as can seen in https://www.babylonjs-playground.com/#SUU0KB#362

Onward.

4

Alright. Here’s a second attempt! I used your video this time but not happy with the results myself. Is there not a simpler way to do this :thinking: Babylon.js Playground

5

Excellent 2nd attempt! I’ll try some other videos with simpler backgrounds to see how that works.

1 Like
6

Works great. Hoping someone has a simpler way to do this.

7

An easier way would be to have an alpha channel in your video and apply alpha test/blend.

Without this channel, you can only work with the rgb values and apply some computation to determine if a pixel must be discarded or not, as in the PG. Using a pure green (for eg) background in your video would help because your colors are quite different from it, so the discard process would produce less artifacts.

In the PG, using the emissive texture and no lighting improve the rendering:

https://playground.babylonjs.com/#GH6TZV#2

1 Like
8

Hi - Thanks for responding. I agree that it would be better to start with an mp4/webm with alpha channel. That is what I was trying to do in https://www.babylonjs-playground.com/#05UVJI#38 (please see opening question in this thread). The mp4 in the PG supposedly has a transparent alpha channel. However, I could not seem to enable a transparent background. Is the code in the PG correct?

Thanks - Jeff

9

It seems the mp4 format does not support an alpha channel:


10

I thought the same thing so now I am trying webm which is supposed to support alpha.

Here’s a free webm with alpha - flying butterfly with transparent alpha channel | Freestock videos

Still not sure of the BJS code.

11

I tried locally on my computer and it did not work.

Looking with PIX, I could see that the texture located in the GPU that comes from the video has no alpha channel. However, I don’t know if it’s because there’s really no alpha channel in the video itself or because webgl would not handle the alpha channel of a video…

[…] Ok, the video has no alpha channel. Using this video it does work with this PG:

http://localhost:1338/Playground/index-local.html#LT4WHM#1

Of course you should replace the temp/Bear.webm path by another one.

1 Like
12

Thanks - your bear video worked with my original PG (good to know that code works).

I replaced the bear with the butterfly video and the background is visible. How did you get an alpha channel in the bear video?

13

No idea, I found the video here: Video Player WebGl Transparency problem - previous frames doesn't clear - Unity Answers

14

Thanks - much appreciate your chasing this down.

15

The bit is incorrectly flipped.

16

Thanks for responding. What do you mean “The bit is incorrectly flipped?”