I am a beginner in the world of Three.js / WebGL and I am currently working on a project that combines elements of gaming and music visualization. This project involves various geometries moving through the scene in unique ways. Despite my efforts to optimize the performance by following advice on merging geometries, reducing textures, and adjusting curve segments, I still experience inconsistent frame rates.
One major concern is the continuous updating of vertices, specifically with a large mesh of text geometries falling from the sky. I have tried to update them efficiently but still struggle with performance issues.
In addition, I am updating other aspects of the geometries such as scale, color, and rotation based on music input. Is there a more effective way to handle these operations?
I have three specific questions:
Is there a better method to update the position of a large mesh without individually updating each vertex?
Are the operations like updating scale, color, and rotation particularly resource-intensive? How can I optimize them?
Aside from optimization, are there any other methods to ensure consistent performance across different devices?
You can find the source code here: https://github.com/jaclynj/dancingcities/blob/master/public/main.js
Visit my site at dancingcities.heroku.com
Thank you!