Three.js: 在普通桌面上保持 60 FPS 的上限是多少？
Three.js: What's the upper limit for holding 60 FPS on an average desktop?
我目前正在使用 Three.js 开发一款游戏。我已经学习了四年的软件工程，并在后端专业工作了两年，但除了一些简单的 Unity 实验之外，我几乎没有接触过图形。
根据 renderstats.js，我目前有约 22,000 个顶点和约 8,000 个面，我的桌面（高于平均水平）不能 运行 超过 20 FPS。我正在使用 Lambert material 以及单一环境光，所以我觉得这并不过分。
考虑到这些数字，这是 three.js 渲染的预期行为吗？
我敢肯定这还没有结束，您可能错过了一些大规模性能改进的可能性。
但只是先给你一些数字，
如果你把所有东西都放在一边（包括 three.js），只渲染一个超简单的点云，每个点渲染一个片段，你可以很容易地达到渲染 10-20百万（是的，百万）points/vertices 在平均 GPU 上。
仅使用简单的形状和 material，我已经 three.js 可以毫无问题地以 60FPS 渲染 500k 个三角形（1080p 分辨率）范围内的内容。对于最新的高端 GPU，您可能会将这些数字乘以 10。
但是，这些数字并没有多大帮助。
一些提示：
如果你想调试你的渲染性能，你应该先添加一些指标。 Renderstats 很好，但我建议集成 http://spite.github.io/rstats/ for this (see the example).
一般来说 material 的选择应该无关紧要，GPU 比大多数人想象的要强大得多。这更有可能是管道中其他地方的问题。 编辑 来自评论：在某些情况下，例如高分辨率显示器与慢速 GPU（想想移动设备）这可能不太真实，复杂的着色器代码会降低您的网站速度，但它可能值得先看看其他要点。由于渲染本身发生在线程外（因此您无法使用像 devtools-profiler 这样的常规工具来测量它的持续时间），您可以使用 EXT_disjoint_timer_query-extension 来获取有关 GPU 上发生的事情的一些信息.
the number of drawcalls shouldn't be too high：three.js 需要为场景中渲染的每个 Mesh 和 Points 对象以及太多对象执行一次绘制调用通常比具有很多顶点的对象要大得多的问题。可以通过将多个几何体合并为一个并使用多materials、顶点颜色和类似的东西来减少绘制调用的数量。
如果进行后处理，GPU 需要多次渲染屏幕上的每个像素。这也可能会极大地限制您的表现。这可以通过将多个后处理通道合并为一个来优化（我承认，这会是很多艰苦的工作..）
另一个问题可能在 JS 方面：您应该使用 chrome 开发工具中的分析器或时间线视图来查看是否可能是 javascript每帧时间过多（每帧不应超过 8-12 毫秒）。有人告诉我还有一些方法可以优化 javascript-performance :)
我目前正在使用 Three.js 开发一款游戏。我已经学习了四年的软件工程，并在后端专业工作了两年，但除了一些简单的 Unity 实验之外，我几乎没有接触过图形。
根据 renderstats.js，我目前有约 22,000 个顶点和约 8,000 个面，我的桌面（高于平均水平）不能 运行 超过 20 FPS。我正在使用 Lambert material 以及单一环境光，所以我觉得这并不过分。
考虑到这些数字，这是 three.js 渲染的预期行为吗？
我敢肯定这还没有结束，您可能错过了一些大规模性能改进的可能性。
但只是先给你一些数字，
如果你把所有东西都放在一边（包括 three.js），只渲染一个超简单的点云，每个点渲染一个片段，你可以很容易地达到渲染 10-20百万（是的，百万）points/vertices 在平均 GPU 上。
仅使用简单的形状和 material，我已经 three.js 可以毫无问题地以 60FPS 渲染 500k 个三角形（1080p 分辨率）范围内的内容。对于最新的高端 GPU，您可能会将这些数字乘以 10。
但是，这些数字并没有多大帮助。
一些提示：
如果你想调试你的渲染性能，你应该先添加一些指标。 Renderstats 很好，但我建议集成 http://spite.github.io/rstats/ for this (see the example).
一般来说 material 的选择应该无关紧要，GPU 比大多数人想象的要强大得多。这更有可能是管道中其他地方的问题。 编辑 来自评论：在某些情况下，例如高分辨率显示器与慢速 GPU（想想移动设备）这可能不太真实，复杂的着色器代码会降低您的网站速度，但它可能值得先看看其他要点。由于渲染本身发生在线程外（因此您无法使用像 devtools-profiler 这样的常规工具来测量它的持续时间），您可以使用 EXT_disjoint_timer_query-extension 来获取有关 GPU 上发生的事情的一些信息.
the number of drawcalls shouldn't be too high：three.js 需要为场景中渲染的每个
Mesh和Points对象以及太多对象执行一次绘制调用通常比具有很多顶点的对象要大得多的问题。可以通过将多个几何体合并为一个并使用多materials、顶点颜色和类似的东西来减少绘制调用的数量。如果进行后处理，GPU 需要多次渲染屏幕上的每个像素。这也可能会极大地限制您的表现。这可以通过将多个后处理通道合并为一个来优化（我承认，这会是很多艰苦的工作..）
另一个问题可能在 JS 方面：您应该使用 chrome 开发工具中的分析器或时间线视图来查看是否可能是 javascript每帧时间过多（每帧不应超过 8-12 毫秒）。有人告诉我还有一些方法可以优化 javascript-performance :)