Three.js性能优化

Question

嗨！ 我正在处理大型顶点对象，我能够展示很多模型，因为我将它们分成了更小的部分（每个部分不超过65K个顶点）。此外，我正在使用Three.js相机。我想通过使用优先队列来提高性能，当用户移动相机时只显示前10个，然后当移动停止时显示其余部分。这部分并不难，但是当它们在另一个对象后面时，我不想将模型放到渲染中，也许从相机视图中发出一些光线（检查边界框命中），并根据命中列表可以构建优先队列。

你觉得呢？

另外，我如何检测是否可以即时加载下一个模型。

- Balázs Szántó

---

遮挡剔除是你想要做的。 - gaitat

谢谢，我很久以前在某个地方读过它，但是现在忘记了。;) - Balázs Szántó

似乎我必须自己进行遮挡剔除，我没有找到解决方案，只有这个：https://github.com/wivlaro/three.js/blob/master/examples/webgl_occlusion_culling.html - Balázs Szántó

那个例子可能有效，但是它是基于一个分叉的three.js r58版本发布的。 - gaitat

另外，我会检查这个链接：https://www.udacity.com/course/viewer#!/c-cs291/l-124106599/m-175393429 - Balázs Szántó

在这里找到了类似的问题：https://dev59.com/cHPYa4cB1Zd3GeqPkpWO - Balázs Szántó

Answer 1

选项A：遮挡剔除，您需要找到一个相关的库。

选项B：使用相机视锥体平面和物体包围盒的AABB平面测试，可以告诉您物体是否在相机的视野范围内（不一定可见，因为这是不可能的操作，在WebGL中已经做了一定程度的优化）。

实现： 谷歌搜索一下，Three.js 可能已经支持这个功能。

选项C：使用最大物体渲染限制，基于距离和大小优先级排序。例如，计算哪些对象是可见的（选项B），然后优先考虑离相机最近且最大的对象，禁用其余对象。

伪代码：

    if(object is in frustum ){
       var priority = (bounding.max - bounding.min) / distanceToCamera 
    }

确保着色器只执行一次，这将使计算时间翻倍(取决于情况)

选项D：如果八个边界框的点都无法命中，则不渲染对象。这相当准确，但并不完美。

选项A肯定是最好的选择，如果您不在意远处的小物体不被渲染，使用选项C是很好的。对于具有许多顶点的对象，选项D效果很好，根据情况，您可能需要对对象进行更多的射线投射。选项B可能对您的场景没有用，但它是c的一部分和其他优化方法。总体而言，从来没有一种极其可靠和最优的方法来判断某些东西是否在另一些东西后面。

- Ender Doe