Use videoTexture as opacityTexture

Question

How do I use video (mp4) as alpha map in babylonJS?

In three.js applying a video as texture is as simple as assigning the video texture to alphaMap (instead of the diffuse map).

Here's the expected result in three.js - Demo.

I attempted to do the same in babylonJS to no avail. Here's what I have so far babylonJs demo

var mat = new BABYLON.StandardMaterial("mat", scene);

var videoTexture = new BABYLON.VideoTexture("video", ["textures/babylonjs.mp4", "textures/babylonjs.webm"], scene, true, true);

mat.opacityTexture = videoTexture;

Any ideas are welcome. Thanks

Answer 1

You can use videoTexture.getAlphaFromRGB = true; to use all three channels combined for the alpha. By default it only uses the red channel, which does not have enough variance in the source video for it to show.

The complete example:

var mat = new BABYLON.StandardMaterial("mat", scene);

var videoTexture = new BABYLON.VideoTexture("video", ["textures/babylonjs.mp4", "textures/babylonjs.webm"], scene, true, true);
videoTexture.getAlphaFromRGB = true;
mat.opacityTexture = videoTexture;