我是Three.js / WebGL的新手，正在建立一个半游戏，半音乐的可视化工具，它涉及许多不同的几何形状，以各种方式穿过场景。我尽可能地研究了优化，并且遵循了很多建议 - 我将很多重复的几何结构（例如，每个立方体几何体，使城市中的一个建筑物）组合成大型GeometryUtils合并，我已经删除了一些纹理，我将文本几何的曲线段减少到只有1.但我的应用程序的性能仍然在40 fps（相当不错，在游戏计算机上）到20 fps（在我的15英寸Macbook上）之间变化，到在各个朋友的电脑上看似随机只有1个fps。
我无法摆脱的一件事，我知道成本很高，是不断更新顶点。我有一个Three.js文本几何体的大网格，我同时渲染所有这些都是为了优化。它们需要看起来像是从天而降 - 所以我给每个文本几何体提供了越来越高的y位置，并且我使用for循环将每个顶点的y位置减少了5帧。
我还在每个帧中更新几何的几何方面，以便它们响应音乐（通过Web Audio API加载为缓冲区）。我每秒每帧更新一个网格的比例，材料的自发光颜色和旋转。
我有以下三个具体问题：
是否有更好的方法来更新Three.js中的大型网格的位置（一个来自几何体的几何体与其合并的几何体），而不是单独更新每个顶点？如果没有，是否有更有效的方法来优化我更新这些顶点的方式？
我在网格上做的其他任何操作（更新比例，材料的自发色或旋转），特别贵吗？有没有办法优化它们？
我是否有任何方法可能不会注意到，除了尽力优化速度，以跨设备标准化我的应用程序的性能？
我的源代码在这里：https://github.com/jaclynj/dancingcities/blob/master/public/main.js
我的网站在这里：dancingcities.heroku.com
谢谢！
答案 0 :(得分：1)
您有多个问题，这些问题都是讨论的主题，而不是可以在不写书的情况下回答的具体问题。但是，您可以考虑使用自定义顶点着色器仅使用BufferedGeometry在GPU上移动几何体，或以较低分辨率（如一半）渲染。那些浮现在脑海中。