title: Improving three.js performance
body: <p>I am visualizing biological data (neurons) in my website.
  I have drawn the neuron which consists of a considerable number of spheres and cylinders. The problem is that the scene is really slow (The auto-rotating and controlling the scene with the mouse).
  In desktop applications, I used to use DisplayList in OpenGL which improve the performance in a great way. Does THREE.js have an equivalent to the displaylist? or does it have what raise its performance?</p>
  
  <p>This is my code:</p>
  
  <pre><code>&lt;script&gt;
      var container, stats;
      var camera, scene, renderer;
      var neuron, neuron_center;
  
      var sphere_material_soma = new THREE.MeshPhongMaterial({
      wireframe: false,
      color: 0x0000ff,
      specular: 0x555555,
      shininess: 30});
  
      var sphere_material_bif = new THREE.MeshPhongMaterial({
      wireframe: false,
      color: 0x00ff00,
      specular: 0x555555,
      shininess: 30});
  
      var sphere_material_tip = new THREE.MeshPhongMaterial({
      wireframe: false,
      color: 0xffff00,
      specular: 0x555555,
      shininess: 30});
  
      var sphere_material_normal = new THREE.MeshPhongMaterial({color: 0xff0000, specular: 0x555555, shininess: 30});     
  
  
      init();
      animate();
  
      function init() {
  
          container = document.getElementById('visualization');
  
          neuron_center = new THREE.Vector3({{ neuron.center.x }}, {{ neuron.center.y }}, {{ neuron.center.z }});
  
          camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 100000);
          camera.position.z = neuron_center.z + 200;
  
          scene = new THREE.Scene();
          neuron = new THREE.Group();
  
  
          draw_neuron();
  
          scene.add(neuron);
  
          var dirLight = new THREE.DirectionalLight(0xffffff, 1);
          dirLight.position.set(camera.position.x, camera.position.y, camera.position.z);
          scene.add(dirLight);
  
          renderer = new THREE.CanvasRenderer();
          renderer.setClearColor(0xbbbbbb);
          renderer.setPixelRatio(960 / 720);
          renderer.setSize(960, 720);
  
          stats = new Stats();
  
          container.appendChild(renderer.domElement);
          container.appendChild(stats.dom);    
  
      } 
  
      function animate() {
          requestAnimationFrame(animate);
          stats.begin();
          render();
          stats.end();
      }
  
      function render() { 
  
          renderer.render(scene, camera);
      }      
  
  
      function draw_neuron() {
  
          {% for link in links %}
  
              var n_position = new THREE.Vector3({{ link.0.position.x }}-neuron_center.x,
                      {{ link.0.position.y }}-neuron_center.y, {{ link.0.position.z }}-neuron_center.z);
              var p_position = new THREE.Vector3({{ link.1.position.x }}-neuron_center.x,
                      {{ link.1.position.y }}-neuron_center.y, {{ link.1.position.z }}-neuron_center.z);                      
  
              var spheregeometry = new THREE.SphereGeometry({{ link.0.radius }}, 10, 10);
              var sphere = new THREE.Mesh(spheregeometry, sphere_material_soma);
              sphere.position.set(n_position.x, n_position.y, n_position.z);
              neuron.add(sphere);
  
             {%  if link.0.type.id == 5 %}
              sphere = new THREE.Mesh(spheregeometry, sphere_material_soma);
             {% elif link.0.type.id == 6 %}
              sphere = new THREE.Mesh(spheregeometry, sphere_material_bif);
             {% elif link.0.type.id == 7 %}
              sphere = new THREE.Mesh(spheregeometry, sphere_material_tip);
             {% else %}
              sphere = new THREE.Mesh(spheregeometry, sphere_material_normal);
             {% endif %}
  
              neuron.add(c);
  
          {% endfor %}
  
      }
  
      function draw_cylinder(start, end, radius_start, radius_end, material) {
          var direction = new THREE.Vector3();
          direction.subVectors(end, start);
  
          var mid_x = start.x + end.x;
          var mid_y = start.y + end.y;
          var mid_z = start.z + end.z;
          var mid_vector = new THREE.Vector3(mid_x, mid_y, mid_z);
  
  
          var geometry = new THREE.CylinderGeometry(radius_start, radius_end, direction.length(), 10, 10);
          var mesh = new THREE.Mesh(geometry, material);
          var axis = new THREE.Vector3(0, 1, 0);
          mesh.quaternion.setFromUnitVectors(axis, direction.clone().normalize());
          var temp = mesh.position;
  
          mesh.position.copy(mid_vector.clone().multiplyScalar(0.5));
  
          return mesh;
      }
  
  &lt;/script&gt;
  </code></pre>
  
  <p>I haven't included the complete code because it is big, so I have excluded the variables and the events handlers since they only deal with teh mouse and some drawing options.</p>
  
  <p>Thank you very much in advance.</p>