We utilize a single geometry that is attached to every mesh within our scene.
var geometry = new three.PlaneGeometry(1, 1, 1, 1),
Each object has a texture that is generated and cached to form a new material and a mesh for the object.
this.material = new three.MeshLambertMaterial({
transparent: true,
emissive: 0xffffff
});
// Access the cached texture
this.material.map = this.getTexture(this.attributes);
this.shape = new three.Mesh(geometry, this.material);
Subsequently, we place these shapes into various Object3Ds to enable the movement of large groups of shapes.
While this system performs well on high-end devices with up to 5000 circles, the frame rate begins to decrease beyond that point. On less powerful devices, the performance is significantly slower even with just a hundred meshes. We understand that merging geometries can enhance performance; however, we only have a single shared geometry. Is it feasible to merge meshes in this scenario? Would it even be effective? Please note that these shapes are interactive and can be moved or clicked. What options do we have to optimize this situation?
Additional information:
We are using Ejecta on mobile devices, which performs well with a low number of meshes but struggles after reaching 100. We believe the issue lies in our lack of optimization knowledge rather than a fault of Ejecta. Even on desktop, our application shows some suspicious levels of CPU usage.