Hey, I think I found a bug but im not quite sure. 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…

Try to set the opacity texture: Babylon.js Playground Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes I can’t check if this works myself because your PG does not work on my iPhone SE.

@Evgeni_Popov Yes, I already tried using the video as opacity texture and it didnt work. What I also did was “videoMaterial.useAlphaFromDiffuseTexture = true;” which also didnt work.

Can anyone here reproduce this with Safari? This is actually a really big problem for me because there is no really other good solution to display transparent videos in Safari.

maybe try and set the material alpha mode ? Babylon.js Playground Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

@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 tha…

What if you use “combine” instead of “add” for the alpha mode? Babylon.js Playground Babylon.js playground is a live editor for Babylon.js WebGL 3D scenes

I think a custom shader that cuts off the black pixels is needed here. I tried setting videoTexture.getAlphaFromRGB to true, it’s working but the images is somehow faded out.

Combine results in a black background. [image]

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. [image] Transparent Video Questions Hey…

It seems it stopped working starting at some iOS version: [image] Transparency for webm Video texture Questions video-texture Transparency stopped working in the…

Safari HEVC/H.265 Video with transparency has black background

Bugs

Simon_Weck February 14, 2024, 3:52pm 9

Combine results in a black background.

Topic		Replies	Views
Transparent Video Questions alpha , video , transparent , webm	1	1086	February 1, 2024
Video Texture with Alpha and Apple Device Issues Questions	3	735	August 26, 2022
hasAlpha for alpha video (.webm) does not work in WebGPU Bugs	1	332	August 3, 2023
Is it a bug that I can't get alpha for H265 mp4? Questions	1	1091	September 6, 2022
How to render a video with transparency using VideoTexture? Questions	2	336	June 6, 2022

Safari HEVC/H.265 Video with transparency has black background

Related topics