How to optimize rendering of many sphereGeometry i

Question

I'd like to optimize the rendering of sphereGeometry in three.js, since it becomes bottleneck in my program. The javascript program is shown as follows:

var sphereThree = [];
for(var idSphere = 0; idSphere < numSphere; idSphere++){
    var sphereGeometry = new THREE.SphereGeometry(1.0);
    var sphereMaterial = new THREE.MeshLambertMaterial({color: 'rgb(255, 0, 0)'});

    sphereThree[idSphere] = new THREE.Mesh(sphereGeometry, sphereMaterial);

    sphereThree[idSphere].position.x = x[idSphere];
    sphereThree[idSphere].position.y = y[idSphere];
    sphereThree[idSphere].position.z = z[idSphere];

    scene.add(sphereThree[idSphere]);
}

As mentioned in the folloing links:
- Animateing a Million Letters Using Three.js
- Optimizing Three.js Performance: Simulating Tens of Thousands of Independent Moving Objects
they pointed out that we should not add object individually, and better add same kind of objects at the same time, for the optimization. However, since I'm new in this field, I have no idea how to code this optimization, when using SphereGeometry.

If somebody knows how to code these with using SphereGeometry, or somebody who knows a efficient method to render many (10,000 or more) spheres, would you teach us?

Thanks!

Answer 1

If appearance of the spheres does not matter a lot, you can also set widthSegments and heightSegments parameters to values lower than the defaults. See documentation here.

Essentially do something like:

var sphereGeometry = new THREE.SphereGeometry(1.0, 5, 4);

Update I forgot to mention that this should be done once you try mrdoob's suggestion and you want to optimize further. The speedup is not significant.

Answer 2

You can just reuse the geometry and material like this:

var sphereGeometry = new THREE.SphereGeometry(1.0);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 'rgb(255, 0, 0)'});

var sphereThree = [];
for(var idSphere = 0; idSphere < numSphere; idSphere++){
    sphereThree[idSphere] = new THREE.Mesh(sphereGeometry, sphereMaterial);

    sphereThree[idSphere].position.x = x[idSphere];
    sphereThree[idSphere].position.y = y[idSphere];
    sphereThree[idSphere].position.z = z[idSphere];

    scene.add(sphereThree[idSphere]);
}