title: Advice on Improving ThreeJS Performance
body: <p><p>
  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:</p>
  
  <p><a href="https://fermi.gsfc.nasa.gov/science/constellations/" rel="noreferrer">https://fermi.gsfc.nasa.gov/science/constellations/</a> </p>
  
  <p><img src="https://i.stack.imgur.com/uiEa5.jpg" alt="Screenshot of the gamma-ray constellation page"></p>
  
  <p>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. <p>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.</p>
  
  <p>Here's a basic breakdown of how the interactive scene is constructed, but the full code can be found at the link above:</p>
  
  <ol>
  <li>Create and texture a "sky" sphere</li>
  <li>Position the camera inside the sphere</li>
  <li>Create grid lines along the sphere</li>
  <li>Create the optical constellation lines</li>
  <li>Create the gamma-ray constellation lines</li>
  <li>Create geometries to contain the constellation art</li>
  <li>Create transparent click capture geometries to toggle constellation art</li>
  </ol>
  
  <p>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. </p>