Question

我正在从video标记创建THREE.js（r78）纹理，并通过在needsupdate=true中设置requestanimationframe来每秒更新纹理60次。我的问题是我在Chrome任务管理器中看到内存泄漏。具体而言，对于内存（不是 GPU内存）列下的 GPU流程任务，该值会随着时间的推移而增加。

视频文件为MP4，H.264,60 fps。我的代码发布在下面。在github.com上提交新的THREE.js问题之前，我想在stackoverflow.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);
    }

顺便说一句，我还尝试从canvas代码创建纹理，并在设置context.drawImage(video, 0, 0)之前调用needsupdate=true来更新其上下文。这也会泄漏记忆。

修改我提交了一个问题。见https://github.com/mrdoob/three.js/issues/9440

Answer 1

我几乎可以肯定这是Chrome问题。

Firefox中不会出现此问题。

有关Chrome中GPU进程内存泄漏的类似问题已有报道： https://bugs.chromium.org/p/chromium/issues/detail?id=403471 https://bugs.chromium.org/p/chromium/issues/detail?id=470234

我将此报告为新问题： https://bugs.chromium.org/p/chromium/issues/detail?id=634012

视频标签的纹理泄漏内存

1 个答案: