three.js - ThreeJS InstancedBufferGeometry 剔除问题？

Question

当我渲染 3000 个模型实例并将它们保留在 View 区域中时，我得到 55FPS，但是如果我有 5000 个模型实例，但将其中 2000 个实例保留在 View 区域之外，我仍然得到 40 FPS。

camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.01, 10000);

是否有可能它正在正确地剔除，但事实上它必须确定它是否被剔除，是什么减慢了它的速度？我主要是从 https://github.com/mrdoob/three.js/blob/master/examples/webgl_buffergeometry_instancing_dynamic.html 中提取的

编辑*我知道我可以使用geometry.maxInstancedCount = trackCount;这很有帮助，但它与剔除不太一样，因为我已经在当前视口(viewport)之外进行了跟踪，但它仍然会损害性能

有什么建议吗？或者想法？

Answer 1

对于实例几何体， Three.js 无法进行任何视锥体剔除，因为没有有关对象最终位置的信息。这将在顶点着色器中计算，并且 Three.js 对那里发生的情况一无所知。

任何剔除发生的最早可能时间是在为每个实例的每个顶点运行顶点着色器之后。这已经解释了您所看到的帧速率下降的原因。尽管可见的对象/三角形数量相同，但顶点着色器调用数量却高达 166%。

如果您想自己实现剔除，您可以尝试重新排列每个帧的属性缓冲区中的实例(跳过不可见实例)并将最大实例计数调整为可见实例的数量。这可能有点违反直觉，但在每个帧上重新计算所有实例属性缓冲区实际上可以提供更好的性能。

要进行可见性测试，最简单的方法可能是使用 THREE.Frustum() 类和 frustum.containsPoint()。看起来像这样

const frustum = new Frustum();
const projScreenMatrix = new Matrix();

// assume instances is an array of objects containing all the 
// relevant information for all instances
const instances = [
  // {position: ...}, {position: ...}, ...
];

// for every frame
projScreenMatrix.multiplyMatrices(
  camera.projectionMatrix, 
  camera.matrixWorldInverse 
);
frustum.setFromMatrix(projScreenMatrix);

let visibleInstanceCount = 0;

for (let i = 0; i < instanceCount; i++) {
  const pos = instances[i].position;

  if (!frustum.containsPoint(pos)) {
    continue;
  }

  // add instance to instance-attribute buffers
  pos.toArray(instancePositionBuffer, visibleInstanceCount * 3);
  visibleInstanceCount++;
}

geometry.maxInstanceCount = visibleInstanceCount;