I would like to re-compute and display at least 100 cylinders at 30+ frames per second in a THREE.js animation.
Method 1
Elsewhere (e.g. WestLangley, Mr.Doob) it is recommended to create a pool of mesh objects at Initialisation stage and then re-use them during Animation.
I think this would be feasible if cylinder geometries were unchanged across animation frames.
But my cylinders need to change in length from frame to frame.
I think that Scale cannot be used because the objects are not all aligned to one of the principal axes (x, y or z).
Method 2
Create 100 NEW mesh objects every frame.
But this will lead to rapid memory drain unless they are also deleted after rendering each frame...e.g.
for (var iii=1; iii<=10; iii++)
{
if (MyCylinders[iii]) scene.remove (MyCylinders[iii]);
// cylinder
// API: THREE.CylinderGeometry(bottomRadius, topRadius, height, segmentsRadius, segmentsHeight)
cylinder = new THREE.Mesh(new THREE.CylinderGeometry(2, 2, 500 * Math.random(), 100, 100, false), new THREE.MeshBasicMaterial({color: '#880066'}));
cylinder.overdraw = true;
cylinder.rotation.x = Math.PI * 0.5 * Math.random();
cylinder.rotation.y = Math.PI * 0.5 * Math.random();
cylinder.rotation.z = Math.PI * 0.5 * Math.random();
cylinder.position.x = 200*Math.random();
cylinder.position.y = 200* Math.random();
cylinder.position.z = -200* Math.random();
MyCylinders[iii] = cylinder;
scene.add(MyCylinders[iii]);
}
I guess that such frequent creating and deleting will slow the frame rate too much
...as shown in this fiddle http://jsfiddle.net/errp5/5/ which struggles to reach 10fps with only 10 cylinders.
My Question
Is there a better way to do this?
ANSWER
Method 1 is the better way (Pool of re-usable mesh objects) when combined with appropriate use of Scale (as suggested by mrdoob) and Rotation.
Working demo at:- http://jsfiddle.net/KjxZp/2/
Key section of code:-
var desired_cylinder_length = 195 + 5 * Math.random();
//... Loop
for (var iii = 1; iii <= Num_Rays; iii++) {
cylinder = MyCylinders[iii];
//... apply new scale and rotation to cylinder
cylinder.scale.y = desired_cylinder_length;
cylinder.overdraw = true;
cylinder.rotation.x += (0.005) * Math.PI * Math.random();
cylinder.rotation.y += (0.005) * Math.PI * Math.random();
cylinder.rotation.z += (0.005) * Math.PI * Math.random();
MyCylinders[iii] = cylinder;
MyCylinders[iii].geometry.verticesNeedUpdate = true