Video Texture in HoloJS not working

[KatayaAyman]

I tried video texture based on the following documentations:
https://github.com/mrdoob/three.js/blob/master/examples/canvas_materials_video.html
https://github.com/mrdoob/three.js/blob/master/examples/webgl_materials_video.html
https://stemkoski.github.io/Three.js/Video.html

I replaced CanvasRenderingExample in HoloJS -> ThreeJSApp example with the following two trials:

function CanvasRenderingExample(scene, renderer) {
	let canvas = document.createElement('canvas');
    canvas.width = 480;
    canvas.height = 204;
    
    var video = document.createElement("video");
    video.src = "http://techslides.com/demos/sample-videos/small.ogv";
    video.autoplay = true;
    
    videoImageContext = canvas.getContext('2d');
    videoImageContext.fillStyle = '#FFFFFF';
    videoImageContext.fillRect(0, 0, canvas.width, canvas.height);

    let texture = new THREE.Texture(canvas);
    texture.needsUpdate = true;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;

    let canvasCube = new THREE.Mesh(
        new THREE.PlaneGeometry(0.5, 0.5),
        new THREE.MeshStandardMaterial({ side: THREE.DoubleSide, map: texture, overdraw: 0.5 })
    );

    canvasCube.position.set(0, 0.2, -0.5);
    scene.add(canvasCube);

    var ambient = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambient);

    this.update = function() {
        if (video.readyState === video.HAVE_ENOUGH_DATA) {
            videoImageContext.drawImage(video, 0, 0);
            if (texture)
                texture.needsUpdate = true;
        }
    }
}

function CanvasRenderingExample(scene, renderer) {
	let canvas = document.createElement('canvas');
    canvas.width = 480;
    canvas.height = 204;
    
    var video = document.createElement("video");
    video.src = "http://techslides.com/demos/sample-videos/small.ogv";
    video.autoplay = true;
    
    videoImageContext = canvas.getContext('2d');
    videoImageContext.fillStyle = '#FFFFFF';
    videoImageContext.fillRect(0, 0, canvas.width, canvas.height);

    let texture = new THREE.VideoTexture(video);
    texture.format = THREE.RGBFormat;
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;

    let canvasCube = new THREE.Mesh(
        new THREE.PlaneGeometry(0.5, 0.5),
        new THREE.MeshStandardMaterial({ side: THREE.DoubleSide, map: texture, overdraw: 0.5 })
    );

    canvasCube.position.set(0, 0.2, -0.5);
    scene.add(canvasCube);

    var ambient = new THREE.AmbientLight(0xffffff, 1);
    scene.add(ambient);
}

In the first example I am seeing a white plane, in the second example I am not getting anything on hololens.

[Almost-Done]

I'm afraid it was never implemented properly - it was more like an experiment. It got completely broken with the new DOM implementation.

I made the required fixes in the develop/video-texture and threw together a sample; however performance is sub-par, the video element implementation is just enough to make the example run, colors are wrong etc.

The ogv format is not supported, the sample uses mp4.
The video texture should use RGBA but video decoding only works with ARGB so colors are off

[khalilkhalil25]

Hi, is there a possibility for you to merge this branch with master, even with its sub-par performance?