title: three.js merging geometry with ShaderMaterials
body: <p>I have a project built on a tileset, which I currently map to CubeGeometries via a number of ShaderMaterials.</p>
  
  <p>When the cubes are rendered, there is bleeding and flickering around the edges of the cubes. Also, it seems to be an awfully bad way to do it, performance-wise.</p>
  
  <p>So I looked up THREE.GeometryUtils.merge that apparently merges my cubes to one geometry, vertices and all.</p>
  
  <p>Is it possible to make the merged mesh keep the materials I used on each of the cubes?
  Is there a better way to accomplish what I'm trying to do?</p>
  
  <p><strong>Edit:</strong>
  This is an example of what is not working.</p>
  
  <p><a href="http://jsfiddle.net/CpQ77/3/" rel="nofollow">http://jsfiddle.net/CpQ77/3/</a></p>
  
  <pre><code>var shaderMat1 = new THREE.ShaderMaterial({
      fragmentShader: document.getElementById("red-fragment").innerText,
      vertexShader: document.getElementById("vertex").innerText
  });
  var shaderMat2 = new THREE.ShaderMaterial({
      fragmentShader: document.getElementById("blue-fragment").innerText,
      vertexShader: document.getElementById("vertex").innerText
  });
  
  var cube1 = new THREE.Mesh(new THREE.CubeGeometry(64, 64, 64), new THREE.MeshFaceMaterial([shaderMat1, shaderMat1, shaderMat1, shaderMat1, shaderMat1, shaderMat1]));
  cube1.position.x = 0;
  cube1.position.y = 300;
  
  var cube2 = new THREE.Mesh(new THREE.CubeGeometry(64, 64, 64), new THREE.MeshFaceMaterial([shaderMat2, shaderMat2, shaderMat2, shaderMat2, shaderMat2, shaderMat2]));
  cube2.position.x = 64;
  cube2.position.y = 300;
  
  var geo = new THREE.Geometry();
  THREE.GeometryUtils.merge(geo, cube1);
  THREE.GeometryUtils.merge(geo, cube2);
  
  var mergedMesh = new THREE.Mesh(geo, new THREE.MeshFaceMaterial());
  
  scene.add(mergedMesh);
  </code></pre>
  
  <p>It gives an error saying, "Uncaught TypeError: Cannot read property 'map' of undefined", when trying to use the MeshFaceMaterial as used in a couple of places around the web.</p>
  
  <p>I can't figure out what I'm missing though.</p>
  
  <p><strong>Edit2:</strong>
  One workaround I found was to loop through all the faces of the new geometry, and applying a materialIndex to it before calling geometry.mergeVertices().</p>