实例化多个对象会降低 WEBGL 应用程序的帧速率

Question

我正在开发一个 THREE.JS WebGL 应用程序，我需要在其中渲染多个具有相同几何形状的对象，但我偶然发现了一个瓶颈。似乎我的对象实例存在一些问题，我无法真正理解/意识到，也许有人可以帮助我。对于上下文，我有一个带有法线的 PointCloud，它为我提供了有关将实例化对象放置在何处的信息，以及对象通过法线四元数的方向。然后，我遍历这个数组，并相应地放置每个实例化对象。在查看了有关实例化、合并等的各种帖子后，我无法弄清楚我做错了什么。

我附上相关方法的代码sn-p：

bitbucket.org/sn-ps/electricganesha/Mdddz

多次查看后，我真的很想知道这里出了什么问题，为什么这种特殊方法会使我的应用程序从 60fps 减慢到 20fps。

Answer 1

您可能对优化进行了过度补偿。

在合并所有这些几何图形的循环中，尝试添加类似这样的内容

var maxVerts = 1 << 16;

//if merging a new object causes the vert number to go over 2^16 push the merged geometry somewhere, and make a new one for the next batch
if( singleGeometry.vertices.length + newObject.geometry.vertices.length > maxVerts ){
  scene.add(singleGeometry);
  singleGeometry = new Geometry();
}

singleGeometry.merge(newObject.geometry, newObject.matrix);