Three.js:What';在一台普通桌面上每秒60帧的速度上限是多少?

Three.js:What';在一台普通桌面上每秒60帧的速度上限是多少?,three.js,game-engine,Three.js,Game Engine,我目前正在使用Three.js制作一个游戏。我学习软件工程已经四年了,并且在后端专业工作了两年,但除了一些简单的统一性实验之外,我几乎没有接触过图形 根据renderstats.js,目前我有约22000个顶点和约8000个面,我的桌面(高于平均水平)运行速度不能超过20 FPS。我使用的是Lambert材质以及一个环境光,所以我觉得这个要求不算太高 考虑到这些数字,这是three.js渲染的预期行为吗?我很确定这还没有结束,您可能错过了一些大规模性能改进的可能性 但先给你一些数字 如果你把一

我目前正在使用Three.js制作一个游戏。我学习软件工程已经四年了,并且在后端专业工作了两年,但除了一些简单的统一性实验之外,我几乎没有接触过图形

根据renderstats.js,目前我有约22000个顶点和约8000个面,我的桌面(高于平均水平)运行速度不能超过20 FPS。我使用的是Lambert材质以及一个环境光,所以我觉得这个要求不算太高


考虑到这些数字,这是three.js渲染的预期行为吗?

我很确定这还没有结束,您可能错过了一些大规模性能改进的可能性

但先给你一些数字

  • 如果你把一切都抛在脑后(包括three.js),只渲染一个超简单的点云,每个点渲染一个片段,你可以很容易地在一个GPU上渲染1000-2000万(是的,百万)个点/顶点

  • 仅使用简单的形状和材质,我就已经有了3.js,可以以60FPS的速度渲染500k三角形(分辨率为1080p)范围内的内容。对于最新的高端GPU,您可以将这些数字乘以10

然而,这些数字并没有真正的帮助

一些提示:

  • 如果要调试渲染性能,应首先添加一些指标。Renderstats很好,但我建议为此()进行集成

  • 一般来说,材料的选择不应该太重要,GPU的性能比大多数人想象的要好得多。更可能是管道中其他地方的问题编辑来自评论:在某些情况下,例如使用慢速GPU(想想移动设备)的高分辨率显示,这可能不太真实,复杂的着色器代码可能会降低站点速度,但可能值得先查看其他方面。由于渲染本身是在线程外进行的(因此无法使用常规工具(如devtools profiler)测量渲染的持续时间),因此可以使用-扩展来获取有关GPU上发生的事情的一些信息

  • :three.js需要对每个
    网格
    执行单个drawcall-场景中渲染的对象和过多的对象通常比具有大量顶点的对象的问题大得多。减少DrawCall的数量可以通过将多个几何体合并为一个几何体并使用多种材质、顶点颜色等来实现

  • 如果您正在进行后处理,GPU需要对屏幕上的每个像素进行多次渲染。这可能会严重限制您的性能。这可以通过将多个后处理过程合并为一个过程来优化(我承认,这将是一项艰巨的工作。)

  • 另一个问题可能在JS方面:您应该使用chrome devtools中的profiler或timeline视图来查看是否是javascript每帧占用了太多时间(每帧不应超过8-12毫秒)。我被告知还有一些方法可以优化javascript性能:)


在控制台中键入
renderer.info.render.calls
。它的价值是多少?我在看大约5500个抽签通知。难怪。那是你的问题。谢谢你的帮助!谢谢你的详细回复。就我个人而言,我正在通过合并静态横向网格来减少绘制调用的数量。移动GPU没有那么强大,材质选择仍然很重要。即使在台式机上,现在也有大量的台式机使用HI-DPI屏幕运行show IntelGPUs@MartinSchuhfuß当你说平均GPU时,你在想什么GPU——英特尔IGPU?还是GTX1060?@PranavRai并不重要,因为——我引用我的答案——“这些数字并没有真正的帮助。”。这里的总体想法是,大多数GPU将能够以全高清分辨率(所以我们已经在谈论2M片段)处理每帧的每个像素多次。这在多大程度上取决于精确的GPU规格,比如着色器单元的数量、内存带宽等等。这只是为了表明可能存在大量的优化潜力,但这是否意味着threejs甚至WebGL本身没有开销呢?我觉得这太好了,不可能是真的。。。