Currently working with Aframe 1.0.4 and Three.js 111, I am exploring the performance differences between:
- Whether it is better to have a few entities with a high number of triangles or many entities with fewer triangles each.
Specifically, I am debating whether it would be more efficient to merge the floors in my scene into one large mesh or keep them separate but smaller entities.
In general, from my understanding:
- Having numerous entities may create overhead due to loading multiple gltf-models and repetitive tick operations on components, as well as creating excessive draw calls on the GPU in THREE.js.
- Larger entities might result in longer loading times for gltf-models, potentially heavier raycasting, and possibly more complex transformation management in THREE.js.
Here are some average statistics from my scene:
- There are approximately 40 entities, including simple structures like floors and walls, as well as more detailed furniture items such as sofas and tables.
- A typical shelf consists of around 25K triangles.
- On average, a common floor entity contains about 800 triangles.
With that context, my questions are:
- What generally performs better: having a few entities with many triangles or many entities with few triangles?
- When considering simple entities like floors, is it more efficient to have a few floors with 1K triangles each or a multitude of floors with only 4 triangles?
- Are the assumptions I mentioned earlier accurate?
I am interested in understanding both the performance implications on the THREE.js/GPU side (loading time, draw calls) and also on the Aframe side (raycasting, component overhead). Thank you.