【发布时间】：2021-12-31 13:34:03
【问题描述】：
我正在使用 A-Frame (HTML) 制作 VR 动画。我的动画有很多 3D 模型。但问题是，当我运行动画时，它会给出低 fps (15-20) 和高绘制调用 (230-240)。因此，动画和相机控制都滞后。那么，如何提高 fps 并减少 draw call 呢？
【问题讨论】：
标签： html animation aframe frame-rate virtual-reality
【发布时间】：2021-12-31 13:34:03
【问题描述】：
draw call 的数量听起来很高，但不会高到导致帧速率下降到 15-20 FPS（尽管这有点取决于您运行的规格系统）。
除了寻找减少绘图调用的方法外，您可能还想降低所使用模型的复杂性或纹理的分辨率，并研究其他可能导致性能问题的原因。
一些选项：
-
降低纹理分辨率 - 只需在 Paint 或 GIMP 等图片编辑器中打开并降低分辨率。尽可能将纹理保持在两个分辨率的幂，例如512 x 512 或 1024 x 1024。
-
降低模型复杂性。看看抽取。最好在浏览器之外作为预处理步骤使用 3D 建模工具（例如搅拌机）完成。此外，值得检查每个模型中有多少个网格，以及这些网格是否可以组合在一个网格中。
-
减少通话。您需要合并几何图形或（如果您多次使用相同的模型）使用实例化。在此处实例化的一些建议：Is there an instancing component available for A-Frame to optimize my scene with many repeated objects?。合并几何图形需要自己编写一些 Javascript 代码，但如果您没有重复几何图形，可能是更好的选择。
如果您还没有这样做，也值得在此处查看此性能提示列表：https://aframe.io/docs/1.2.0/introduction/best-practices.html#performance
它可能是该列表中的其他内容，例如导致问题的光线投射、垃圾收集问题等。
使用浏览器调试器分析您的代码可能会提供一些关于性能情况的进一步线索。
【讨论】：
-
谢谢你的回答，对我帮助很大。