threejs : error when deleting a Geometry or BufferGeometry in combination with a Sprite/Ortho camera <p>I load some objects using the ctm binary loader in Threejs r69. This returns Mesh objects using a BufferGeometry internally. I need to remove from the scene then delete one of these Meshes, including their material/texture/geometry. According to examples and google, I should use:</p> <pre><code>scene.remove(m_mesh); m_mesh.geometry.dispose(); m_mesh.geometry = null; m_mesh.material.dispose(); m_mesh.material = null; m_mesh = null; </code></pre> <p>This removes the object from the scene, but the screen goes black for a second, and I've got a GL error :</p> <pre><code>Error: WebGL: drawElements: no VBO bound to enabled vertex attrib index 2! </code></pre> <p>Looks like the above sequence (ran in my render() operation, just before drawing the scene) did not clean everything, or at least I still have references to non existing VBOs somewhere.</p> <p>I've spent quite some time debugging the problem and came to the conclusion that this happens only when using an orthographic camera with a Sprite and a Perspective camera, in 2 differents scenes.</p> <p>Basically, I draw a flat background using a Sprite and a dedicated scene, then my 3D scene with Meshes. If I delete a mesh from the 3D scene, then the drawing of the flat background fails. I can't figure out why. Looks like there's a side effect of deleting a Mesh on Sprites, even if attached to different scenes. If I comment the background drawing, then the deletion of my mesh works perfectly.</p> <p>I insert below a reproduction of the problem using the standard threejs distribution. Wait about 5 seconds and you should see some GL errors on the jaavscript console.</p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;title&gt;three.js webgl - geometries&lt;/title&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt; &lt;style&gt; body { font-family: Monospace; background-color: #000; margin: 0px; overflow: hidden; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;script src="build/three.min.js"&gt;&lt;/script&gt; &lt;script src="js/Detector.js"&gt;&lt;/script&gt; &lt;script src="js/libs/stats.min.js"&gt;&lt;/script&gt; &lt;script&gt; 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 &gt; 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 &lt; 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); } &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>Any hints on how to fix this issue?</p> <p>Thank you,</p> <p>Pascal</p>