多次重繪場景後性能下降，內存似乎不錯

Question

我有一些不好的問題，在動態重繪場景多次後，幀率會大幅下降，我希望有人能夠提供幫助。在之前的三個版本中，我注意到內存泄漏，這在實際版本中似乎很好。我不知道爲什麼如果內存保持良好並且CPU性能可以下降。

我的應用程序由ajax調用觸發完成，它在不同的div容器中繪製canvasas。通過在新容器中初始化webgl，舊容器得到清理。

基本功能如下面的代碼。如果你按下按鈕可以說20次，你會看到幀率下降：

http://jsfiddle.net/crizzis/YuJj6/

<input type="button" value="activate rendering in Div1" onclick="init_webgl(1);"></input> 
<div id="webgl_container_1" onclick="init_webgl(1);" style="top:0px; height:300px; border:1px solid blue"></div>  
<input type="button" value="activate rendering in Div2" onclick="init_webgl(2);"></input> 
<div id="webgl_container_2" onclick="init_webgl(2);"style="top:500px;height:300px; border:1px solid red"></div> 

<script type="text/javascript"> 
     var camera, fov=70, controls, scene, projector, renderer, container; 
     var time=0; 
     //init_webgl(1); 

     function init_webgl(styleId) { 

      console.log('writing webgl canvas to div with style Id: webgl_container_'+styleId); 

      if (scene!=null){ 
       destroyWebGl(); 
      } 

      container = document.getElementById('webgl_container_'+styleId);  

      scene = new THREE.Scene(); 

      camera = new THREE.PerspectiveCamera(fov, container.clientWidth/container.clientHeight, 1, 10000); 
      camera.setViewOffset(container.clientWidth, container.clientHeight, 0, 0, container.clientWidth, container.clientHeight); 
      camera.position.z = 350;     
      scene.add(camera);    

      projector = new THREE.Projector(); 

      renderer = new THREE.WebGLRenderer({ antialias: true }); 
      renderer.setSize(container.clientWidth, container.clientHeight); 

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

      parent = new THREE.Object3D(); 
      scene.add(parent);       

      container.appendChild(renderer.domElement); 

      console.log('webgl initialized'); 
      init_renderObjects(); 
     }    

     function init_renderObjects(){     
      for (var x = 0; x < 400; x++){ 
       var cube = new THREE.Mesh( 
       new THREE.CubeGeometry(50, 50, 50), 
       new THREE.MeshPhongMaterial({ ambient: 0xffffff, color: 0xffffff, opacity: 0.58,specular: 0xffffff, shininess: 40, shading: THREE.SmoothShading, transparent: true, wireframe: false }) 
       );  
       cube.position.x = 100*x; 
       parent.add(cube); 
      }     
      animate(); 
     } 

     function animate() { 
      requestAnimationFrame(animate); 
      timedelta=Date.now()-time; 
      time = Date.now();   

      var children = parent.children; 
      for(var i = children.length-1;i>=0;i--){ 
       var child = children[i]; 
       child.rotation.y = child.rotation.y+timedelta*0.005; 
      };    
      render(); 
     }   

     function render() {    
      if (renderer!=null)renderer.render(scene, camera);     
     } 

     function destroyWebGl(){    
      console.log("destroyWebGl"); 
      console.log("before programs"+ renderer.info.memory.programs); 
      console.log("before geometries"+ renderer.info.memory.geometries); 
      console.log("before textures"+ renderer.info.memory.textures);    

      var children = parent.children; 
      for(var i = children.length-1;i>=0;i--){ 
       var child = children[i]; 
       child.geometry.dispose(); 
       child.material.dispose(); 
       parent.remove(child); 
      }; 

      scene.remove(parent); 
      //renderer.deallocateObject(parent); 

      camera = null; 
      controls= null; 
      scene=null; 
      projector=null; 
      parent=null;      

      container.removeChild(renderer.domElement);  
      container=null; 

      console.log("after programs:" + renderer.info.memory.programs); 
      console.log("after geometries" + renderer.info.memory.geometries); 
      console.log("after textures" + renderer.info.memory.textures);    

      renderer=null; 
      console.log('finished destroy'); 
     }    
     </script> 

Answer 1

你init_webgl函數調用animate()這意味着動畫循環不會被清除，這是每次按下按鈕時都會重新初始化。點擊20次後，您正在運行20個動畫循環。

您只需在程序啓動時調用animate()一次，然後將其從按鈕點擊代碼中移除。