为什么在增加三个js中的对象比例时fps会下降

Question

我有一个带有单个相机和一个PlaneBufferGeometry的场景

如果我将此平面尺寸设为1x1，则得到60fps

如果我将此平面尺寸设为1000x1000，我得到＆lt; 20fps

为什么会这样？我在屏幕上绘制了相同数量的顶点。

Here is a fiddle showing the problem

只需将size的定义更改为1到1000，即可发现问题。

var size = 10000;
//size = 1;
var geometry = new THREE.PlaneBufferGeometry(size, size);

我在这个例子中添加了50个相同的平面。只有一架飞机没有重要的fps命中率。

Answer 1

这绝对正常。较大的平面覆盖屏幕上的更多表面，因此更多的像素。 光栅化过程发出更多碎片。对于每一个，GPU将检查它是否通过了深度测试和/或模板测试。如果是这样，它将为每个像素调用片段着色器。

尝试放大1x1平面，直到它覆盖整个屏幕。你的FPS也会下降。

Answer 2

@pleup在那里有一个很好的观点，可以稍微扩展一下：即使是低端的GPU也几乎没有问题透支（多次绘制相同的像素）（i＆＃39; d在全屏显示4到8次这样的事情，仍然保持在60 FPS。由于与DOM和浏览器UI的合成，这个数字对于webgl来说可能略低一些，但它肯定还是多次。

现在发生的事情是这样的：你实际上创造了50架飞机，而不仅仅是一架飞机。所有这些都在同一个地方有相同的大小。不知道为什么，但这与此无关。由于它们都在同一个地方，每个像素需要绘制50次，最坏的情况是整个屏幕区域的50倍。