title: Performance issues when rendering first frame of ThreeJS app
body: <p>I currently have a big impact on the performances of my ThreeJS app when I render the <strong>very first frame</strong>. It causes the Edge and IE 11 browsers to freeze for 5 seconds with a pop-up indicating "This window does not respond", which may scare my users.</p>
  
  <p>Using the Performance profiler of Chrome, it seems the problem come from several ThreeJS functions you can clearly identify in the screenshot below.</p>
  
  <ul>
  <li><code>WebGLUniforms.upload</code> : 425ms (50.7% frame rendering time)</li>
  <li><code>WebGLProgram.constructor</code> : 327ms (38.9% frame rendering time)</li>
  </ul>
  
  <p><a href="https://i.stack.imgur.com/Oz4uU.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Oz4uU.jpg" alt="enter image description here"></a></p>
  
  <p>How can I minimize the duration of the functions call ?</p>
  
  <p>Can I create the program over multiple frames? Or upload the uniforms?</p>
  
  <p>Does the number of materials on my 3D models impact these functions ?</p>
  
  <p>I've tried to hide all the models in the scene and show them one at a time, it seems to prevent the freeze, but each model takes 500ms to show, which is not perfect for user experience. Maybe, it's the only way to go.</p>
  
  <p>Thanks for your time</p>
  
  <hr>
  
  <p><strong>EDIT</strong> : The number of materials or their nature (WebGLStandardMaterial?) seems to affect the performances</p>