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

Question

我有一个只有一个相机和一个 PlaneBufferGeometry 的场景

如果我将这个平面大小设置为 1x1，我将获得 60fps

如果我将这个平面大小设置为 1000x1000，我将得到 <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 也会下降。