Deleting a Mesh in a scene has side effects on objects in another scene? #6428

pognibene · 2015-04-18T15:49:57Z

Hi,

I meet a strange issue when trying to delete a BufferGeometry. I remove it from my scene then call dispose() on the texture, material, and geometry.
This works fine as long as I have s single scene with a perspective camera and only Geometries.
But if I render a second scene with an orthographic camera and a Sprite, the Sprite rendering fails if I delete a Mesh geometry, with a GL error

Error: WebGL: drawElements: no VBO bound to enabled vertex attrib index 2!

I've written a small reproduction for the problem (code below, needs only the threejs sdk). Wait about 5 seconds and it deletes the Mesh, and this will result in a failure when rendering the Sprite.
If I comment the rendering of the background scene, no error.

    <!DOCTYPE html>
    <html lang="en">

    <head>
        <title>three.js webgl - geometries</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <style>
            body {
                font-family: Monospace;
                background-color: #000;
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>

    <body>

        <script src="build/three.min.js"></script>
        <script src="js/Detector.js"></script>
        <script src="js/libs/stats.min.js"></script>

        <script>
            if (!Detector.webgl) Detector.addGetWebGLMessage();

            var container, stats;

            var camera, scene, renderer;
            frame_count = 0;

            init();
            animate();

            function init() {

                container = document.createElement('div');
                document.body.appendChild(container);

                camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 2000);
                camera.position.y = 400;

                // I need a second camera for my 2D sprite (used as a background)
                // must use another texture so that it's not destroyed when removing the first object
                cameraOrtho = new THREE.OrthographicCamera(window.innerWidth / -2,
                    window.innerWidth / 2,
                    window.innerHeight / 2,
                    window.innerHeight / -2,
                    1, 10);

                cameraOrtho.position.z = 10;
                cameraOrtho.position.y = 400;
                sceneBackground = new THREE.Scene();

                var map1 = THREE.ImageUtils.loadTexture('textures/disturb.jpg');
                var material1 = new THREE.SpriteMaterial({
                    map: map1
                });
                var spriteBackground = new THREE.Sprite(material1);
                spriteBackground.scale.set(window.innerWidth, window.innerHeight, 1);

                spriteBackground.position.set(window.innerWidth / 2,
                    window.innerHeight / 2);
                sceneBackground.add(spriteBackground);

                scene = new THREE.Scene();

                var light;
                my_object = null;

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

                light = new THREE.DirectionalLight(0xffffff);
                light.position.set(0, 1, 0);
                scene.add(light);

                var map = THREE.ImageUtils.loadTexture('textures/UV_Grid_Sm.jpg');
                map.wrapS = map.wrapT = THREE.RepeatWrapping;
                map.anisotropy = 16;

                var material = new THREE.MeshLambertMaterial({
                    map: map,
                    side: THREE.DoubleSide
                });

                // one object is enough to demonstrate

                // can't reproduce the problem with a standard SphereGeometry
                // try to convert it to a BufferGeometry
                var sphereGeometry = new THREE.SphereGeometry(75, 20, 10);
                var bufferGeometry = new THREE.BufferGeometry().fromGeometry(sphereGeometry);

                my_object = new THREE.Mesh(bufferGeometry, material);
                my_object.position.set(-400, 0, 200);
                scene.add(my_object);

                renderer = new THREE.WebGLRenderer({
                    antialias: true
                });
                renderer.setPixelRatio(window.devicePixelRatio);
                renderer.setSize(window.innerWidth, window.innerHeight);
                renderer.autoClear = false;
                renderer.autoClearDepth = false;

                container.appendChild(renderer.domElement);

                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.top = '0px';
                container.appendChild(stats.domElement);

                window.addEventListener('resize', onWindowResize, false);
            }

            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;
                camera.updateProjectionMatrix();

                renderer.setSize(window.innerWidth, window.innerHeight);

            }

            //

            function animate() {

                requestAnimationFrame(animate);

                render();
                stats.update();

            }

            function render() {
                frame_count++;

                var timer = Date.now() * 0.0001;

                camera.position.x = Math.cos(timer) * 800;
                camera.position.z = Math.sin(timer) * 800;

                camera.lookAt(scene.position);


                //after a few frames I want to destroy completely the object
                //means remove from the scene, remove texture, material, geometry
                //note that here it's a Geometry, not a BufferGeometry
                //may be different

                if (frame_count > 60 * 5) {
                    if (my_object != null) {

                        console.log("destroy object buffer");
                        scene.remove(my_object);
                        my_object.material.map.dispose();
                        my_object.material.dispose();
                        my_object.geometry.dispose();
                        my_object = null;
                    }
                }

                for (var i = 0, l = scene.children.length; i < l; i++) {

                    var object = scene.children[i];

                    object.rotation.x = timer * 5;
                    object.rotation.y = timer * 2.5;

                }

                renderer.render(sceneBackground, cameraOrtho);
                renderer.clearDepth();
                renderer.render(scene, camera);

            }
        </script>

    </body>

    </html>

dubejf · 2015-04-18T16:54:03Z

Same symptoms as #6361. You should try with r72dev.

pognibene · 2015-04-19T07:04:42Z

Hi,

Thank you for your advice. Sorry for not noticing that there was already a bug present for this issue.
Tried r72dev : still have the same problem :-(

Pascal

dubejf · 2015-04-19T14:23:39Z

The build directory for the dev branch in git has not been updated in a while and does not include the fix. You should run the build command (instructions on the wiki) in your local copy. I'm confident that it will work :)

dubejf · 2015-05-21T18:02:35Z

Now that the build has been updated on the dev branch, I've created a fiddle with the original submission using a CDN do demonstrate that the issue is resolved:

r71: http://jsfiddle.net/zdun68hw/ (after a few seconds, an error appears in the console).
r72dev: http://jsfiddle.net/bzn1opwp/ (no errors)

The issue can be closed.

mrdoob · 2015-05-22T01:27:45Z

Yay!

mrdoob added the Bug label Apr 21, 2015

mrdoob closed this as completed May 22, 2015

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Deleting a Mesh in a scene has side effects on objects in another scene? #6428

Deleting a Mesh in a scene has side effects on objects in another scene? #6428

pognibene commented Apr 18, 2015

dubejf commented Apr 18, 2015

pognibene commented Apr 19, 2015

dubejf commented Apr 19, 2015

dubejf commented May 21, 2015

mrdoob commented May 22, 2015

Deleting a Mesh in a scene has side effects on objects in another scene? #6428

Deleting a Mesh in a scene has side effects on objects in another scene? #6428

Comments

pognibene commented Apr 18, 2015

dubejf commented Apr 18, 2015

pognibene commented Apr 19, 2015

dubejf commented Apr 19, 2015

dubejf commented May 21, 2015

mrdoob commented May 22, 2015