Upon creating a cube using BoxGeometry and a sphere using SphereGeometry (with both objects spinning around themselves), I noticed that the sphere takes longer to render compared to the cube when increasing the number of objects. For instance:
500 cubes achieve 60 FPS
500 spheres achieve 45 FPS
despite both objects having the same 12 faces.
This raises the question: why is there such a difference?
for(var i = 0; i <amount ; i++){
posX = posX + size;
if(i%20 == 0){
posX = -105;
posZ = posZ + size;
}
if(i%500 == 0){
posX = -105;
posZ = -500;
posY = posY + size;
} // To fit for view, five hundred objects were stacked per level.
sphereGeo = new THREE.SphereGeometry(radius, widthSegments, heightSegments);
sphereMat = new THREE.MeshPhongMaterial({ color: 0x219621, specular: 0xFFE7BA, shininess: 5, opacity: 1, transparent: true});
sphereMesh = new THREE.Mesh(sphereGeo, sphereMat);
sphereMesh.rotation.x =0;
sphereMesh.rotation.y =0;
sphereMesh.rotation.z =0;
sphereMesh.position.x = posX;
sphereMesh.position.y = posY;
sphereMesh.position.z = posZ;
sphereMesh.matrixAutoUpdate = false;
sphereMesh.updateMatrix();
sphereMesh.address = i;
countID = i;
objectsID[countID] = sphereMesh;
addList[sphereMesh.address] = objectsID[countID];
scene.add(objectsID[countID]);
}
function render()
{
var add_len = addList.length;
for(var i=0; i< add_len; i++ )
{
addList[i].rotation.y += 1;
addList[i].matrixAutoUpdate = false;
addList[i].updateMatrix();
}
renderer.render( scene, camera );
requestAnimationFrame( render );
}
Here are visuals for
500 spheres
500 cubes
I set radius = 25, WidthSegments = 3, and HeightSegments = 2 . With 12 faces, the output does not resemble a spherical shape (3 and 2 being the minimum values defined in three.js Docs for segment)
The method used for creating cubes also results in each cube having 12 faces. Both test cases were conducted in the same environment.
I am curious about the performance disparity between the two shapes. Could this be attributed to the internal structure of BoxGeometry and SphereGeometry?