Texture from video tag leaks memory

Question

I am creating a THREE.js (r78) texture from a video tag and updating the texture 60 times per second by setting needsupdate=true in requestanimationframe. My issue is I see memory leaking in the Chrome Task Manager. Specifically, for the task GPU Process under the column Memory (not GPU Memory), the value increases over time.

The video file is MP4, H.264, 60 fps. My code is posted below. I wanted to vet this on stackoverflow.com before I submit a new THREE.js issue on github.com.

    var video = document.createElement('video');
    video.src = 'test1.mp4';
    video.loop = true;
    video.load(); 
    video.play();

    video.onloadedmetadata = function() {
        initScene();
        animate();
    };

    var scene, camera, renderer, object;

    function initScene() {
        const W = 1280;
        const H = 720;
        camera = new THREE.PerspectiveCamera(30, W/H, 1, 5000);
        camera.position.z = 1000;
        object = makeVideoObject(video.videoWidth, video.videoHeight);
        scene = new THREE.Scene();
        scene.add(object);
        renderer = new THREE.WebGLRenderer({antialias:true, alpha:true});
        renderer.setSize(W, H);
        document.body.appendChild(renderer.domElement);
    }

    function animate() {
        object.material.map.needsUpdate = true;
        renderer.render(scene, camera);
        requestAnimationFrame(animate);
    }

    function makeVideoObject(w, h) {
        var texture = new THREE.Texture(video);
        texture.minFilter = THREE.LinearFilter;
        texture.magFilter = THREE.LinearFilter;
        var material = new THREE.MeshBasicMaterial({ map:texture });
        var geometry = new THREE.PlaneGeometry(w, h, 1, 1);
        return new THREE.Mesh(geometry, material);
    }

BTW, I also tried creating the texture from a canvas tag, and updating it's context by calling context.drawImage(video, 0, 0) before setting needsupdate=true. This also leaks memory.

EDIT I submitted an issue. See https://github.com/mrdoob/three.js/issues/9440

Answer 1

I'm almost certain this is a Chrome issue.

The issue does not occur in Firefox.

Similar issues concerning GPU Process memory leaks in Chrome have been reported: https://bugs.chromium.org/p/chromium/issues/detail?id=403471 https://bugs.chromium.org/p/chromium/issues/detail?id=470234

I reported this as a new issue: https://bugs.chromium.org/p/chromium/issues/detail?id=634012