title: Improving performance with Three.js
body: <p>I am currently writing my first Three.js / WebGL application and it runs very well on my PC (Chrome). Sadly, on many other PCs, the framerate often drops bellow 30 frames per second.</p>
  
  <p>Since the application actually isn't to complex, I wanted to ask for some tips related to the application to improve the performance.
  A version of the app can be found here:</p>
  
  <p>www.wrodewald.de/StackOverflowExample/</p>
  
  <p>The application contains a dynamic (morphing) plane using 64² vertices. A matrix is used to store a static heightmap and a wavemap. The wavemap is updated every frame to recalculate itself, some filters are used to "even out" every vertex compared to their neightbors. 
  So every frame the plane has to be updated (colors and vertex position) which could be a reason for the performance problem</p>
  
  <p>The second object (rhombus) shouldn't be a problem, static, moving around a bit but nothing special.</p>
  
  <p>There are three lights (ambient, directional, spherical), no shadows, a tilt shift shader and a vignette shader. </p>
  
  <p>Here are functions which are called per frame:</p>
  
  <pre class="lang-js prettyprint-override"><code>var render = function() {
      requestAnimationFrame( render );
      var time = clock.getDelta();
  
      world.updateWorld(time);
      diamond.rotate(time);
      diamond.update(time);
      control.updateCamera(camera, time);
      composer.render();      
      stats.update();
  }
  </code></pre>
  
  <p><strong>this is what <code>world.updateWorld(time)</code> does</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>//in world.updateWorld(time) where
  // accmap: stores acceleration and wavemap stores position
  // this.mapSize stores the size of the plane in vertices (64)
  
  // UPDATE ACCELERATION MAP
  for(var iX = 1; iX &lt; (this.mapSize-1); iX++) {
      for(var iY = 1; iY &lt; (this.mapSize-1); iY++) {
          accmap[iX][iY] -=  dT * (wavemap[iX][iY]) * Math.abs(wavemap[iX][iY]);
      }   
  }
  
  
  // SMOOTH ACCELERATION MAP
  for(var iX = 1; iX &lt; (this.mapSize-1); iX++) {
      for(var iY = 1; iY &lt; (this.mapSize-1); iY++) {
          tempmap[iX][iY] =     accmap[iX-1][iY-1]    * 0.0625
                              + accmap[iX-1][iY  ]    * 0.125
                              + accmap[iX-1][iY+1]    * 0.0625
                              + accmap[iX  ][iY-1]    * 0.125
                              + accmap[iX  ][iY  ]    * 0.25
                              + accmap[iX  ][iY+1]    * 0.125
                              + accmap[iX+1][iY-1]    * 0.0625
                              + accmap[iX+1][iY  ]    * 0.125
                              + accmap[iX+1][iY+1]    * 0.0625;
  
          accmap[iX][iY] = tempmap[iX][iY];
      }
  }
  
  
  // UPDATE WAVE MAP
  for(var iX = 1; iX &lt; (this.mapSize-1); iX++) {
      for(var iY = 1; iY &lt; (this.mapSize-1); iY++) {
          wavemap[iX][iY] += dT * accmap[iX][iY];
      }   
  }
  
  for(var i = 0; i &lt; this.mapSize; i++) {
      for(var k = 0; k &lt; this.mapSize; k++) {
          geometry.vertices[ i * this.mapSize + k ].y =  wavemap[i][k] + heightmap[i][k];
      }   
  }
  
  for(var i = 0; i &lt; geometry.faces.length; i++) {
  
      var vertexA = geometry.vertices[geometry.faces[i].a];
      var vertexB = geometry.vertices[geometry.faces[i].b];
      var vertexC = geometry.vertices[geometry.faces[i].c];
  
      var val = (vertexA.y + vertexB.y + vertexC.y) / 3.0;
      val = (val / 200.) + 0.5;
  
      geometry.faces[i].color.r = val;
      geometry.faces[i].color.g = val;
      geometry.faces[i].color.b = val;
  }
  
  geometry.colorsNeedUpdate = true;
  geometry.verticesNeedUpdate = true;
  </code></pre>
  
  <p><strong>These are the "diamond"-functions</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>this.rotate = function(dT) {
      counter += 0.5 * dT;
      counter % 1;
      var x = 0.0025 * (Math.sin((counter) * 2 * Math.PI));
      var y = 0.0025 * (Math.cos((counter) * 2 * Math.PI));
      this.mesh.rotateOnAxis(new THREE.Vector3(1,0,0), x);
      this.mesh.rotateOnAxis(new THREE.Vector3(0,0,1), y);
  }
  
  this.update = function(dT) {
      for(var i = 0; i &lt; geometry.faces.length; i++) {    
          geometry.faces[i].color.lerp(color, dT*(0.9));
      }
  
      geometry.colorsNeedUpdate = true;
  }
  </code></pre>
  
  <p>Do you spot any reason for the framerate to be so inconsistent? </p>