我目前正在使用Three.js进行游戏。我已经学习了四年的软件工程，并且一直专注于两个后端的工作，但除了一些简单的Unity实验之外，我几乎没有涉及图形。
根据renderstats.js，我目前有~22,000个顶点和~8,000个面，而我的桌面（高于平均值）无法在20 FPS以上运行它。我正在使用Lambert材料以及单个环境光，所以我觉得这不是太多问题。
考虑到这些数字，这是three.js呈现的预期行为吗？
答案 0 :(得分：6)
我很确定这不是最终的结果，你可能会错过一些改进性能的可能性。
但只是先给你一些数字，
如果你把所有东西都放在一边（包括three.js）并且只渲染一个超简单的点云，每个点渲染一个片段，你就可以很容易地渲染1000到2000万（是的，百万）平均GPU上的点/顶点。
只是简单的形状和材质，我已经有了三个.js来渲染500k三角形（1080p分辨率）60FPS的东西没有问题。对于最新的高端GPU，您可以将这些数字乘以10倍。
然而，这些数字并没有多大帮助。
一些提示：
如果要调试渲染性能，首先应添加一些指标。 Renderstats很好，但我建议将http://spite.github.io/rstats/用于此（see the example）。
一般来说，材料的选择不应该太重要，GPU比大多数人想象的更有能力。它更可能是管道中其他地方的问题。来自评论的 EDIT ：在某些情况下，例如具有慢速GPU（想想移动设备）的高分辨率显示器，这可能不那么真实，复杂的着色器代码会降低您的网站速度，但它可能值得先看其他点。由于渲染本身发生在线程外（因此您无法使用常规工具（如devtools-profiler）测量它的持续时间），您可以使用EXT_disjoint_timer_query - 扩展来获取有关GPU上发生的事情的一些信息
the number of drawcalls shouldn't be too high：three.js需要为场景中呈现的每个Mesh和Points对象执行一次drawcall，而且太多的对象通常是一个更大的问题比有很多顶点的物体。减少drawcalls的数量可以通过将多个几何合并为一个并使用多种材料，顶点颜色和类似的东西来完成。
如果您正在进行后期处理，GPU需要多次渲染屏幕上的每个像素。这可能会严重限制您的表现。这可以通过将多个后处理过程合并为一个来优化（我承认，这将是一项艰苦的工作......）
JS方面可能存在另一个问题：您应该使用chrome devtools中的探查器或时间轴视图来查看是否可能是每帧花费太多时间的javascript（不应超过每帧8-12ms）。我被告知有一些方法可以优化javascript性能：）