I am trying to display a video which has transparency. For every Browser except Safari WebM works totally fine. Safari does not support WebM transparency and displays the video with a black background. Safari does support the H.265 Codec which also supports transparency. I have a H.265 Quicktime file with transparency and I am trying to display it as videotexture on a plane. Unfortunately I get a black background. When I use the same video as the source for a default HTML Video Element and display it, the transparency works, so I assume Babylonjs doesnt recognize the transparency.
Here is the PG which reproduces this. Every Browser except Safari will of course throw the “not supported source was found” error when executing. I tested it on Safari 17.1 on a Mac mini 2023.
@MeshSlayer Its working now, but the plane is still slightly visible. Its hard to see but the plane is a bit lighter. The non transparent part of the video also becomes transparent… I think using a blend mode is not the right way, the video itself has an alpha channel and I should be able to use that. https://playground.babylonjs.com/#ZMCFYA#685
A Custom Shader could be used as a workarround but it leaves borders arround the object and I cant really get rid of them. I did a summary post where I listed all posibilities to use a transparent videos compatible with all browsers.
The real question is, is this a babylonjs bug because the video has an alpha channel…
In my mind setting videoTexture.hasAlpha = true should just do it, just like when using a webm as video source.
When I use videoTexture.getAlphaFromRGB and videoMaterial.opacityTexture = videoTexture it looks like the alpha channel is used but as you said the video is faded out. Here the PG that reproduces this:
What exactly stopped working? They just state “Transparency stopped working in the latest iOS 16.4.1, how can I solve it?” Transparency is working when using a default video tag as I mentioned in my main post…
We use the HTML video element and copy the data from the canvas to the texture each frame. The problem could be that the video decoding performed by the browser in the canvas does not contain the alpha channel (wild guess here).