Is it possible or not to share a geometry among many meshes and apply a different shaderMaterial for each?

Question

I instantiate one PlaneGeometry, then I instantiate 200 meshes sharing this geometry and with their own instance of a given shaderMaterial. Here is a simplified version of the code :

...
var geom = new THREE.PlaneGeometry(10,10,2,2);
var meshes = [];
var material=null;

for (var i=0 ; i<200 ; i++)
{
   var elevations = getElevations(i); //return an array of 9 values, values are different for each mesh
   var mat = new THREE.ShaderMaterial({
               vertexShader : vsAlti, //process displacement on y coordinate of the vertex
               fragmentShader : fsAlti,
               attributes : { elevation :  { type : 'f',value : elevations }}
            };
   meshes.push(new THREE.Mesh(geometry , mat));
}
...

Although the array value of the elevation attributes is different for each mesh, only one is applied for all of them. It looks like only one instance of shaderMaterial is applied to all the meshes. I would rather expect that for each mesh the shader with the matching attribute elevation values would be applied.

Here is the jsFiddle illustrating the problem : http://jsfiddle.net/McNulty/L584j/119/

Answer 1

You need to clone() the geometry before you use it.

Here is a fiddle with the solution http://jsfiddle.net/ekwk2nxf/