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

Question

当我渲染第一帧时，我目前对我的ThreeJS应用程序的性能有很大影响。它会使Edge和IE 11浏览器冻结5秒钟，弹出窗口显示＆＃34;此窗口不响应＆＃34;，这可能会吓到我的用户。

使用Chrome的Performance Profiler，似乎问题来自几个ThreeJS功能，您可以在下面的屏幕截图中清楚地识别。

• WebGLUniforms.upload：425毫秒（50.7％的帧渲染时间）
• WebGLProgram.constructor：327ms（38.9％的帧渲染时间）

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

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

我的3D模型上的材料数量会影响这些功能吗？

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

感谢您的时间

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

Answer 1

随着时间的推移，每帧添加一些对象到场景。 Three.js首次使用WebGL资源，因此如果您的场景中有100个对象，则在您第一次调用Map时会初始化所有100个对象。

所以，只需将N个对象放到场景中，调用renderer.render，然后下一帧将N添加到场景等，直到所有对象都被添加为止。

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

后期处理过程也需要初始化，所以如果你正在使用其中任何一个，可能只是初始化那些，那么就开始添加对象。