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

Question

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

我附上相关方法的代码片段：

bitbucket.org/snippets/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);

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

Instancing Multiple Objects Lowers Framerate of WEBGL Application

javascript

3d

opengl-es

webgl

three.js