I’m working on an application taking as input many pairs of (lon, lat) coordinates (there are hundreds of such pairs), performing a web mercator projection on the XZ-plane and rendering a solid (extruded from lines lying on the XZ-plne) around each of the projected coordinates. The whole scene can be rotated, panned and zoomed in or out.
I’m having performance issues. Can you advise on how to improve performance in such a scenario? Both basic and advanced tips are very appreciated
Do you mean performance in terms of initial stutter (ie. page is not responsive when parsing the pairs into 3D objects) or after the scene is ready the FPS is just low due to amount of 3D objects?
The second one. When I have just a dozen of objects, the application runs smoothly, but the performance drops to 30 FPS or lower when the quantity of objects grows towards the hundreds.
The thing contributing the most to the slowing down seems to be a planar mesh that I try to draw around each projected coordinate, before extruding the solid. This mesh is an instance of THREE.Mesh, with a MeshBasicMaterial and a Circle Geometry; i say this becoes the performance improves when I replace the Mesh with a Line object (i.e., I draw a circonference without filling the circle), but it worsens the visual effect, because lines seem to be less visually interesting than meshes.
The renderer is instanced with the following parameters:
It seems like you’re incurring one draw call per marker (and associated geometry). If you go into the “hundreds”, that may well account for the slowdown.
Depending on your application, you may be able to parse/collect the input, then merge all geometries, to reduce the number of draw calls.
If each marker has the same geometry, merely at a different location, you could also try InstancedMeshes.
If you dont mind reading blogs - this is an old article but i think it explains the concept of instancing very well. I wrote it and its been free forever.