title: Improving the performance of animated sprites in three.js
body: <p>Right now I'm working on an online game and have decided to use webgl rather than HTML5's canvas for performance reasons. I'm using the three.js framework and my intention is to have moving animated sprites. The sprites themselves are placed on spritesheets and I use the UVOffset and UVScale to use the right art and switch the Sprite's art during time passing by. I was wondering whether there's a way to improve the performance of this code, because right now it starts to slow down at around 300 "players" on the field at the same time.</p>
  
  <p>Regards</p>
  
  <p>The following is the most important part of my code:</p>
  
  <pre><code>var image = THREE.ImageUtils.loadTexture( "img/idlew.png" );
  
    function addPlayer(){
      var mesh = new THREE.Sprite({map:image});//, affectedByDistance: false, useScreenCoordinates: false});
      images.push(mesh);
      mesh.position.set(Math.floor(Math.random() * 500), Math.floor(Math.random() * 500), 10);
      scene.add(mesh);
      mesh.uvScale.x = 96/1152;
      mesh.scale.x = 0.1;
      mesh.scale.y = 0.1;
    }
  
  
  var imgBackground  = new THREE.MeshLambertMaterial({
        map:THREE.ImageUtils.loadTexture('img/grass.jpg')
    });
  
  
     var background = new THREE.Mesh(new THREE.PlaneGeometry(1000, 1000),imgBackground);
  
  
    scene.add(background);
  
  
  
    scene.add(camera);
  camera.rotation.x = -(Math.PI/2);
  scene.add(new THREE.AmbientLight(0xFFFFFF));
  
  addPlayer();
  
    renderer.render(scene, camera);
    var moveUp = false;
    tick();
    var ticker = 0;
    var usedOne = 0;
  
    function tick(){
      ticker++;
      if(ticker%10==0){
        for (var i = 0; i &lt; images.length; i++) {
          images[i].uvOffset.x = usedOne * 0.0835;
        };
          usedOne++;
          if(usedOne == 12) usedOne = 0;
          addPlayer();
          addPlayer();
          addPlayer();
          console.log(images.length);
      }
      requestAnimationFrame( tick );
  
        renderer.render(scene, camera);
    }
  </code></pre>