Performance 渲染ThreeJS应用程序的第一帧时出现性能问题

当前，当我渲染第一帧时，我对我的ThreeJS应用程序的性能有很大影响。它会导致Edge和IE 11浏览器冻结5秒钟，并弹出一个指示“此窗口没有响应”的弹出窗口，这可能会吓到我的用户

使用Chrome的性能分析器，问题似乎来自几个3JS函数，您可以在下面的屏幕截图中清楚地识别它们

• WebGLUniforms.upload

  ：425ms（50.7%的帧渲染时间）

• WebGLProgram.constructor

  ：327ms（38.9%的帧渲染时间）

如何最小化函数调用的持续时间

我可以在多个帧上创建程序吗？还是上传制服

我的3D模型上的材质数量是否会影响这些功能

我试图隐藏场景中的所有模型，并一次显示一个，这似乎可以防止冻结，但每个模型需要500毫秒才能显示，这对于用户体验来说并不完美。也许，这是唯一的出路

谢谢你的时间

---

---

编辑：材质的数量或其性质（WebGLStandardMaterial？）似乎会影响性能

随着时间的推移，在每帧场景中添加一些对象。第一次使用三个.js inits WebGL资源，因此如果场景中有100个对象，那么第一次调用

renderer.render

时，所有100个对象都会被初始化

因此，只需将N个对象放到场景中，调用

renderer.render

，然后下一帧向场景中再添加N个对象，等等，直到添加完所有对象

最重要的可能是通过材质和几何体来完成。换句话说，如果您有10种不同的材质和10种不同的几何体，并且要渲染100种不同的模型（一个模型需要一种材质和一种几何体），那么您需要确保添加的前N个模型不使用所有材质和所有模型，因为这些是需要初始化的

---

后期处理过程也需要初始化，因此，如果您正在使用其中任何一个过程，那么就开始添加对象。

谢谢您的回答@gman。我已经尝试过你关于一次添加一个模型的建议，并在它们之间调用render。请看我问题的结尾。我在应用程序中没有任何后处理效果。我将尝试调用

renderer.compile

以查看添加它们的效果，而不是隐藏它们？一次添加一个模型，调用

renderer.render

在每个模型之间进行渲染与隐藏所有模型并一次显示一个模型的效果相同。顺便说一句，我无法调用

渲染器。编译
，因为ThreeJS找不到顶点着色器，我应该在有时间时查看它。隐藏/添加应该是一样的，我认为，如果它们是场景的一部分但不可见，渲染器将不会设置它们