【发布时间】：2013-12-02 03:38:00
【问题描述】：
我是 Three.js / WebGL 的新手，我正在构建一个半游戏半音乐的可视化工具，其中涉及以各种方式在场景中移动的许多不同几何图形。我已经尽我所能研究了优化，并遵循了很多建议 - 我已经将很多重复的几何图形（例如，在城市中构成一栋建筑物的每个立方体几何图形）组合成大型 GeometryUtils 合并，我已经删除了一些纹理，我将文本几何图形的曲线段减少到只有 1。但我的应用程序的性能仍然在 40 fps（在游戏计算机上相当不错）到 20 fps（在我的 15 英寸 Macbook 上）到在各种朋友的计算机上似乎随机只有 1 fps。
我无法摆脱的一件我知道代价高昂的事情是不断更新顶点。我有一个很大的 Three.js 文本几何网格，我同时渲染它们以尝试优化。它们需要看起来像是从天上掉下来的——所以我给每个文本几何图形设置了一个越来越高的 y 位置，并使用 for 循环将每个顶点的 y 位置每帧递减 5。
我还在每一帧中更新几何图形的许多方面，以便它们响应音乐（通过 Web 音频 API 作为缓冲区加载）。我每秒每帧更新一个网格的比例、材质的发光颜色和旋转。
我有以下三个具体问题：
有没有更好的方法来更新 Three.js 中大网格的位置（一个来自与许多较小几何合并的几何），而不单独更新每个顶点？如果没有，是否有更有效的方法来优化我更新这些顶点的方式？
我在网格上执行的任何其他操作（更新比例、材料的发光颜色或旋转）是否特别昂贵？有没有办法优化它们？
除了尽最大努力优化速度之外，还有什么我可能不知道的方法来标准化我的应用程序跨设备的性能？
我的源代码在这里：https://github.com/jaclynj/dancingcities/blob/master/public/main.js
我的网站在这里：dancingcities.heroku.com
谢谢！
【问题讨论】：
-
也许我理解错了。要在 three.js 中移动模型，您需要更新其位置而不是顶点。在初始化时
var object = new THREE.Mesh(...)和运行时object.position.y += velocity -
我无法使用优化的几何体来做到这一点（您可以创建许多小网格并使用 GeometryUtils 将它们与更大的几何体合并，以便您只进行一次绘制调用） - 是否有方式？
标签： javascript optimization three.js webgl