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