Is there a way to have transparent video background in Three.js?

Question

I have a greenscreen HTML5 video and want to display it on a plane with a video texture using Three.js.

I tried to use two different video textures ( the video and the alpha channel ) but they are not perfectly synchronized in time and based on what I read it's very hard to sync two HTML5 videos.

I think using .webm video is the way to go but I can't manage to get the alpha channel working with Three.js. Is it possible or is there another way to do it ? Thanks !

var material = new THREE.MeshBasicMaterial( { map: videoTexture, transparent: true } );

Answer 1

You have to specify the format in order to have the transparency :

texture.format = THREE.RGBAFormat;

Thanks everyone