title: My WebGL animation is slow despite requestAnimationFrame()
body: <p>I'm trying to create webgl animation for my website background, inspired by "threejs - Cloud exemple" (<a href="http://mrdoob.com/lab/javascript/webgl/clouds/" rel="nofollow">http://mrdoob.com/lab/javascript/webgl/clouds/</a>). On my computer it seems rather well... But for some PC it's very slow. </p>
  
  <p>Is there a way to further optimize my code, and detect if the graphics card does not support webgl ?</p>
  
  <p>My animation (in background) : <a href="http://wabeo.fr/?theme=auriga-7" rel="nofollow">http://wabeo.fr/?theme=auriga-7</a></p>
  
  <p>My code :</p>
  
  <pre><code>var container = document.getElementById('container');
  var wi       = window.innerWidth;
  var he       = window.innerHeight;
  var renderer  = new THREE.WebGLRenderer({
  antialias: true
  });
  var scene    = new THREE.Scene();
  var camera   = new THREE.PerspectiveCamera(75,wi/he,1,10000);
  var distance = 500;
  var geometry2 = new THREE.Geometry();
  
  renderer.setSize(wi ,he);
  container.appendChild(renderer.domElement);
  scene.add(camera);
  
  var texture = THREE.ImageUtils.loadTexture( '/wp-content/themes/auriga-7/i/cloud.png' );
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  
  var m = new THREE.MeshBasicMaterial( {color:0x000000} );
  var material = new THREE.MeshBasicMaterial( { map: texture,transparent: true} );
  var plane = new THREE.PlaneGeometry( 400,400,4,4 );
  
  
  for ( ix = 0; ix &lt;45; ix++ ) {
      item = new THREE.Mesh( plane, m );
      item.position.x = ((Math.random()-0.5)*(Math.random() * wi/2) /4)*Math.random()*10;
      item.position.y = ((Math.random()-0.5)*(Math.random() * he/2) /4)*Math.random()*10;
      item.position.z = ix*10-50;
      item.rotation.z = Math.random() *250;
      item.scale.x = item.scale.y = Math.random() * Math.random() * 2 + 0.5;
  
      THREE.GeometryUtils.merge(geometry2,item);
  }
  
  mesh = new THREE.Mesh( geometry2, material );
  scene.add(mesh);
  
  camera.position.z = distance;
  camera.lookAt(scene.position);
  renderer.sortObjects = false;
  
  
  // create a point light
  var pointLight =
    new THREE.PointLight(0xFFFFFF);
  
  // set its position
  pointLight.position.x = 10;
  pointLight.position.y = 50;
  pointLight.position.z = 130;
  
  // add to the scene
  scene.add(pointLight);
  requestAnimationFrame(wanarender);
  
  document.addEventListener('mousemove',onMouseMove, false);
  window.addEventListener('resize',onResizeMyFuckinBrowser,false);
  function onMouseMove(event){
  
      var mouseX = event.clientX - wi/2;
      var mouseY = event.clientY - he/2;
  
      camera.position.x = (mouseX - camera.position.x) * 0.02;
      camera.position.y = (-mouseY - camera.position.y) * 0.02;
      camera.position.z = distance;
      camera.lookAt(scene.position);
  }
  function onResizeMyFuckinBrowser(){
      var wi       = window.innerWidth;
      var he       = window.innerHeight;
      renderer.setSize(wi ,he);
  }
  function wanarender(){
      requestAnimationFrame(wanarender);
      renderer.render(scene, camera);
  }
  </code></pre>
  
  <p>Thanks for your help :-)</p>