尽管在 WebGL 中进行了优化，但帧率仍然很低答案

【问题标题】：Low framerate despite optimization in WebGL尽管在 WebGL 中进行了优化，但帧率仍然很低
【发布时间】：2016-03-17 16:13:52
【问题描述】：

我正在使用 Three.Js 在 WEBGL 中开发一个项目。

这个项目由一个静态几何形状的房间和数百把复制的椅子组成。在将整个东西放在一起并使用以下技术优化帧率之后：

我的表现仍然很糟糕，当所有场景放在一起时只有 15fps。我正在使用两个定向灯和一个半球灯。

经过一番试验，似乎瓶颈在于几何本身。

有人知道可能是什么问题吗？对于可接受的帧速率，合理的多边形数是多少？会不会是我使用的几何体太重了？

有关信息，

我的房间几何有： 69996点， 290571 个顶点， 82607个原语

我的椅子几何形状有： 1254点， 4884个顶点， 1232个原语

【问题讨论】：

感谢您的建议，我一定会尝试分析它，看看是否能找到任何瓶颈。从我的分析到现在，我认为可以公平地说瓶颈在于几何图形，因为当我尝试单独渲染场景的每一块时，我得到了改进的帧速率，因为我添加了块。你会说我可能正在加载我做错了的对象吗？
这当然是可能的。但我认为，与其在这里猜测，不如先对其进行概要分析并使用 webgl 检查器，它可能会更有用。然后也许用三个带有相关 api 调用和/或配置文件结果的 js 标签开始另一个问题。
几何合并后有统计数据吗？在这一步之后，这数百张椅子最终应该是几十张。

【解决方案1】：

最后，WacławJasper 似乎是对的，draw call 过多（每把椅子一个），这是导致 FPS 疯狂下降的瓶颈。

通过进行几何合并，并为相交计算维护八叉树，我设法复制了完全相同的系统，同时将绘制调用减少了 90%，这极大地提高了我的 FPS 速率。

感谢大家的回答。

【讨论】：

【解决方案2】：

我认为问题不仅仅在于几何图形的多边形数。我以 60 fps 的速度渲染了更多。没有代码，很难说问题出在哪里。我认为您应该先对其进行分析，然后查看是否检测到任何瓶颈。然后获取 webGL 检查器并获取 GPU 跟踪。跟踪调用 drawXXX 的次数。这比多边形数量更可能成为瓶颈。

最后，如果你已经完成了 Three js 可用的所有优化，但仍然不够快，那么可能是 Three js 的问题。众所周知，Three js 的编写不是将性能作为其主要目标之一。如果是这样的话，那你就有点不幸了。

【讨论】：

好的，所以我相信已经找到了我的瓶颈。似乎我的对象实例存在一些问题，我无法真正理解/意识到，也许有人可以帮助我。对于上下文，我有一个带有法线的 PointCloud，它为我提供了有关将实例化对象放置在何处的信息，以及对象通过法线四元数的方向。然后，我遍历这个数组，并相应地放置每个实例化对象。在查看了有关实例化、合并等的各种帖子后，我无法弄清楚我做错了什么。有人可以帮忙吗？
我附上问题方法的代码sn-p：bitbucket.org/snippets/electricganesha/Mdddz 多次查看后，我真的很想知道这里有什么问题，为什么这种方法会减慢我的应用程序从60fps 到 20fps...
我认为如果您开始一个新问题对您有利，因为您已经接受了这个问题，因此您将获得有限数量的视图。我没有完全掌握三个 js 内部结构或其 API，但似乎（我在这里可能非常错误）您正在为椅子几何网格中的每个顶点创建一个新的网格对象 newObject = preNewObject.clone();。