Memory leak with Canvas and streaming video

[ronsykes]

Using Chrome 16.

First, I create a texture object from a canvas that is loaded from a MJPEG stream and store it into a custom object within a function that I call every 1/3 of a second. I am constantly refreshing my canvas with a streaming video.

var ctx = canvas.getContext('2d');
ctx.drawImage(img, 0, 0);
var texture =  new THREE.Texture(canvas);
streamObject.texture = texture;

Then, I execute another function to display that texture by retrieving it from the custom object and setting the material's map to that texture before I call my render function.

vCam.material.map = textureTemp;
render(vCam);

The problem however is that my memory climbs through the roof If I do not force a garbage collection with:

                try {
            window.gc();
                } catch(e) {
                    console.log("Garbage Collection is not available for this browser type.");
                }

I would like to avoid forcing the garbage collection.
Is it possible that the texture objects are not being gc'd creating my memory to climb?

[mrdoob]

Have you tried directly using new THREE.Texture(video) instead?

[Ikspay]

We have the same problem here.

We do some processing on each video frame so we have to rely on a canvas to create our texture.
Unfortunately, the memory is leaking until the navigator crashes.

Same behaviour on Firefox and Chrome.

Any update on this issue ?

[Ikspay]

Otherwise, I can confirm this problem does not occur when using a video object instead of a canvas.

But, as I said, in our case we really need to use a canvas.

[mrdoob]

Otherwise, I can confirm this problem does not occur when using a video object instead of a canvas.
But, as I said, in our case we really need to use a canvas.

Well, that alone makes me think that the leak is in your own code.

[Ikspay]

Here is a simple code which makes this problem occur... What am I doing wrong here ?

        <div id="container"></div>
        <canvas id="test" width="100" height="100"></canvas>

        <script src="../build/Three.js"></script>

        <script>
            var changed = false;
            var camera, scene, renderer, mesh, material;

            var windowHalfX = window.innerWidth / 2;
            var windowHalfY = window.innerHeight / 2;

            init();
            animate();

            function init() {
                var container = document.getElementById( 'container' );
                var test = document.getElementById( 'test' );

                var ctx = document.getElementById('test').getContext('2d');

                ctx.fillStyle = 'rgb(255, 0, 0)';
                ctx.fillRect(0,0,100,100);

                camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
                camera.position.set( 0, 0, 100 );

                scene = new THREE.Scene();

                scene.add( camera );

                scene.add( new THREE.AmbientLight( 0x00020 ) );

                geometry = new THREE.CubeGeometry( 20, 20, 20 );

                mesh = new THREE.Mesh( geometry, material );
                scene.add( mesh );

                renderer = new THREE.CanvasRenderer();
                renderer.setSize( window.innerWidth, window.innerHeight );
                container.appendChild( renderer.domElement );
            }

            function animate() {
                requestAnimationFrame( animate );
                render();
            }

            function render() {
                mesh.material = new THREE.MeshBasicMaterial( { map: new THREE.Texture(test) } );

                renderer.render( scene, camera );
            }

        </script>

[mrdoob]

mesh.material = new THREE.MeshBasicMaterial( { map: new THREE.Texture(test) } );

Thats wrong. You should never create new objects in a render loop. You should be able to do this inside init().