来自视频标签的纹理泄漏内存答案

【问题标题】：Texture from video tag leaks memory来自视频标签的纹理泄漏内存
【发布时间】：2016-07-27 18:53:15
【问题描述】：

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

视频文件为 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 标记创建纹理，并通过在设置needsupdate=true 之前调用context.drawImage(video, 0, 0) 来更新它的上下文。这也会泄漏内存。

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

【问题讨论】：

你能不能试试webglinspector来检查加载后图片是否保留。
@Gero3，在纹理选项卡中（我第一次使用 WebGL 检查器）列出的唯一对象是我的电影文件。没有其他图片。
你用的是什么浏览器？？
我还使用我的替代代码进行了检查，该代码将视频帧绘制到画布上。同样的，在纹理选项卡中只有一个纹理，每次单击捕获时都会更新。
你试过用firefox了吗？？

标签： javascript three.js html5-video

【解决方案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

【讨论】：