Transparency for webm Video texture

Questions
1

Hi Everyone,

I am trying to add a video textured geometry inside the scene. For POC, I am trying to map the texture of plane geometry. Eventually, I would be loading it on other geometries like cylinders. The video is being played but transparency is not being set. I have added a transparent property to material and format as RGBA to texture property

Any help on this would be great.

        video = document.createElement( 'video' );
        video.src = "testAudio.webm";
        video.load(); 
	
	videoImage = document.createElement( 'canvas' );
	videoImage.width = 240 * 2;
	videoImage.height = 102 * 2;

	videoImageContext = videoImage.getContext( '2d' );
	videoImageContext.fillStyle = '#000000';
	videoImageContext.fillRect( 0, 0, videoImage.width, videoImage.height );

	videoTexture = new THREE.Texture( videoImage );
	videoTexture.minFilter = THREE.LinearFilter;
	videoTexture.magFilter = THREE.LinearFilter;
	videoTexture.format = THREE.RGBAFormat;

        var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, transparent: true } );
	var movieGeometry = new THREE.PlaneGeometry( 120* 2, 50* 2, 4, 4 );
	var movieScreen = new THREE.Mesh( movieGeometry, movieMaterial );
	movieScreen.position.set(0,20,0);
        threeD_scene.add(movieScreen);
2

Please create your video texture like so and try again:

<video id="video" loop crossOrigin="anonymous" playsinline style="display:none">
    <source src="testAudio.webm">
</video>

const video = document.getElementById( 'video' );
video.play();

const texture = new THREE.VideoTexture( video );
texture.format = THREE.RGBAFormat;

When using VideoTexture, minFilter and magFilter are already set to THREE.LinearFilter.

Notice that you need a user interaction before starting the video (otherwise you violate the autoplay policy and it won’t work). Besides, you should definitely add a MP4 version of your video since WebM is not supported by all browsers. Use the following example as a code template:

https://threejs.org/examples/webgl_materials_video

3

I have been trying to get video with alpha working on all devices. On desktop browsers (Chrome, Safari) webm and mov (codec hvc1) are working great when using them as videotexture with format sRGBA.

But none of the mobile devices work: video (iOS = mov, Android = webm) is shown without alpha.

On Quest2 Oculus browser the video (webm) doesn’t load at all (the video element control shows a spinning pause button). here i might have to change to another codec.

Anyone experienced the same and found a solution? Especially for the Quest2 I am eager to hear a solution for videotexture with alpha.

FYI: this is the video element for the video texture:

<video autoplay="" loop="" muted="" playsinline="" preload="metadata" crossorigin="anonymous" controls="" style="display:none">
    <source src="movie-A.mov" type="video/mp4; codecs=&quot;hvc1&quot;">
    <source src="movie-A.webm" type="video/webm">
    Sorry, your browser doesn't support this video.
  </video>
4

Interesting @Jo_Mantelers
My curiosity itches me. I tried with FF and Chrome, and it now works on desktop and Android 7.0.
Is it still not working for you on iOS and Quest2 with webm?
Not related but I think for HTML you can remove the ="" and simply quote:

<video autoplay loop muted playsinline preload="metadata" crossorigin="anonymous" controls style="display:none">
    <source src="movie-A.mov" type="video/mp4; codecs='hvc1';">
    <source src="movie-A.webm" type="video/webm">
    Sorry, your browser doesn't support this video.
  </video>
5

did you find a more cross browser/ cross device solution for this ?

6

Have you seen this approach?

Using a matted fragment shader. Seems to be iOS compatible.

2 Likes
7

I just tested transparent video textures (webm+hvc) and can confirm it works on Desktop+Mobile including iOS, but not on the native Oculus Quest 2 browser. It works on Firefox Reality for Oculus though.

8

Transparency stopped working in the latest iOS 16.4.1, how can I solve it?

9

Can confirm that it no longer works, sad. I’m using greenscreen video with a chroma key shader like this now:

Another solution is an explicit alpha channel and custom shader like demo’d in the codepen above:

1 Like