In my THREE.js animation, I am striving to render a minimum of 100 cylinders at a speed exceeding 30 frames per second.
Approach 1
Some experts suggest creating a pool of mesh objects during Initialization and reusing them throughout the Animation process. However, this might not work for me as my cylinder geometries vary in length between frames, making it challenging to use Scale due to their non-alignment with principal axes (x, y, or z).
Approach 2
An alternative method is to generate 100 NEW mesh objects every frame. Nonetheless, if these objects are not deleted after rendering each frame, there could be a significant memory drain issue.
for (var iii=1; iii<=10; iii++)
{
if (MyCylinders[iii]) scene.remove(MyCylinders[iii]);
// Creating new cylinder
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]);
}
Frequent creation and deletion as shown in this example http://jsfiddle.net/errp5/5/ can significantly impact the frame rate.
Query
Is there a better approach to achieve this goal?
RESPONSE
Method 1 combined with judicious use of Scale and Rotation is deemed more effective for creating a pool of reusable mesh objects.
Refer to the working demo here:- http://jsfiddle.net/KjxZp/2/
Snippet 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