Advice on Improving ThreeJS Performance

Question

I'm the lead developer for NASA's new gamma-ray constellations page, which is an interactive outreach tool to highlight what the night sky looks like at different wavelengths:

https://fermi.gsfc.nasa.gov/science/constellations/

I used ThreeJS to put together the interactive content and while the page works fine on a modern laptop, I've been seeking ways to improve performance on older devices as well as mobile platforms.

My apologies if this is too broad of a question, but I would appreciate any comments on how to improve the efficiency of ThreeJS in such an application. In particular, I'm curious to hear how experienced ThreeJS coders would potentially consolidate/merge geometries to cut down on CPU/memory overhead. I'm a scientist pulling double duty as a programmer, so any suggestions on how to improve the performance of the current code would be greatly appreciated.

Here's a basic breakdown of how the interactive scene is constructed, but the full code can be found at the link above:

1. Create and texture a "sky" sphere
2. Position the camera inside the sphere
3. Create grid lines along the sphere
4. Create the optical constellation lines
5. Create the gamma-ray constellation lines
6. Create geometries to contain the constellation art
7. Create transparent click capture geometries to toggle constellation art

The final product has 1083 geometries, 75 textures, 125336 vertices, and 40642 faces. Viewing the page on my 2016 MacBook Pro for a few minutes will heat it up enough to fry an egg. Any suggestions on best practices to make the code more efficient would be appreciated.

Answer 1

Depending on the view position and angle, your app produces up to 600 draw calls per frame. You can easily see this by typing renderer.info.render in the browser console. A good starting point in context of performance optimization is the reduction of draw calls. You can do this in several ways e.g. by merging multiple geometries into a single one, using instanced rendering or avoiding multi material objects. If your application is CPU bound, reducing draw calls can greatly improve the performance of a 3D application.

Since you are using three.js R84, I suggest you upgrade to the latest version. We implemented this year some performance features like uniform caching or avoid redundant state changes in context of blending. Stuff like that might also have a positive impact on your app's performance.

BTW: There are many interesting discussion about performance optimization in the three.js forum.